@brightspace-ui/testing 1.42.0 → 1.44.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.42.0",
+  "version": "1.44.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",
@@ -29,7 +29,7 @@
     "eslint-config-brightspace": "^3",
     "globals": "^17",
     "mocha": "^11",
-    "sinon": "^21",
+    "sinon": "^22",
     "stylelint": "^17"
   },
   "exports": {

package/src/alt-tests.js

@@ -0,0 +1,12 @@
+export const ALT_TESTS = {
+	dark: {
+		set() {
+			document.documentElement.setAttribute('data-color-mode', 'dark');
+		},
+		reset() {
+			document.documentElement.removeAttribute('data-color-mode');
+		}
+	}
+};
+
+export const allColorModes = ['dark'];

package/src/browser/axe.js

@@ -0,0 +1,35 @@
+import { allColorModes, ALT_TESTS } from '../alt-tests.js';
+import { chai } from '@open-wc/testing';
+
+/* eslint-disable no-invalid-this, prefer-arrow-callback */
+chai.Assertion.overwriteMethod('accessible', function(_super) {
+	return async function(opts = {}) {
+		let violationsHeader = '';
+		const violationsMessages = [];
+		const run = async(prefix = '') => {
+			try {
+				await _super.apply(this, arguments);
+			} catch (e) {
+				const violations = e.message.split('---');
+				violationsHeader = violations.shift();
+				violations.pop();
+				violationsMessages.push(...violations.map(v => `${prefix}${v}`));
+			}
+		};
+		await run();
+		if (opts.allColorModes) {
+			for (const mode of allColorModes) {
+				ALT_TESTS[mode].set();
+				await run(`\nColor mode: ${mode.charAt(0).toUpperCase() + mode.slice(1)}`);
+				ALT_TESTS[mode].reset();
+			}
+		}
+		if (violationsMessages.length > 0) {
+			violationsMessages.unshift(violationsHeader);
+			violationsMessages.push('---');
+			throw new Error(violationsMessages.join('---'));
+		}
+
+	};
+});
+/* eslint-enable */

package/src/browser/index.js

@@ -1,4 +1,5 @@
 import './vdiff.js';
+import './axe.js';
 
 export { assert, aTimeout, defineCE, expect, html, nextFrame, oneDefaultPreventedEvent, oneEvent, waitUntil } from '@open-wc/testing';
 export { clickAt, clickElem, clickElemAt, dragDropElems, focusElem, hoverAt, hoverElem, hoverElemAt, sendKeys, sendKeysElem, setViewport } from './commands.js';

package/src/browser/vdiff.js

@@ -1,4 +1,5 @@
 import { chai, expect } from '@open-wc/testing';
+import { allColorModes } from '../alt-tests.js';
 import { executeServerCommand } from '@web/test-runner-commands';
 
 // start loading fonts early
@@ -90,7 +91,7 @@ async function ScreenshotAndCompare(opts = {}) {
 	}
 	const slowDuration = this.test.slow();
 	const altTests = [];
-	if (opts.allColorModes) altTests.push('dark');
+	if (opts.allColorModes) altTests.push(...allColorModes);
 
 	this.test.timeout(0);
 	const result = await executeServerCommand('brightspace-visual-diff-compare', { altTests, name, fullPage, rect, slowDuration });

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

@@ -1,5 +1,6 @@
 import { access, constants, mkdir, readdir, readFile, rename, rm, stat, writeFile } from 'node:fs/promises';
 import { basename, dirname, join } from 'node:path';
+import { ALT_TESTS } from '../alt-tests.js';
 import { env } from 'node:process';
 import { PATHS } from './paths.js';
 import pixelmatch from 'pixelmatch';
@@ -9,17 +10,6 @@ import { TestInfoManager } from './visual-diff-info.js';
 const isCI = !!env['CI'];
 const DEFAULT_TOLERANCE = 0; // TODO: Support tolerance override?
 
-const ALT_TESTS = {
-	dark: {
-		set() {
-			document.documentElement.setAttribute('data-color-mode', 'dark');
-		},
-		reset() {
-			document.documentElement.removeAttribute('data-color-mode');
-		}
-	}
-};
-
 async function checkFileExists(fileName) {
 	try {
 		await access(fileName, constants.F_OK);

package/src/server/wtr-config.js

@@ -59,6 +59,86 @@ const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
 	</script>
 `;
 export const DEFAULT_VDIFF_SLOW = 500;
+const HTML_BODY = testFramework => `
+	<body>
+		${TEST_PAGE}
+		${SUPPRESS_RESIZE_OBSERVER_ERRORS}
+		<script type="module" src="${testFramework}"></script>
+	</body>
+`;
+const HTML_HEAD = `
+	<head>
+		<link rel="preload" href="${FONT_ASSETS}Lato-400.woff2" as="font" type="font/woff2" crossorigin>
+		<link rel="preload" href="${FONT_ASSETS}Lato-700.woff2" as="font" type="font/woff2" crossorigin>
+		<style>
+
+			html {
+				--d2l-cursor-resize-inline-end: e-resize;
+				--d2l-cursor-resize-inline-start: w-resize;
+				--d2l-document-direction: ltr;
+				--d2l-inline-end: right;
+				--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"] * {
+				--d2l-cursor-resize-inline-end: w-resize;
+				--d2l-cursor-resize-inline-start: e-resize;
+				--d2l-document-direction: rtl;
+				--d2l-inline-end: left;
+				--d2l-inline-start: right;
+				--d2l-length-factor: -1;
+				--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;
+				font-weight: 400;
+				src: url(${FONT_ASSETS}Lato-400.woff2) format('woff2');
+			}
+			@font-face {
+				font-family: 'Lato';
+				font-style: normal;
+				font-weight: 700;
+				src: url(${FONT_ASSETS}Lato-700.woff2) format('woff2');
+			}
+
+			body {
+				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;
+				font-weight: 400;
+				line-height: 1.4rem;
+				margin: 0;
+				padding: 38px;
+			}
+			body.no-padding {
+				padding: 0;
+			}
+		</style>
+	</head>
+`;
+const DEFAULT_TEST_RUNNER_HTML = testFramework => `<!DOCTYPE html>
+<html lang="en" data-timezone='${TIMEZONE}'>
+	${HTML_BODY(testFramework)}
+</html>`;
+const FULL_TEST_RUNNER_HTML = testFramework => `<!DOCTYPE html>
+<html lang="en" data-timezone='${TIMEZONE}'>
+	${HTML_HEAD}
+	${HTML_BODY(testFramework)}
+</html>`;
 
 export class WTRConfig {
 
@@ -73,77 +153,7 @@ export class WTRConfig {
 			name: 'vdiff',
 			files: this.#pattern,
 			browsers: [BROWSER_MAP.chrome],
-			testRunnerHtml: testFramework =>
-				`<!DOCTYPE html>
-				<html lang="en" data-timezone='${TIMEZONE}'>
-					<head>
-						<link rel="preload" href="${FONT_ASSETS}Lato-400.woff2" as="font" type="font/woff2" crossorigin>
-						<link rel="preload" href="${FONT_ASSETS}Lato-700.woff2" as="font" type="font/woff2" crossorigin>
-						<style>
-
-							html {
-								--d2l-cursor-resize-inline-end: e-resize;
-								--d2l-cursor-resize-inline-start: w-resize;
-								--d2l-document-direction: ltr;
-								--d2l-inline-end: right;
-								--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"] * {
-								--d2l-cursor-resize-inline-end: w-resize;
-								--d2l-cursor-resize-inline-start: e-resize;
-								--d2l-document-direction: rtl;
-								--d2l-inline-end: left;
-								--d2l-inline-start: right;
-								--d2l-length-factor: -1;
-								--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;
-								font-weight: 400;
-								src: url(${FONT_ASSETS}Lato-400.woff2) format('woff2');
-							}
-							@font-face {
-								font-family: 'Lato';
-								font-style: normal;
-								font-weight: 700;
-								src: url(${FONT_ASSETS}Lato-700.woff2) format('woff2');
-							}
-
-							body {
-								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;
-								font-weight: 400;
-								line-height: 1.4rem;
-								margin: 0;
-								padding: 38px;
-							}
-							body.no-padding {
-								padding: 0;
-							}
-						</style>
-					</head>
-					<body>
-						${TEST_PAGE}
-						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
-						<script type="module" src="${testFramework}"></script>
-					</body>
-				</html>`
+			testRunnerHtml: FULL_TEST_RUNNER_HTML
 		};
 	}
 	create({
@@ -169,7 +179,9 @@ export class WTRConfig {
 		};
 
 		if (!['test', 'vdiff', ...passthroughGroupNames].includes(group)) {
-			config.groups.push({ name: group, files: this.#pattern });
+			const groupConfig = { name: group, files: this.#pattern };
+			if (group === 'axe') groupConfig.testRunnerHtml = FULL_TEST_RUNNER_HTML;
+			config.groups.push(groupConfig);
 		} else {
 			const groupConfig = config.groups.find(g => g.name === group);
 			if (groupConfig) {
@@ -177,12 +189,6 @@ export class WTRConfig {
 			}
 		}
 
-		if (filter) {
-			config.groups.forEach(group => {
-				group.files = this.#filterFiles([ group.files ].flat());
-			});
-		}
-
 		config.reporters ??= [ defaultReporterGrep() ];
 
 		if (group === 'test') {
@@ -250,15 +256,7 @@ export class WTRConfig {
 			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>`,
+			testRunnerHtml: DEFAULT_TEST_RUNNER_HTML,
 		};
 	}