test: add sendMouseToElement test runner command (#8566)

packages/button/test/button.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
-import { fire, fixtureSync, middleOfNode, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
+import { fire, fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-button.js';
 import type { Button } from '../vaadin-button.js';
@@ -143,8 +143,7 @@ describe('vaadin-button', () => {
     });
 
     it('should prevent pointer focus when disabled', async () => {
-      const { x, y } = middleOfNode(button);
-      await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+      await sendMouseToElement({ type: 'click', element: button });
       expect(document.activeElement).to.equal(document.body);
     });
 
@@ -195,8 +194,7 @@ describe('vaadin-button', () => {
     });
 
     it('should allow pointer focus when disabled', async () => {
-      const { x, y } = middleOfNode(button);
-      await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+      await sendMouseToElement({ type: 'click', element: button });
       expect(document.activeElement).to.equal(button);
     });
 

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/combo-box/test/visual/lumo/combo-box.test.js

@@ -1,4 +1,4 @@
-import { sendKeys, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown, nextFrame } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../common.js';
@@ -126,21 +126,23 @@ describe('combo-box', () => {
       element.autoOpenDisabled = true;
     });
 
+    afterEach(async () => {
+      await resetMouse();
+    });
+
     it('keyboard focus-ring', async () => {
       await sendKeys({ press: 'Tab' });
       await visualDiff(div, 'keyboard-focus-ring');
     });
 
     it('pointer focus-ring disabled', async () => {
-      const bounds = element.getBoundingClientRect();
-      await sendMouse({ type: 'click', position: [bounds.left + 5, bounds.top + 5] });
+      await sendMouseToElement({ type: 'click', element });
       await visualDiff(div, 'pointer-focus-ring-disabled');
     });
 
     it('pointer focus-ring enabled', async () => {
       element.style.setProperty('--lumo-input-field-pointer-focus-visible', '1');
-      const bounds = element.getBoundingClientRect();
-      await sendMouse({ type: 'click', position: [bounds.left + 5, bounds.top + 5] });
+      await sendMouseToElement({ type: 'click', element });
       await visualDiff(div, 'pointer-focus-ring-enabled');
     });
   });

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-picker/test/visual/lumo/date-picker.test.js

@@ -1,4 +1,4 @@
-import { sendKeys, sendMouse } 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 '../../not-animated-styles.js';
@@ -129,21 +129,23 @@ describe('date-picker', () => {
       element.autoOpenDisabled = true;
     });
 
+    afterEach(async () => {
+      await resetMouse();
+    });
+
     it('keyboard focus-ring', async () => {
       await sendKeys({ press: 'Tab' });
       await visualDiff(div, 'keyboard-focus-ring');
     });
 
     it('pointer focus-ring disabled', async () => {
-      const bounds = element.getBoundingClientRect();
-      await sendMouse({ type: 'click', position: [bounds.left + 5, bounds.top + 5] });
+      await sendMouseToElement({ type: 'click', element });
       await visualDiff(div, 'pointer-focus-ring-disabled');
     });
 
     it('pointer focus-ring enabled', async () => {
       element.style.setProperty('--lumo-input-field-pointer-focus-visible', '1');
-      const bounds = element.getBoundingClientRect();
-      await sendMouse({ type: 'click', position: [bounds.left + 5, bounds.top + 5] });
+      await sendMouseToElement({ type: 'click', element });
       await visualDiff(div, 'pointer-focus-ring-enabled');
     });
   });

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/menu-bar/test/accessible-disabled-buttons.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
-import { fixtureSync, middleOfNode, nextRender } from '@vaadin/testing-helpers';
+import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-menu-bar.js';
 
@@ -32,15 +32,13 @@ describe('accessible disabled buttons', () => {
   });
 
   it('should not open sub-menu on disabled button click', async () => {
-    const { x, y } = middleOfNode(buttons[1]);
-    await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+    await sendMouseToElement({ type: 'click', element: buttons[1] });
     expect(buttons[1].hasAttribute('expanded')).to.be.false;
   });
 
   it('should not open sub-menu on disabled button hover', async () => {
     menuBar.openOnHover = true;
-    const { x, y } = middleOfNode(buttons[1]);
-    await sendMouse({ type: 'move', position: [Math.floor(x), Math.floor(y)] });
+    await sendMouseToElement({ type: 'move', element: buttons[1] });
     expect(buttons[1].hasAttribute('expanded')).to.be.false;
   });