@brightspace-ui/testing 1.25.1 → 1.26.0

package/README.md

@@ -173,6 +173,24 @@ it('should click on element', async() => {
 });
 ```
 
+To hover or click on a specific element with offset relative its origin (top-left corner), use `hoverElemAt(elem, x, y)` and `clickElemAt(elem, x, y)`. Useful for reducing shadowRoot snooping and element offset calculations.
+
+```javascript
+import { clickElemAt, hoverElemAt } from '@brightspace-ui/testing';
+
+it('should click element with offset from element origin', async() => {
+  const elem = await fixture(...);
+  await clickElemAt(elem, 25, 50);
+  // do assertions
+});
+
+it('should hover element with offset from element origin', async() => {
+  const elem = await fixture(...);
+  await hoverElemAt(elem, 25, 50);
+  // do assertions
+});
+```
+
 Alternatively, to hover over or click at viewport coordinates with the mouse, use `hoverAt(x, y)` or `clickAt(x, y)`:
 
 ```javascript
@@ -593,7 +611,7 @@ my-elem {
 my-elem.faded-out {
   opacity: 0;
 }
-@media (prefers-reduced-motion: no-preference) { 
+@media (prefers-reduced-motion: no-preference) {
   my-elem {
     transition: opacity 0.2s ease-in-out;
   }
@@ -628,7 +646,7 @@ Refer to the [vdiff GitHub Action](https://github.com/BrightspaceUI/actions/tree
 
 ### Generating the Goldens
 
-To ensure a consistent environment, goldens checked into source control should be generated by [continuous integration](#continuous-integration). 
+To ensure a consistent environment, goldens checked into source control should be generated by [continuous integration](#continuous-integration).
 
 However, it can be helpful during development to generate a local version of the goldens to test and preview changes. This can be done by passing the `golden` sub-command:
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",
@@ -33,7 +33,7 @@
     "@eslint/compat": "^1",
     "@eslint/eslintrc": "^3",
     "@eslint/js": "^9",
-    "globals": "^1"
+    "globals": "^15"
   },
   "exports": {
     ".": "./src/browser/index.js"

package/src/browser/commands.js

@@ -5,6 +5,8 @@ export { setViewport } from './reset.js';
 function getElementPosition(elem) {
 	const { x, y, width, height } = elem.getBoundingClientRect();
 	return {
+		left: Math.floor(x + window.scrollX),
+		top: Math.floor(y + window.scrollY),
 		x: Math.floor(x + window.scrollX + width / 2),
 		y: Math.floor(y + window.scrollY + height / 2),
 	};
@@ -24,6 +26,11 @@ export async function clickElem(elem) {
 	return clickAt(position.x, position.y);
 }
 
+export async function clickElemAt(elem, offsetX = 0, offsetY = 0) {
+	const position = getElementPosition(elem);
+	return clickAt(Math.floor(position.left + offsetX), Math.floor(position.top + offsetY));
+}
+
 export async function dragDropElems(elem, toElem) {
 	const fromPosition = getElementPosition(elem);
 	const toPosition = getElementPosition(toElem);
@@ -48,6 +55,11 @@ export async function hoverElem(elem) {
 	return hoverAt(position.x, position.y);
 }
 
+export async function hoverElemAt(elem, offsetX = 0, offsetY = 0) {
+	const position = getElementPosition(elem);
+	return hoverAt(Math.floor(position.left + offsetX), Math.floor(position.top + offsetY));
+}
+
 export async function sendKeys(action, keys) {
 	const val = {};
 	val[action] = keys;

package/src/browser/index.js

@@ -1,6 +1,6 @@
 import './vdiff.js';
 
 export { assert, aTimeout, defineCE, expect, html, nextFrame, oneDefaultPreventedEvent, oneEvent, waitUntil } from '@open-wc/testing';
-export { clickAt, clickElem, dragDropElems, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem, setViewport } from './commands.js';
+export { clickAt, clickElem, clickElemAt, dragDropElems, focusElem, hoverAt, hoverElem, hoverElemAt, sendKeys, sendKeysElem, setViewport } from './commands.js';
 export { fixture } from './fixture.js';
 export { runConstructor } from './constructor.js';