Testing

Any professional library should have a test suite, Pointeract is no different.

Above is the current test coverage.

Techstack

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

Standards

Pointeract should obey 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%.

Chaotic Testing

One great feature of Pointeract that we are proud of is its robustness which exceeds most competitors. The following test is an example:

test('chaotic movements', () => {
	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);

	dispose();
});

The interaction denoted by the code is visualized as follows:

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 coped it well. But when the similar test (manual human test) is conducted in other libraries like Hammer.js or Interact.js, they failed.