@brightspace-ui/testing 1.21.0 → 1.22.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.21.0",
+  "version": "1.22.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",

package/src/server/report/app.js

@@ -11,6 +11,7 @@ import page from 'page';
 class App extends LitElement {
 	static properties = {
 		_files: { state: true },
+		_filterHideByteDiff: { state: true },
 		_filterFile: { state: true },
 		_filterTest: { state: true },
 		_fullMode: { state: true },
@@ -60,6 +61,9 @@ class App extends LitElement {
 			white-space: normal;
 			width: 100%;
 		}
+		td.byte-diff {
+			background-color: #fbf9c6;
+		}
 		td.passed {
 			background-color: #efffd9;
 		}
@@ -121,7 +125,8 @@ class App extends LitElement {
 	constructor() {
 		super();
 		this._filterBrowsers = data.browsers.map(b => b.name);
-		this._filterStatus = data.numFailed > 0 ? FILTER_STATUS.FAILED : (data.numByteDiff > 0 ? FILTER_STATUS.BYTEDIFF : FILTER_STATUS.ALL);
+		this._filterHideByteDiff = false;
+		this._filterStatus = data.numFailed > 0 ? FILTER_STATUS.FAILED : FILTER_STATUS.ALL;
 		this._fullMode = FULL_MODE.GOLDEN.value;
 		this._layout = LAYOUTS.SPLIT.value;
 		this._overlay = true;
@@ -146,8 +151,7 @@ class App extends LitElement {
 			}
 			if (searchParams.has('status')) {
 				let filterStatus = searchParams.get('status');
-				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0 ||
-					filterStatus === FILTER_STATUS.BYTEDIFF && data.numByteDiff === 0) {
+				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0) {
 					filterStatus = FILTER_STATUS.ALL;
 				}
 				this._filterStatus = filterStatus;
@@ -155,6 +159,7 @@ class App extends LitElement {
 			if (searchParams.has('browsers')) {
 				this._filterBrowsers = searchParams.get('browsers').split(',');
 			}
+			this._filterHideByteDiff = searchParams.has('bytediff');
 			this._updateFiles();
 		});
 		page();
@@ -180,6 +185,9 @@ class App extends LitElement {
 		});
 		this._updateSearchParams({ browsers: browsers.join(',') });
 	}
+	_handleFilterByteDiffChange(e) {
+		this._updateSearchParams({ bytediff: !e.target.checked ? undefined : '1' });
+	}
 	_handleFilterStatusChange(e) {
 		this._updateSearchParams({ status: e.target.value });
 	}
@@ -201,8 +209,7 @@ class App extends LitElement {
 
 		const statusFilters = [
 			{ name: FILTER_STATUS.FAILED, count: data.numFailed },
-			{ name: FILTER_STATUS.BYTEDIFF, count: data.numByteDiff },
-			{ name: FILTER_STATUS.PASSED, count: data.numTests - data.numFailed - data.numByteDiff },
+			{ name: FILTER_STATUS.PASSED, count: data.numTests - data.numFailed },
 			{ name: FILTER_STATUS.ALL, count: data.numTests }
 		];
 
@@ -246,12 +253,22 @@ class App extends LitElement {
 				<ul>${browserDiffs}</ul>
 			</div>
 		` : nothing;
+		const byteDiffFilter = (data.numByteDiff > 0) ? html`
+			<fieldset>
+				<legend>Byte Diffs</legend>
+				<label>
+					<input type="checkbox" ?checked="${this._filterHideByteDiff}" @change="${this._handleFilterByteDiffChange}">
+					Hide tests with only file size differences (${data.numByteDiff})
+				</label>
+			</fieldset>
+		` : nothing;
 
 		return html`
 			<fieldset>
 				<legend>Test Status</legend>
 				${statusFilters.map(f => renderStatusFilter(f))}
 			</fieldset>
+			${byteDiffFilter}
 			${browserFilter}
 			${browserDiffInfo}
 		`;
@@ -289,7 +306,7 @@ class App extends LitElement {
 			if (!this._filterBrowsers.includes(b.name)) return nothing;
 			const result = test.results.find(r => r.name === b.name);
 			const passed = (result !== undefined) ? result.passed : true;
-			const text = passed ? 'passed' : 'failed';
+			const text = passed ? 'passed' : (result.bytediff ? 'byte-diff' : 'failed');
 			return html`<td class="${text}">${text}</td>`;
 		});
 		const searchParams = new URLSearchParams(window.location.search);
@@ -381,7 +398,7 @@ class App extends LitElement {
 		const tabs = browsers.map((b) => {
 			const numPassed = browserResults.get(b.name);
 			return {
-				content: renderBrowserResults(b, tests, { filterStatus: this._filterStatus, fullMode: this._fullMode, layout: this._layout, showOverlay: this._overlay }),
+				content: renderBrowserResults(b, tests, { filterHideByteDiff: this._filterHideByteDiff, filterStatus: this._filterStatus, fullMode: this._fullMode, layout: this._layout, showOverlay: this._overlay }),
 				label: b.name,
 				id: b.name.toLowerCase(),
 				selected: b.name === selectedBrowser.name,
@@ -436,10 +453,10 @@ class App extends LitElement {
 				let numStatusMatch = 0;
 				t.results.forEach(r => {
 					if (this._filterBrowsers.includes(r.name) &&
+						((!r.bytediff || !this._filterHideByteDiff) &&
 						(this._filterStatus === FILTER_STATUS.ALL ||
 						r.passed && this._filterStatus === FILTER_STATUS.PASSED ||
-						r.bytediff && this._filterStatus === FILTER_STATUS.BYTEDIFF ||
-						!r.bytediff && !r.passed && this._filterStatus === FILTER_STATUS.FAILED)) numStatusMatch++;
+						!r.passed && this._filterStatus === FILTER_STATUS.FAILED))) numStatusMatch++;
 				});
 				if (numStatusMatch > 0) {
 					if (lookingForNextTest) {

package/src/server/report/common.js

@@ -77,8 +77,7 @@ export const COMMON_STYLE = css`
 export const FILTER_STATUS = {
 	ALL: 'All',
 	PASSED: 'Passed',
-	FAILED: 'Failed',
-	BYTEDIFF: 'Byte Diff'
+	FAILED: 'Failed'
 };
 
 export const FULL_MODE = {

package/src/server/report/result.js

@@ -207,7 +207,8 @@ export function renderBrowserResults(browser, tests, options) {
 
 		const resultData = t.results.find(r => r.name === browser.name);
 		if (resultData.passed && options.filterStatus === FILTER_STATUS.FAILED ||
-			!resultData.passed && options.filterStatus === FILTER_STATUS.PASSED) {
+			!resultData.passed && options.filterStatus === FILTER_STATUS.PASSED ||
+			resultData.bytediff && options.filterHideByteDiff) {
 			return acc;
 		}
 

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

@@ -95,10 +95,9 @@ function flattenResults(session, browserData, fileData) {
 				if (bytediff) {
 					browserData.numByteDiff++;
 					testData.numByteDiff++;
-				} else {
-					browserData.numFailed++;
-					testData.numFailed++;
 				}
+				browserData.numFailed++;
+				testData.numFailed++;
 			}
 			testData.results.push({
 				name: browserData.name,

package/src/server/wtr-config.js

@@ -19,6 +19,7 @@ const ALLOWED_BROWSERS = Object.keys(BROWSER_MAP);
 const DEFAULT_BROWSERS = [...new Set(Object.values(BROWSER_MAP))];
 const TIMEZONE = '{"name":"Canada - Toronto","identifier":"America/Toronto"}';
 const FONT_ASSETS = 'https://s.brightspace.com/lib/fonts/0.6.1/assets/';
+const TEST_PAGE = '<script>window.isD2LTestPage = true;</script>';
 const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
 	<script>
 	window.addEventListener('error', (err) => {
@@ -53,6 +54,7 @@ export class WTRConfig {
 				`<!DOCTYPE html>
 				<html lang="en" data-timezone='${TIMEZONE}'>
 					<body>
+						${TEST_PAGE}
 						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>
@@ -124,6 +126,7 @@ export class WTRConfig {
 						</style>
 					</head>
 					<body>
+						${TEST_PAGE}
 						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>