@brightspace-ui/testing 0.33.0 → 0.34.1

package/README.md

@@ -4,6 +4,9 @@
 
 Testing utilities which are specifically designed and configured for Brightspace UI components and applications.
 
+> **Migrating from `@open-wc/testing` and/or `@brightspace-ui/visual-diff`?**
+> Refer to the [Migration Guide](./docs/migration-guide.md) for help migrating a repo to `@brightspace-ui/testing`.
+
 Install from NPM:
 
 ```shell
@@ -458,6 +461,16 @@ To capture the entire viewport, pass `document` as the target element to the ass
 await expect(document).to.be.golden();
 ```
 
+#### Rendering Fullscreen Fixtures
+
+To render a fullscreen fixture that fills the viewport, pass a `fullscreen` option to `fixture()`:
+
+```javascript
+  const elem = await fixture(html`<fullscreen-elem></fullscreen-elem>`, {
+    fullscreen: true
+  });
+```
+
 #### Including Other Elements
 
 Elements using `absolute` or `fixed` positioning (like dropdowns or tooltips) may overflow the target element's capture area. To include them, apply the `vdiff-include` CSS class.
@@ -543,12 +556,6 @@ The report supports filtering by status and browser, and allows for iteration th
 
 To help surface instances where a browser version change may be responsible for vdiff failures in the report, a `.vdiff.json` tracking file will be committed to the root of the repository.
 
-### Migrating
-
-TODO:
-- Migration commands
-- Migration Guide
-
 ## Developing and Contributing
 
 After cloning the repo, run `npm install` to install its dependencies.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",

package/src/browser/fixture.js

@@ -49,7 +49,11 @@ async function waitForElem(elem, awaitLoadingComplete = true) {
 
 export async function fixture(element, opts = {}) {
 	await Promise.all([reset(opts), document.fonts.ready]);
-	const elem = await wcFixture(element);
+
+	const parentNode = document.createElement('div');
+	parentNode.setAttribute('id', 'd2l-test-fixture-container');
+
+	const elem = await wcFixture(element, { parentNode });
 	await waitForElem(elem, opts.awaitLoadingComplete);
 
 	await pause();

package/src/browser/reset.js

@@ -2,7 +2,8 @@ import { sendMouse, setViewport } from '@web/test-runner-commands';
 import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { nextFrame } from '@open-wc/testing';
 
-const DEFAULT_LANG = 'en',
+const DEFAULT_FULLSCREEN = false,
+	DEFAULT_LANG = 'en',
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_VIEWPORT_HEIGHT = 800,
 	DEFAULT_VIEWPORT_WIDTH = 800;
@@ -10,6 +11,7 @@ const DEFAULT_LANG = 'en',
 const documentLocaleSettings = getDocumentLocaleSettings();
 
 let
+	currentFullscreen = false,
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentRtl = false,
 	currentViewportHeight = 0,
@@ -29,7 +31,8 @@ export async function reset(opts = {}) {
 		viewport: {
 			height: DEFAULT_VIEWPORT_HEIGHT,
 			width: DEFAULT_VIEWPORT_WIDTH
-		}
+		},
+		fullscreen: DEFAULT_FULLSCREEN
 	};
 
 	opts = { ...defaultOpts, ...opts };
@@ -40,6 +43,17 @@ export async function reset(opts = {}) {
 
 	window.scroll(0, 0);
 
+	if (opts.fullscreen !== currentFullscreen) {
+		if (opts.fullscreen) {
+			document.body.classList.add('fullscreen');
+		}
+		else {
+			document.body.classList.remove('fullscreen');
+		}
+		awaitNextFrame = true;
+		currentFullscreen = opts.fullscreen;
+	}
+
 	if (shouldResetMouse) {
 		shouldResetMouse = false;
 		await sendMouse({ type: 'move', position: [0, 0] }).catch(() => {});

package/src/server/pause.js

@@ -15,7 +15,11 @@ const controls = `
 			display: none !important;
 		}
 		body {
-			margin-top: 70px;
+			margin-top: 76px;
+		}
+
+		:not(.screenshot) body.fullscreen > #d2l-test-fixture-container {
+			top: 76px;
 		}
 
 		.screenshot body {

package/src/server/wtr-config.js

@@ -96,6 +96,10 @@ export class WTRConfig {
 								line-height: 1.4rem;
 								padding: 30px;
 							}
+							body.fullscreen > #d2l-test-fixture-container {
+								position: absolute;
+								inset: 0;
+							}
 						</style>
 					</head>
 					<body>
@@ -183,6 +187,8 @@ export class WTRConfig {
 				files: this.#pattern
 			});
 		} else if (group === 'vdiff') {
+			config.testsFinishTimeout = 5 * 60 * 1000;
+
 			config.reporters ??= [ defaultReporter() ];
 			config.reporters.push(visualDiffReporter({ updateGoldens: golden }));