test: add sendMouseToElement test runner command (#8566) (#8616)

packages/button/test/visual/lumo/button.test.js

@@ -1,10 +1,9 @@
-import { sendKeys } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/icon/theme/lumo/vaadin-icon.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import '../../../theme/lumo/vaadin-button.js';
-import { hover, resetHover } from '../helpers.js';
 
 describe('button', () => {
   let div, element;
@@ -17,7 +16,7 @@ describe('button', () => {
   });
 
   afterEach(async () => {
-    await resetHover();
+    await resetMouse();
   });
 
   describe('basic', () => {
@@ -68,7 +67,7 @@ describe('button', () => {
 
     it('primary hover', async () => {
       element.setAttribute('theme', 'primary');
-      await hover(element);
+      await sendMouseToElement({ type: 'move', element });
       await visualDiff(div, 'theme-primary-hover');
     });
 
@@ -91,7 +90,7 @@ describe('button', () => {
 
     it('secondary hover', async () => {
       element.setAttribute('theme', 'secondary');
-      await hover(element);
+      await sendMouseToElement({ type: 'move', element });
       await visualDiff(div, 'theme-secondary-hover');
     });
 
@@ -108,7 +107,7 @@ describe('button', () => {
 
     it('tertiary hover', async () => {
       element.setAttribute('theme', 'tertiary');
-      await hover(element);
+      await sendMouseToElement({ type: 'move', element });
       await visualDiff(div, 'theme-tertiary-hover');
     });
 

packages/button/test/visual/material/button.test.js

@@ -1,10 +1,9 @@
-import { sendKeys } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/icon/theme/material/vaadin-icon.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import '../../../theme/material/vaadin-button.js';
-import { hover, resetHover } from '../helpers.js';
 
 describe('button', () => {
   let div, element;
@@ -17,7 +16,7 @@ describe('button', () => {
   });
 
   afterEach(async () => {
-    await resetHover();
+    await resetMouse();
   });
 
   describe('basic', () => {
@@ -66,7 +65,7 @@ describe('button', () => {
         element.setAttribute('theme', `${variant}`);
         await new Promise((resolve) => {
           element.addEventListener('transitionend', resolve, { once: true });
-          hover(element);
+          sendMouseToElement({ type: 'move', element });
         });
         await visualDiff(div, `theme-${variant}-hover`);
       });

packages/checkbox/test/checkbox.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown, mouseup, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-checkbox.js';
@@ -157,28 +157,20 @@ describe('checkbox', () => {
     });
 
     describe('focus', () => {
-      let inputX, inputY;
-
-      beforeEach(() => {
-        const rect = input.getBoundingClientRect();
-        inputX = Math.floor(rect.x + rect.width / 2);
-        inputY = Math.floor(rect.y + rect.height / 2);
-      });
-
       afterEach(async () => {
         await resetMouse();
       });
 
       it('should focus on input click when not focused yet', async () => {
-        await sendMouse({ type: 'click', position: [inputX, inputY] });
+        await sendMouseToElement({ type: 'click', element: input });
         expect(checkbox.hasAttribute('focused')).to.be.true;
       });
 
       it('should keep focus on input click when already focused', async () => {
         const spy = sinon.spy();
         checkbox.addEventListener('focusout', spy);
         input.focus();
-        await sendMouse({ type: 'click', position: [inputX, inputY] });
+        await sendMouseToElement({ type: 'click', element: input });
         expect(spy).to.be.not.called;
       });
     });

packages/dashboard/test/dashboard-widget-reordering.test.ts

@@ -1,9 +1,8 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, isFirefox, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-dashboard.js';
-import { hover } from '../../button/test/visual/helpers.js';
 import type { Dashboard, DashboardItem, DashboardSectionItem } from '../vaadin-dashboard.js';
 import {
   createDragEvent,
@@ -144,7 +143,10 @@ describe('dashboard - widget reordering', () => {
       dashboard.addEventListener('dashboard-item-selected-changed', spy);
       await resetMouse();
       // Hover over the widget drag handle
-      await hover(getDraggable(getElementFromCell(dashboard, 0, 0)!));
+      await sendMouseToElement({
+        type: 'move',
+        element: getDraggable(getElementFromCell(dashboard, 0, 0)!),
+      });
       // Press down the left mouse button
       await sendMouse({
         type: 'down',

packages/date-time-picker/test/basic.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { aTimeout, fixtureSync, focusin, focusout, nextRender, outsideClick } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-date-time-picker.js';
@@ -41,13 +41,6 @@ describe('Basic features', () => {
   let datePicker;
   let timePicker;
 
-  async function click(element) {
-    const rect = element.inputElement.getBoundingClientRect();
-    const x = Math.floor(rect.x + rect.width / 2);
-    const y = Math.floor(rect.y + rect.height / 2);
-    await sendMouse({ type: 'click', position: [x, y] });
-  }
-
   beforeEach(async () => {
     dateTimePicker = fixtureSync('<vaadin-date-time-picker></vaadin-date-time-picker>');
     await nextRender();
@@ -201,11 +194,11 @@ describe('Basic features', () => {
 
   describe('date-picker focused', () => {
     it('should remove focused attribute on time-picker click', async () => {
-      await click(datePicker);
+      await sendMouseToElement({ type: 'click', element: datePicker.inputElement });
       await nextRender();
       expect(datePicker.hasAttribute('focused')).to.be.true;
 
-      await click(timePicker);
+      await sendMouseToElement({ type: 'click', element: timePicker.inputElement });
       expect(datePicker.hasAttribute('focused')).to.be.false;
     });
 
@@ -217,7 +210,7 @@ describe('Basic features', () => {
       await nextRender();
       expect(datePicker.hasAttribute('focus-ring')).to.be.true;
 
-      await click(timePicker);
+      await sendMouseToElement({ type: 'click', element: timePicker.inputElement });
       expect(datePicker.hasAttribute('focus-ring')).to.be.false;
     });
   });
@@ -230,13 +223,13 @@ describe('Basic features', () => {
     });
 
     it('should remove focused attribute on date-picker click', async () => {
-      await click(timePicker);
+      await sendMouseToElement({ type: 'click', element: timePicker.inputElement });
       // Open the overlay with the keyboard
       await sendKeys({ press: 'ArrowDown' });
       await nextRender();
       expect(timePicker.hasAttribute('focused')).to.be.true;
 
-      await click(datePicker);
+      await sendMouseToElement({ type: 'click', element: datePicker.inputElement });
       expect(timePicker.hasAttribute('focused')).to.be.false;
     });
 
@@ -249,7 +242,7 @@ describe('Basic features', () => {
       await nextRender();
       expect(timePicker.hasAttribute('focus-ring')).to.be.true;
 
-      await click(datePicker);
+      await sendMouseToElement({ type: 'click', element: datePicker.inputElement });
       expect(timePicker.hasAttribute('focus-ring')).to.be.false;
     });
   });

packages/grid-pro/test/edit-column-renderer.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { enter, esc, fixtureSync, focusout, nextFrame, space } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../theme/lumo/vaadin-grid-pro.js';
@@ -159,6 +159,10 @@ describe('edit column renderer', () => {
       cell = getContainerCell(grid.$.items, 0, 0);
     });
 
+    afterEach(async () => {
+      await resetMouse();
+    });
+
     it('should call the edit mode renderer to cell when entering edit mode', () => {
       column.editModeRenderer = function (root) {
         root.innerHTML = '<input>';
@@ -265,8 +269,7 @@ describe('edit column renderer', () => {
       await nextFrame();
       editor = getCellEditor(cell);
 
-      const { x, y } = editor.$.clearButton.getBoundingClientRect();
-      await sendMouse({ type: 'click', position: [Math.floor(x + 10), Math.floor(y + 10)] });
+      await sendMouseToElement({ type: 'click', element: editor.$.clearButton });
       await nextFrame();
       expect(getCellEditor(cell)).to.be.ok;
     });

packages/grid/test/drag-and-drop.test.js

@@ -1,9 +1,8 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { aTimeout, fixtureSync, listenOnce, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-grid.js';
-import { hover } from '@vaadin/button/test/visual/helpers.js';
 import { flushGrid, getBodyCellContent, getFirstCell, getRowBodyCells, getRows } from './helpers.js';
 
 describe('drag and drop', () => {
@@ -1129,7 +1128,7 @@ describe('drag and drop', () => {
 
     async function dragElement(element) {
       await resetMouse();
-      await hover(element);
+      await sendMouseToElement({ type: 'move', element });
       await sendMouse({ type: 'down' });
       await sendMouse({ type: 'move', position: [100, 100] });
       await sendMouse({ type: 'up' });

packages/overlay/test/interactions.test.js

@@ -1,11 +1,10 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import {
   click,
   enterKeyDown,
   escKeyDown,
   fixtureSync,
-  middleOfNode,
   mousedown,
   mouseup,
   nextRender,
@@ -304,10 +303,7 @@ describe('interactions', () => {
       });
 
       it('should focus overlay part on clicking the content element', async () => {
-        const div = overlay.querySelector('div');
-        const { x, y } = middleOfNode(div);
-
-        await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextRender();
 
         expect(document.activeElement).to.be.equal(overlay);
@@ -316,10 +312,7 @@ describe('interactions', () => {
       it('should not focus overlay part if tabindex attribute removed', async () => {
         overlay.$.overlay.removeAttribute('tabindex');
 
-        const div = overlay.querySelector('div');
-        const { x, y } = middleOfNode(div);
-
-        await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextRender();
 
         expect(document.activeElement).to.be.equal(document.body);

packages/popover/test/trigger.test.js

@@ -1,11 +1,10 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import {
   esc,
   fixtureSync,
   focusin,
   focusout,
-  middleOfNode,
   mousedown,
   nextRender,
   nextUpdate,
@@ -274,8 +273,7 @@ describe('trigger', () => {
       });
 
       it('should not close on overlay mousedown when target has focus', async () => {
-        const { x, y } = middleOfNode(overlay.querySelector('div'));
-        await sendMouse({ type: 'click', position: [Math.round(x), Math.round(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextUpdate();
 
         expect(overlay.opened).to.be.true;
@@ -284,8 +282,7 @@ describe('trigger', () => {
       it('should not close on overlay mousedown when overlay has focus', async () => {
         overlay.querySelector('input').focus();
 
-        const { x, y } = middleOfNode(overlay.querySelector('div'));
-        await sendMouse({ type: 'click', position: [Math.round(x), Math.round(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextUpdate();
 
         expect(overlay.opened).to.be.true;
@@ -295,8 +292,7 @@ describe('trigger', () => {
         // Remove the input so that first Tab would leave popover
         overlay.querySelector('input').remove();
 
-        const { x, y } = middleOfNode(overlay.querySelector('div'));
-        await sendMouse({ type: 'click', position: [Math.round(x), Math.round(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextUpdate();
 
         // Tab to focus input next to the target
@@ -309,8 +305,7 @@ describe('trigger', () => {
       it('should only cancel one overlay focusout after the overlay mousedown', async () => {
         overlay.querySelector('input').focus();
 
-        const { x, y } = middleOfNode(overlay.querySelector('div'));
-        await sendMouse({ type: 'click', position: [Math.round(x), Math.round(y)] });
+        await sendMouseToElement({ type: 'click', element: overlay.querySelector('div') });
         await nextUpdate();
 
         // Tab to focus input inside the popover