diff --git a/test/detach.test.js b/test/detach.test.js index d139bf9..9145200 100644 --- a/test/detach.test.js +++ b/test/detach.test.js @@ -242,7 +242,7 @@ suite('syncState', () => { ); }); - test.only('syncState only opens the detached window if already detached', async () => { + test('syncState only opens the detached window if already detached', async () => { el.syncState(); await perform(async ({ page, expect }) => { await expect( diff --git a/test/haunted-pan-zoom.test.js b/test/haunted-pan-zoom.test.js index cb9058e..0d93ac7 100644 --- 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', () => { > `); 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, }); }); });