test: fix flaky test

Neovici · Dec 8, 2023 · 0ad6b9e · 0ad6b9e
1 parent adfbe4b
commit 0ad6b9e
Showing 1 changed file with 42 additions and 42 deletions.
diff --git a/test/haunted-pan-zoom.test.js b/test/haunted-pan-zoom.test.js
@@ -1,20 +1,23 @@
 import { assertFuzzyMatch } from './helpers';
 import '../lib/haunted-pan-zoom.js';
-import {
-	assert, fixtureSync, html, aTimeout
-} from '@open-wc/testing';
-
-const status = (el, status) => new Promise(resolve =>
-		el.addEventListener('status-changed', (
-			{ detail: { value }}) => value === status && resolve()
-		)
-	),
-	loaded = el => status(el, 'loaded'),
-	error = el => status(el, 'error'),
-
-	scroll = (el, dir) => el.shadowRoot.querySelector('.container').dispatchEvent(new WheelEvent('wheel', { deltaY: dir })),
-	scrollDown = el => scroll(el, 1),
-	scrollUp = el => scroll(el, -1);
+import { assert, fixtureSync, html, aTimeout } from '@open-wc/testing';
+import { perform } from '@neovici/cfg/web/perform.js';
+
+const status = (el, status) =>
+		new Promise((resolve) =>
+			el.addEventListener(
+				'status-changed',
+				({ detail: { value } }) => value === status && resolve(),
+			),
+		),
+	loaded = (el) => status(el, 'loaded'),
+	error = (el) => status(el, 'error'),
+	scroll = (el, dir) =>
+		el.shadowRoot
+			.querySelector('.container')
+			.dispatchEvent(new WheelEvent('wheel', { deltaY: dir })),
+	scrollDown = (el) => scroll(el, 1),
+	scrollUp = (el) => scroll(el, -1);
 
 // eslint-disable-next-line max-lines-per-function
 suite('haunted-pan-zoom', () => {
@@ -30,6 +33,7 @@ suite('haunted-pan-zoom', () => {
 			></haunted-pan-zoom>
 		`);
 		await loaded(el);
+		await aTimeout();
 	});
 
 	test('displays the image centered', () => {
@@ -39,7 +43,7 @@ suite('haunted-pan-zoom', () => {
 			top: 51.75,
 			left: 8,
 			width: 200,
-			height: 112.5
+			height: 112.5,
 		});
 	});
 
@@ -62,7 +66,7 @@ suite('haunted-pan-zoom', () => {
 			top: 8,
 			left: 8,
 			width: 200,
-			height: 200
+			height: 200,
 		});
 	});
 
@@ -76,7 +80,7 @@ suite('haunted-pan-zoom', () => {
 			top: 6.75,
 			left: -72,
 			width: 359,
-			height: 201.94
+			height: 201.94,
 		});
 
 		scrollDown(el);
@@ -86,40 +90,36 @@ suite('haunted-pan-zoom', () => {
 			top: 51.75,
 			left: 8,
 			width: 200,
-			height: 112.5
+			height: 112.5,
 		});
 	});
 
 	test('handles mouse panning', async () => {
-		const img = el.shadowRoot.querySelector('img'),
-			evOpts = {
-				bubbles: true,
-				cancelable: true,
-				composed: true
-			};
-
-		img.dispatchEvent(new MouseEvent('mousedown', {
-			clientX: 10,
-			clientY: 10,
-			...evOpts
-		}));
-		await aTimeout();
+		const img = el.shadowRoot.querySelector('img');
 
-		img.dispatchEvent(new MouseEvent('mousemove', {
-			clientX: 10,
-			clientY: 20,
-			...evOpts
-		}));
-		await aTimeout();
+		await perform(async ({ page }) => {
+			await page.mouse.move(100, 100);
+			await page.mouse.down();
+			await page.mouse.move(120, 120);
+		});
 
-		img.dispatchEvent(new MouseEvent('mouseup', evOpts));
-		await aTimeout();
+		assertFuzzyMatch(img.getBoundingClientRect(), {
+			top: 51.75,
+			left: 8,
+			width: 200,
+			height: 112.5,
+		});
+
+		await perform(async ({ page }) => {
+			await page.mouse.move(100, 60);
+			await page.mouse.up();
+		});
 
 		assertFuzzyMatch(img.getBoundingClientRect(), {
-			top: 61.75,
+			top: 11.75,
 			left: 8,
 			width: 200,
-			height: 112.5
+			height: 112.5,
 		});
 	});
 });