@brightspace-ui/testing 1.37.3 → 1.38.1

package/README.md

@@ -343,6 +343,8 @@ class SlowElem extends LitElement {
 }
 ```
 
+The [`LoadingCompleteMixin` in `@brightspace-ui/core`](https://github.com/BrightspaceUI/core/tree/main/mixins/loading-complete) has been added to make implementing this even simpler.
+
 To bypass waiting for `getLoadingComplete()`, set the `awaitLoadingComplete` configuration option to `false`:
 
 ```javascript

package/package.json

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

package/src/browser/fixture.js

@@ -82,13 +82,14 @@ async function waitForElem(elem, awaitLoadingComplete = true) {
  *
  * @param {*} element
  * @param {{
- *      awaitLoadingComplete: boolean,
- * 		lang: string,
+ *		awaitLoadingComplete: boolean,
+ *		colorMode: string,
+ *		lang: string,
  *		mathjax: {renderLatex: boolean},
  *		rtl: boolean,
  *		pagePadding: boolean,
  *		media: string,
- *      viewport: { height: number, width: number }
+ *		viewport: { height: number, width: number }
  *	}} opts
  */
 export async function fixture(element, opts = {}) {

package/src/browser/reset.js

@@ -4,6 +4,7 @@ import { nextFrame } from '@open-wc/testing';
 
 const DEFAULT_PAGE_PADDING = true,
 	DEFAULT_LANG = 'en',
+	DEFAULT_COLOR_MODE = undefined,
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_MEDIA = 'screen',
 	DEFAULT_VIEWPORT = {
@@ -18,6 +19,7 @@ let
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentMedia = DEFAULT_MEDIA,
 	currentRtl = false,
+	currentColorMode = DEFAULT_COLOR_MODE,
 	currentViewportHeight = 0,
 	currentViewportWidth = 0,
 	shouldResetMouse = false;
@@ -47,6 +49,7 @@ export async function reset(opts = {}) {
 		lang: DEFAULT_LANG,
 		mathjax: {},
 		rtl: !!opts.lang?.startsWith('ar'),
+		colorMode: DEFAULT_COLOR_MODE,
 		pagePadding: DEFAULT_PAGE_PADDING,
 		media: DEFAULT_MEDIA
 	};
@@ -89,6 +92,17 @@ export async function reset(opts = {}) {
 		currentRtl = opts.rtl;
 	}
 
+	if (opts.colorMode !== currentColorMode) {
+		const colorMode = ['light', 'dark'].includes(opts.colorMode) ? opts.colorMode : DEFAULT_COLOR_MODE;
+		if (!colorMode) {
+			document.documentElement.removeAttribute('data-color-mode');
+		} else {
+			document.documentElement.setAttribute('data-color-mode', colorMode);
+		}
+		awaitNextFrame = true;
+		currentColorMode = colorMode;
+	}
+
 	opts.lang ??= '';
 	if (documentLocaleSettings.language !== opts.lang) {
 		document.documentElement.lang = opts.lang;

package/src/server/visual-diff-info.js

@@ -0,0 +1,30 @@
+const testInfoMap = new Map();
+
+export class TestInfoManager {
+	constructor(session, fullTitle) {
+		this.key = `${session.browser.name.toLowerCase()}|${session.testFile}|${fullTitle}`;
+	}
+	get() {
+		return testInfoMap.get(this.key);
+	}
+
+	set(testInfo) {
+		if (testInfoMap.has(this.key)) {
+			const info = this.get();
+			testInfo.slowDuration = info.slowDuration;
+
+			if (info.golden || testInfo.golden) {
+				testInfo.golden = { ...info.golden, ...testInfo.golden };
+			}
+			if (info.new || testInfo.new) {
+				testInfo.new = { ...info.new, ...testInfo.new };
+			}
+			testInfo.diff = testInfo.diff || info.diff;
+		}
+		testInfoMap.set(this.key, testInfo);
+	}
+}
+
+export function getTestInfo(session, fullTitle) {
+	return new TestInfoManager(session, fullTitle).get();
+}

package/src/server/visual-diff-plugin.js

@@ -4,6 +4,7 @@ import { env } from 'node:process';
 import { PATHS } from './paths.js';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
+import { TestInfoManager } from './visual-diff-info.js';
 
 const isCI = !!env['CI'];
 const DEFAULT_TOLERANCE = 0; // TODO: Support tolerance override?
@@ -105,29 +106,6 @@ function extractTestPartsFromName(name) {
 	};
 }
 
-const testInfoMap = new Map();
-export function getTestInfo(session, fullTitle) {
-	return testInfoMap.get(getTestInfoKey(session, fullTitle));
-}
-function getTestInfoKey(session, fullTitle) {
-	return `${session.browser.name.toLowerCase()}|${session.testFile}|${fullTitle}`;
-}
-function setTestInfo(session, fullTitle, testInfo) {
-	const key = getTestInfoKey(session, fullTitle);
-	if (testInfoMap.has(key)) {
-		const info = testInfoMap.get(key);
-		testInfo.slowDuration = info.slowDuration;
-		if (info.golden || testInfo.golden) {
-			testInfo.golden = { ...info.golden, ...testInfo.golden };
-		}
-		if (info.new || testInfo.new) {
-			testInfo.new = { ...info.new, ...testInfo.new };
-		}
-		testInfo.diff = testInfo.diff || info.diff;
-	}
-	testInfoMap.set(key, testInfo);
-}
-
 export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 	let currentRun = 0,
 		rootDir;
@@ -142,6 +120,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 			await clearAllDirs(updateGoldens, join(rootDir, PATHS.VDIFF_ROOT));
 		},
 		async executeCommand({ command, payload, session }) {
+			const infoManager = new TestInfoManager(session, payload.name);
 
 			if (session.browser.type !== 'playwright') {
 				throw new Error('Visual-diff is only supported for browser type Playwright.');
@@ -190,28 +169,23 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 
 				const screenshotFileBuffer = await readFile(screenshotFileName);
 				const screenshotImage = PNG.sync.read(screenshotFileBuffer);
-				setTestInfo(session, payload.name, {
+				infoManager.set({
 					slowDuration: payload.slowDuration,
 					new: {
 						height: screenshotImage.height,
-						path: passFileName.substring(rootLength),
+						path: screenshotFileName.substring(rootLength),
 						width: screenshotImage.width
 					}
 				});
 
 				const goldenExists = await checkFileExists(goldenFileName);
 				if (!goldenExists) {
-					setTestInfo(session, payload.name, {
-						new: {
-							path: `${screenshotFile.substring(rootLength)}.png`
-						}
-					});
 					return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
 				}
 
 				const goldenFileBuffer = await readFile(goldenFileName);
 				const goldenImage = PNG.sync.read(goldenFileBuffer);
-				setTestInfo(session, payload.name, {
+				infoManager.set({
 					golden: {
 						height: goldenImage.height,
 						path: goldenFileName.substring(rootLength),
@@ -225,6 +199,11 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					if (goldenSize === screenshotSize && screenshotFileBuffer.equals(goldenFileBuffer)) {
 						const success = await tryMoveFile(screenshotFileName, passFileName);
 						if (!success) return { pass: false, message: 'Problem moving file to "pass" directory.' };
+						infoManager.set({
+							new: {
+								path: passFileName.substring(rootLength)
+							}
+						});
 						return { pass: true };
 					}
 
@@ -234,22 +213,18 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					);
 
 					if (pixelsDiff !== 0) {
-						setTestInfo(session, payload.name, {
+						infoManager.set({
 							diff: `${screenshotFile.substring(rootLength)}-diff.png`,
-							new: {
-								path: `${screenshotFile.substring(rootLength)}.png`
-							},
 							pixelsDiff
 						});
 						await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
 						return { pass: false, message: `Image does not match golden. ${pixelsDiff} pixels are different.` };
 					} else {
-						setTestInfo(session, payload.name, {
+						infoManager.set({
 							golden: {
 								byteSize: goldenSize
 							},
 							new: {
-								path: `${screenshotFile.substring(rootLength)}.png`,
 								byteSize: screenshotSize
 							},
 							pixelsDiff
@@ -291,7 +266,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(bestDiffImage));
 
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
-				setTestInfo(session, payload.name, {
+				infoManager.set({
 					diff: `${screenshotFile.substring(rootLength)}-diff.png`,
 					golden: {
 						path: `${screenshotFile.substring(rootLength)}-resized-golden.png`

package/src/server/visual-diff-reporter.js

@@ -4,7 +4,7 @@ import { dirname, join } from 'node:path';
 import { env } from 'node:process';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
-import { getTestInfo } from './visual-diff-plugin.js';
+import { getTestInfo } from './visual-diff-info.js';
 import { PATHS } from './paths.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));

package/src/server/wtr-config.js

@@ -89,6 +89,9 @@ export class WTRConfig {
 								--d2l-inline-start: left;
 								--d2l-length-factor: 1;
 								--d2l-mirror-transform: none;
+								--d2l-theme-background-color-base: #ffffff;
+								--d2l-theme-text-color-static-standard: #202122;
+								font-size: 20px;
 							}
 
 							html[dir="rtl"] * {
@@ -101,6 +104,11 @@ export class WTRConfig {
 								--d2l-mirror-transform: scale(-1, 1);
 							}
 
+							html[data-color-mode="dark"] {
+								--d2l-theme-background-color-base: #161718;
+								--d2l-theme-text-color-static-standard: #cdd5dc;
+							}
+
 							@font-face {
 								font-family: 'Lato';
 								font-style: normal;
@@ -114,12 +122,9 @@ export class WTRConfig {
 								src: url(${FONT_ASSETS}Lato-700.woff2) format('woff2');
 							}
 
-							html {
-								font-size: 20px;
-							}
 							body {
-								background-color: #ffffff;
-								color: var(--d2l-color-ferrite, #202122);
+								background-color: var(--d2l-theme-background-color-base);
+								color: var(--d2l-theme-text-color-static-standard);
 								font-family: 'Lato', sans-serif;
 								letter-spacing: 0.01rem;
 								font-size: 0.95rem;