@brightspace-ui/testing 1.22.0 → 1.24.0

package/README.md

@@ -189,6 +189,28 @@ 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
+});
+```
+
 ### 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.22.0",
+  "version": "1.24.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/report/result.js

@@ -63,6 +63,18 @@ export const RESULT_STYLE = css`
 		position: absolute;
 		top: 0;
 	}
+	.result-overlay img:active {
+		filter:
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red)
+			drop-shadow(0 0 0.5px red);
+	}
 	.result-part-info {
 		align-items: center;
 		display: flex;