Testing

Testing

Go to Codecov to see the current test coverage.

Techstack

  • Vitest: testing framework
  • HappyDOM: DOM environment, essential for a front-end library

Standards

Pointeract obeys the test requirements as follows:

  • When developing a new module, it is mandatory to write a unit test unless it's untestable.
  • The overall test coverage should be higher than 90%.

Monkey Test

Here's the proof why Pointeract claims itself robust:

ts
test('monkey test', async () => {
	const { acc, dispose, Pointer } = setup([MultitouchPanZoom, Drag]);
	const p1 = new Pointer();
	const p2 = new Pointer();
	const p3 = new Pointer();

	p1.down();
	p1.move({ x: -100, y: 0 }); // left 100
	// p1: (-100, 0);

	p2.down({ x: 100, y: 0 });
	p2.move({ x: -100, y: 0 }); // scale * 0.5, left 50
	// p1: (-100, 0); p2: (0, 0);

	// down 300, scale * 3
	for (let i = 0; i < 10; i++) {
		p1.move({ x: -10, y: 30 });
		p2.move({ x: 10, y: 30 });
	}
	// p1: (-200, 300); p2: (100, 300);

	p3.down();
	p3.move({ x: 100, y: -100 }); // ignore the third pointer
	p3.up();
	p1.up();

	p2.move({ x: 0, y: -600 }); // up 600
	// p2: (100, -300);

	p3.down({ x: 200, y: 0 });
	p3.move({ x: 100, y: 0 }); // scale * ~= 1.14, right 50
	// p2: (100, -300); p3: (300, 0);
	p2.up();
	p3.up();

	const pos = {
		x: acc.pan.x + acc.drag.x,
		y: acc.pan.y + acc.drag.y,
	};
	expect(pos).toEqual({ x: -100, y: -300 }); // result: left 100, up 300
	expect(1.7 < acc.scale && acc.scale < 1.72).toBe(true);

	await dispose();
});

The interaction denoted by the code is visualized as follows:

Monkey Test

The aim of this test is to simulate chaotic multitouch drag, pan and zoom intends to ensure drag and multitouchPanZoom modules can survive extreme conditions. Pointeract handled it decently.

But when the similar manual human test is conducted in the website demos of Hammer.js and Interact.js, they failed for different symptoms.

This test demonstrates how Pointeract can handle extreme conditions with the least amount of code.