@brightspace-ui/testing 1.24.3 → 1.25.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.24.3",
+  "version": "1.25.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",
@@ -14,7 +14,7 @@
     "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"
+    "test:vdiff": "npx d2l-test-runner vdiff $npm_config_sub --config ./test/browser/vdiff.config.js"
   },
   "bin": {
     "d2l-test-runner": "./bin/d2l-test-runner.js",

package/src/server/report/app.js

@@ -253,6 +253,23 @@ class App extends LitElement {
 				<ul>${browserDiffs}</ul>
 			</div>
 		` : nothing;
+
+		const systemDiffs = Object.entries(data.system).reduce((acc, [k, v]) => {
+			const previous = data.system.previous[k] || 'unknown';
+			if (k === 'previous' || previous === v) {
+				return acc;
+			}
+			return acc.push(html`
+				<li>${k}: <strong>${data.system.previous[k]}</strong> to <strong>${v}</strong></li>
+			`) && acc;
+		}, []);
+		const systemDiffInfo = systemDiffs.length ? html`
+			<div class="browser-diff">
+				<div class="browser-diff-title">System Changes</div>
+				<ul>${systemDiffs}</ul>
+			</div>
+		` : nothing;
+
 		const byteDiffFilter = (data.numByteDiff > 0) ? html`
 			<fieldset>
 				<legend>Byte Diffs</legend>
@@ -271,6 +288,7 @@ class App extends LitElement {
 			${byteDiffFilter}
 			${browserFilter}
 			${browserDiffInfo}
+			${systemDiffInfo}
 		`;
 
 	}

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

@@ -1,3 +1,4 @@
+import * as os from 'node:os';
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { env } from 'node:process';
@@ -59,14 +60,24 @@ function createData(rootDir, updateGoldens, sessions) {
 		});
 	});
 
+	const system = {
+		platform: os.platform(),
+		release: os.release(),
+		arch: os.arch()
+	};
+
 	if (isCI || updateGoldens) {
 		metadata.browsers = Array.from(browsers.values()).map(b => {
 			return { name: b.name, version: b.version };
 		});
+		metadata.system = system;
 		writeFileSync(metadataPath, `${JSON.stringify(metadata, undefined, '\t')}\n`);
 	}
 
-	return { browsers, files, numByteDiff, numFailed, numTests };
+	const { previous: gc, ...previous } = metadata.system;
+	system.previous = previous;
+
+	return { browsers, files, numByteDiff, numFailed, numTests, system };
 
 }
 

package/src/server/wtr-config.js

@@ -62,45 +62,12 @@ export const DEFAULT_VDIFF_SLOW = 500;
 
 export class WTRConfig {
 
-	#cliArgs;
-	#requestedBrowsers;
-
 	constructor(cliArgs) {
 		this.#cliArgs = cliArgs || {};
 		this.#cliArgs.group ??= 'test';
 		const requestedBrowsers = ALLOWED_BROWSERS.filter(b => cliArgs?.[b]);
 		this.#requestedBrowsers = requestedBrowsers.length && requestedBrowsers;
 	}
-
-	get #defaultConfig() {
-		return {
-			browserStartTimeout: 60 * 1000,
-			groups: [],
-			nodeResolve: {
-				exportConditions: ['default']
-			},
-			testRunnerHtml: testFramework =>
-				`<!DOCTYPE html>
-				<html lang="en" data-timezone='${TIMEZONE}'>
-					<body>
-						${TEST_PAGE}
-						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
-						<script type="module" src="${testFramework}"></script>
-					</body>
-				</html>`,
-		};
-	}
-
-	get #pattern() {
-		const files = [ this.#cliArgs.files || this.pattern(this.#cliArgs.group), '!**/node_modules/**/*' ].flat();
-
-		if (this.#cliArgs.filter) {
-			return this.#filterFiles(files);
-		}
-
-		return files;
-	}
-
 	get visualDiffGroup() {
 		return {
 			name: 'vdiff',
@@ -162,56 +129,6 @@ export class WTRConfig {
 				</html>`
 		};
 	}
-
-	#filterFiles(files) {
-		return this.#cliArgs.filter.map(filterStr => {
-			// replace everything after the last forward slash
-			return files
-				.filter(f => !f.startsWith('!')) // don't filter exclusions
-				.map(f => f.replace(/[^/]*$/, fileGlob => {
-					// create a new glob for each wildcard
-					const fileGlobs = Array.from(fileGlob.matchAll(/(?<!\*)\*(?!\*)/g)).map(({ index }) => {
-						const arr = fileGlob.split('');
-						arr.splice(index, 1, filterStr);
-						return arr.join('');
-					});
-					return `+(${fileGlobs.join('|') || fileGlob})`;
-				}));
-		})
-			.flat()
-			.concat(files.filter(f => f.startsWith('!')));
-	}
-
-	#getMochaConfig(group, slowConfig, timeoutConfig) {
-		const {
-			timeout = timeoutConfig,
-			grep,
-			open,
-			slow = slowConfig,
-			watch
-		} = this.#cliArgs;
-
-		if (typeof timeout !== 'undefined' && typeof timeout !== 'number') throw new TypeError('timeout must be a number');
-		if (typeof slow !== 'undefined' && typeof slow !== 'number') throw new TypeError('slow must be a number');
-
-		const config = {};
-
-		if (timeout) {
-			config.timeout = String(timeout);
-		} else if (group === 'vdiff') {
-			config.timeout = '5000';
-		}
-		if (open || watch) config.timeout = '0';
-		if (grep) config.grep = grep;
-		if (slow) {
-			config.slow = String(slow);
-		} else if (group === 'vdiff') {
-			config.slow = String(DEFAULT_VDIFF_SLOW);
-		}
-
-		return Object.keys(config).length && { testFramework: { config } };
-	}
-
 	create({
 		pattern = DEFAULT_PATTERN,
 		slow,
@@ -288,7 +205,6 @@ export class WTRConfig {
 
 		return config;
 	}
-
 	getBrowsers(browsers, deviceScaleFactor) {
 		browsers = (this.#requestedBrowsers || browsers || DEFAULT_BROWSERS).map(b => BROWSER_MAP[b] || BROWSER_MAP.chrome);
 
@@ -306,5 +222,86 @@ export class WTRConfig {
 			}
 		}));
 	}
+	#cliArgs;
+
+	#requestedBrowsers;
+
+	get #defaultConfig() {
+		return {
+			browserStartTimeout: 60 * 1000,
+			groups: [],
+			nodeResolve: {
+				exportConditions: ['default']
+			},
+			testRunnerHtml: testFramework =>
+				`<!DOCTYPE html>
+				<html lang="en" data-timezone='${TIMEZONE}'>
+					<body>
+						${TEST_PAGE}
+						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
+						<script type="module" src="${testFramework}"></script>
+					</body>
+				</html>`,
+		};
+	}
+
+	get #pattern() {
+		const files = [ this.#cliArgs.files || this.pattern(this.#cliArgs.group), '!**/node_modules/**/*' ].flat();
+
+		if (this.#cliArgs.filter) {
+			return this.#filterFiles(files);
+		}
+
+		return files;
+	}
+
+	#filterFiles(files) {
+		return this.#cliArgs.filter.map(filterStr => {
+			// replace everything after the last forward slash
+			return files
+				.filter(f => !f.startsWith('!')) // don't filter exclusions
+				.map(f => f.replace(/[^/]*$/, fileGlob => {
+					// create a new glob for each wildcard
+					const fileGlobs = Array.from(fileGlob.matchAll(/(?<!\*)\*(?!\*)/g)).map(({ index }) => {
+						const arr = fileGlob.split('');
+						arr.splice(index, 1, filterStr);
+						return arr.join('');
+					});
+					return `+(${fileGlobs.join('|') || fileGlob})`;
+				}));
+		})
+			.flat()
+			.concat(files.filter(f => f.startsWith('!')));
+	}
+
+	#getMochaConfig(group, slowConfig, timeoutConfig) {
+		const {
+			timeout = timeoutConfig,
+			grep,
+			open,
+			slow = slowConfig,
+			watch
+		} = this.#cliArgs;
+
+		if (typeof timeout !== 'undefined' && typeof timeout !== 'number') throw new TypeError('timeout must be a number');
+		if (typeof slow !== 'undefined' && typeof slow !== 'number') throw new TypeError('slow must be a number');
+
+		const config = {};
+
+		if (timeout) {
+			config.timeout = String(timeout);
+		} else if (group === 'vdiff') {
+			config.timeout = '5000';
+		}
+		if (open || watch) config.timeout = '0';
+		if (grep) config.grep = grep;
+		if (slow) {
+			config.slow = String(slow);
+		} else if (group === 'vdiff') {
+			config.slow = String(DEFAULT_VDIFF_SLOW);
+		}
+
+		return Object.keys(config).length && { testFramework: { config } };
+	}
 
 }