@brightspace-ui/testing 1.3.0 → 1.5.0

package/README.md

@@ -65,6 +65,18 @@ it('should have the correct class', async() => {
 
 Each call to `fixture()` will restore the browser to its default state, making subsequent calls isolated from each other. There's therefore no need to manually restore the viewport, language, mouse, or keyboard in between tests.
 
+#### Ensuring Custom Elements Construct
+
+The `runConstructor` helper acts as a bare minimum test for a custom element, making sure that it properly registered with `window.customElements` and that its constructor does not fail.
+
+```javascript
+import { runConstructor } from '@brightspace-ui/testing';
+
+it('should construct', () => {
+  runConstructor('my-elem');
+});
+```
+
 #### Configuring the Viewport Size
 
 The viewport defaults to `800px` wide by `800px` tall. To use different viewport sizes, pass a `viewport` option to `fixture()`.
@@ -259,14 +271,23 @@ In other scenarios, a component may have an initial loading state (e.g. loading
 
 ```javascript
 class SlowElem extends LitElement {
-  render() {
-    return html`<p>I take my time</p>`;
+  constructor() {
+    super();
+    this._loadingCompletePromise = new Promise(
+      resolve => this._loadingCompleteResolve = resolve
+    );
   }
-  async getLoadingComplete() {
-    return new Promise(resolve => {
-      setTimeout(() => resolve(), 2000);
+  connectedCallback() {
+    this._fetchMyData().then(() => {
+      if (this._loadingCompleteResolve) {
+        this._loadingCompleteResolve();
+        this._loadingCompleteResolve = undefined;
+      }
     });
   }
+  async getLoadingComplete() {
+    return this._loadingCompletePromise;
+  }
 }
 ```
 
@@ -522,6 +543,30 @@ const tag = defineCE(
 );
 ```
 
+### Components with Motion
+
+Components with animations or transitions can cause inconsistent vdiff snapshots, since small timing variations to the snapshot can catch the motion at slightly different points along its path. To help address this, `d2l-test-runner` configures the browser with the `prefers-reduced-motion` setting enabled.
+
+To opt-in to this setting, adjust the component's animation/transition CSS such that it only applies the motion when `prefers-reduced-motion` is set to `no-preference`.
+
+For example:
+
+```css
+my-elem {
+  opacity: 1;
+}
+my-elem.faded-out {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: no-preference) { 
+  my-elem {
+    transition: opacity 0.2s ease-in-out;
+  }
+}
+```
+
+In addition to making vdiff testing more reliable, disabling or reducing motion based on the `prefers-reduced-motion` setting is recommended to help avoid discomfort for those with [vestibular motion disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/).
+
 ### Running Vdiff Tests
 
 Vdiff tests must be in files with the `*.vdiff.js` extension. They are run with the special `vdiff` command:

package/package.json

@@ -2,14 +2,16 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",
     "start": "npx d2l-test-vdiff-report",
     "test": "npm run lint && npm run test:bin && npm run test:server && npm run test:browser",
     "test:bin": "mocha './test/bin/**/*.test.js'",
-    "test:browser": "npx d2l-test-runner --files './test/browser/**/*.test.js'",
+    "test:browser": "npm run test:browser:other && npm run test:browser:ctor",
+    "test:browser:other": "npx d2l-test-runner --files './test/browser/**/*.test.js'",
+    "test:browser:ctor": "npx d2l-test-runner --config ./test/browser/ctor.config.js",
     "test:server": "mocha './test/server/**/*.test.js'",
     "test:vdiff": "npx d2l-test-runner vdiff --config ./test/browser/vdiff.config.js"
   },
@@ -52,6 +54,6 @@
     "page": "^1",
     "pixelmatch": "^5",
     "pngjs": "^7",
-    "rollup": "^3"
+    "rollup": "^4"
   }
 }

package/src/browser/constructor.js

@@ -0,0 +1,7 @@
+import { expect } from '@open-wc/testing';
+
+export function runConstructor(nodeName) {
+	const ctor = customElements.get(nodeName);
+	expect(ctor).to.not.be.undefined;
+	document.createElement(nodeName);
+}

package/src/browser/index.js

@@ -3,3 +3,4 @@ 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 } from './commands.js';
 export { fixture } from './fixture.js';
+export { runConstructor } from './constructor.js';

package/src/server/wtr-config.js

@@ -14,6 +14,7 @@ const BROWSER_MAP = {
 	safari: 'webkit',
 	webkit: 'webkit'
 };
+const TIMEZONE = '{"name":"Canada - Toronto","identifier":"America/Toronto"}';
 const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
 	<script>
 	window.addEventListener('error', (err) => {
@@ -43,7 +44,7 @@ export class WTRConfig {
 			nodeResolve: true,
 			testRunnerHtml: testFramework =>
 				`<!DOCTYPE html>
-				<html lang="en">
+				<html lang="en" data-timezone='${TIMEZONE}'>
 					<body>
 						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
@@ -69,7 +70,7 @@ export class WTRConfig {
 			browsers: ['chrome'],
 			testRunnerHtml: testFramework =>
 				`<!DOCTYPE html>
-				<html lang="en">
+				<html lang="en" data-timezone='${TIMEZONE}'>
 					<head>
 						<link rel="preload" href="https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-400.woff2" as="font" type="font/woff2" crossorigin>
 						<link rel="preload" href="https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-700.woff2" as="font" type="font/woff2" crossorigin>