@brightspace-ui/testing 1.21.1 → 1.23.0

package/README.md

@@ -189,6 +189,33 @@ it('should click at coordinate', async() => {
 });
 ```
 
+Elements configured using the [Drag & Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) can be interacted with using `dragDropElems(sourceElem, destElem)`:
+
+```javascript
+import { dragDropElems } from '@brightspace-ui/testing';
+
+it('should drag & drop', async() => {
+  const rootElem = await fixture(html`
+    <div>
+      <div id="source" draggable="true"></div>
+      <div id="dest"></div>
+    </div>
+  `);
+  // NOTE: destination must have "dragover" and "drop"
+  // event listeners added for the drag & drop API to function
+  await dragDropElems(
+    rootElem.querySelector('#source'),
+    rootElem.querySelector('#target')
+  );
+  // do assertions
+});
+
+it('should click at coordinate', async() => {
+  await clickAt(100, 200);
+  // do assertions
+});
+```
+
 ### Using the Keyboard
 
 To place focus on an element using the keyboard, use `focusElem(elem)`. Doing so will trigger its `:focus-visible` CSS pseudo-class.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",

package/src/browser/commands.js

@@ -24,6 +24,15 @@ export async function clickElem(elem) {
 	return clickAt(position.x, position.y);
 }
 
+export async function dragDropElems(elem, toElem) {
+	const fromPosition = getElementPosition(elem);
+	const toPosition = getElementPosition(toElem);
+	await sendMouse({ type: 'move', position: [fromPosition.x, fromPosition.y] });
+	await sendMouse({ type: 'down' });
+	await sendMouse({ type: 'move', position: [toPosition.x, toPosition.y] });
+	await sendMouse({ type: 'up' });
+}
+
 export async function focusElem(elem) {
 	await cmdSendKeys({ press: 'Shift' }); // Tab moves focus, Escape causes dismissible things to close
 	elem.focus({ focusVisible: true });

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, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem, setViewport } from './commands.js';
+export { clickAt, clickElem, dragDropElems, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem, setViewport } from './commands.js';
 export { fixture } from './fixture.js';
 export { runConstructor } from './constructor.js';

package/src/server/wtr-config.js

@@ -19,6 +19,7 @@ const ALLOWED_BROWSERS = Object.keys(BROWSER_MAP);
 const DEFAULT_BROWSERS = [...new Set(Object.values(BROWSER_MAP))];
 const TIMEZONE = '{"name":"Canada - Toronto","identifier":"America/Toronto"}';
 const FONT_ASSETS = 'https://s.brightspace.com/lib/fonts/0.6.1/assets/';
+const TEST_PAGE = '<script>window.isD2LTestPage = true;</script>';
 const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
 	<script>
 	window.addEventListener('error', (err) => {
@@ -53,6 +54,7 @@ export class WTRConfig {
 				`<!DOCTYPE html>
 				<html lang="en" data-timezone='${TIMEZONE}'>
 					<body>
+						${TEST_PAGE}
 						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>
@@ -124,6 +126,7 @@ export class WTRConfig {
 						</style>
 					</head>
 					<body>
+						${TEST_PAGE}
 						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>