diff --git a/src/browser/commands.js b/src/browser/commands.js index 3e65c4ba..9ba41a45 100644 --- a/src/browser/commands.js +++ b/src/browser/commands.js @@ -1,4 +1,5 @@ -import { sendKeys as cmdSendKeys, sendMouse } from '@web/test-runner-commands'; +import { sendKeys as cmdSendKeys, sendMouse as cmdSendMouse } from '@web/test-runner-commands'; +import { requestMouseReset } from './reset.js'; function getElementPosition(elem) { const { x, y, width, height } = elem.getBoundingClientRect(); @@ -8,6 +9,11 @@ function getElementPosition(elem) { }; } +async function sendMouse(options) { + await cmdSendMouse(options); + requestMouseReset(); +} + export async function clickAt(x, y) { await sendMouse({ type: 'click', position: [x, y] }); } diff --git a/src/browser/reset.js b/src/browser/reset.js index 06ed5eb3..f8e081cd 100644 --- a/src/browser/reset.js +++ b/src/browser/reset.js @@ -8,7 +8,12 @@ const DEFAULT_LANG = 'en', let currentLang = undefined, currentRtl = false, currentViewportHeight = 0, - currentViewportWidth = 0; + currentViewportWidth = 0, + shouldResetMouse = true; + +export function requestMouseReset() { + shouldResetMouse = true; +} export async function reset(opts) { @@ -23,11 +28,10 @@ export async function reset(opts) { window.scroll(0, 0); - const startTime = Date.now(); - await sendMouse({ type: 'move', position: [0, 0] }).catch(() => {}); - const timeTaken = Date.now() - startTime; - // eslint-disable-next-line no-console - if (timeTaken > 200) console.log(`*** Took ${timeTaken}ms to reset mouse position.`); + if (shouldResetMouse) { + shouldResetMouse = false; + await sendMouse({ type: 'move', position: [0, 0] }).catch(() => {}); + } if (document.activeElement !== document.body) { document.activeElement.blur(); diff --git a/test/browser/commands.test.js b/test/browser/commands.test.js index 7a3708a2..c5ce639a 100644 --- a/test/browser/commands.test.js +++ b/test/browser/commands.test.js @@ -5,8 +5,9 @@ import { spy } from 'sinon'; describe('commands', () => { let elem; + const input = html``; beforeEach(async() => { - elem = await fixture(html``); + elem = await fixture(input); }); it('should click on element', async() => { @@ -73,4 +74,36 @@ describe('commands', () => { window.removeEventListener('keydown', onKeyDown); }); + describe('mouseReset', () => { + const mousePos = { x: 0, y: 0 }; + function onMouseMove(e) { + mousePos.x = e.clientX; + mousePos.y = e.clientY; + } + + beforeEach(() => { + window.addEventListener('mousemove', onMouseMove); + }); + + afterEach(() => { + window.removeEventListener('mousemove', onMouseMove); + }); + + [ + { command: 'clickElem', action: (elem) => clickElem(elem) }, + { command: 'clickAt', action: () => clickAt(5, 10) }, + { command: 'hoverElem', action: (elem) => hoverElem(elem) }, + { command: 'hoverAt', action: () => hoverAt(5, 10) }, + ].forEach(({ command, action }) => { + it(`should reset mouse position after ${command}`, async() => { + await action(elem); + expect(mousePos.x).to.not.equal(0); + expect(mousePos.y).to.not.equal(0); + await fixture(input); + expect(mousePos.x).to.equal(0); + expect(mousePos.y).to.equal(0); + }); + }); + }); + }); diff --git a/test/browser/element.vdiff.js b/test/browser/element.vdiff.js index ecf20596..06a6995c 100644 --- a/test/browser/element.vdiff.js +++ b/test/browser/element.vdiff.js @@ -1,5 +1,5 @@ import { css, html, LitElement } from 'lit'; -import { defineCE, expect, fixture } from '../../src/browser/index.js'; +import { defineCE, expect, fixture, hoverElem } from '../../src/browser/index.js'; import { executeServerCommand } from '@web/test-runner-commands'; const elementTag = defineCE( @@ -19,6 +19,9 @@ const elementTag = defineCE( transition: opacity 2000ms ease-out; width: 300px; } + :host(:hover) { + background-color: rgba(255,165,225,0.5); + } b { display: block; text-align: start; @@ -40,6 +43,8 @@ describe('element-matches', () => { [ { name: 'default' }, { name: 'rtl', rtl: true }, + { name: 'hover', action: async(elem) => await hoverElem(elem) }, + { name: 'no-hover' }, // Test will fail if mouse reseting breaks { name: 'transition', action: elem => elem.style.opacity = '0.2' } ].forEach(({ name, rtl, action }) => { it(name, async() => { diff --git a/test/browser/fixture.test.js b/test/browser/fixture.test.js index 0312f331..a305f5b2 100644 --- a/test/browser/fixture.test.js +++ b/test/browser/fixture.test.js @@ -3,6 +3,7 @@ import { defineCE, expect, fixture, html, waitUntil } from '../../src/browser/in import { restore, stub } from 'sinon'; import { focusElem } from '../../src/browser/commands.js'; import { LitElement } from 'lit'; +import { requestMouseReset } from '../../src/browser/reset.js'; import { sendMouse } from '@web/test-runner-commands'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; @@ -82,13 +83,25 @@ describe('fixture', () => { expect(window.scrollY).to.equal(0); }); - it('should reset mouse position', async() => { + it('will not reset mouse position by default', async() => { const elem = html`

hello

`; await fixture(elem); await sendMouse({ type: 'move', position: [5, 10] }); expect(mousePos.x).to.equal(5); expect(mousePos.y).to.equal(10); await fixture(elem); + expect(mousePos.x).to.equal(5); + expect(mousePos.y).to.equal(10); + }); + + it('should reset mouse position if requested', async() => { + const elem = html`

hello

`; + await fixture(elem); + await sendMouse({ type: 'move', position: [5, 10] }); + requestMouseReset(); + expect(mousePos.x).to.equal(5); + expect(mousePos.y).to.equal(10); + await fixture(elem); expect(mousePos.x).to.equal(0); expect(mousePos.y).to.equal(0); });