test: add sendMouseToElement test runner command

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.common.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';
 
@@ -156,28 +156,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,7 @@ 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(getDraggable(getElementFromCell(dashboard, 0, 0)!));
       // Press down the left mouse button
       await sendMouse({
         type: 'down',

packages/date-time-picker/test/basic.common.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 { changeInputValue } from './helpers.js';
@@ -40,13 +40,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();
@@ -200,11 +193,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;
     });
 
@@ -216,7 +209,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;
     });
   });
@@ -229,13 +222,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;
     });
 
@@ -248,7 +241,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/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.common.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';
 
 describe('accessible disabled buttons', () => {
   let menuBar, buttons;
@@ -30,15 +30,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;
   });
 

packages/overlay/test/interactions.common.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,
@@ -303,10 +302,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);
@@ -315,10 +311,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