@brightspace-ui/testing 1.20.0 → 1.21.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.20.0",
+  "version": "1.21.1",
   "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,6 +125,7 @@ class App extends LitElement {
 	constructor() {
 		super();
 		this._filterBrowsers = data.browsers.map(b => b.name);
+		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;
@@ -146,12 +151,15 @@ class App extends LitElement {
 			}
 			if (searchParams.has('status')) {
 				let filterStatus = searchParams.get('status');
-				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0) filterStatus = FILTER_STATUS.ALL;
+				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0) {
+					filterStatus = FILTER_STATUS.ALL;
+				}
 				this._filterStatus = filterStatus;
 			}
 			if (searchParams.has('browsers')) {
 				this._filterBrowsers = searchParams.get('browsers').split(',');
 			}
+			this._filterHideByteDiff = searchParams.has('bytediff');
 			this._updateFiles();
 		});
 		page();
@@ -177,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 });
 	}
@@ -242,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}
 		`;
@@ -285,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);
@@ -377,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,
@@ -432,9 +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.passed && this._filterStatus === FILTER_STATUS.FAILED)) numStatusMatch++;
+						!r.passed && this._filterStatus === FILTER_STATUS.FAILED))) numStatusMatch++;
 				});
 				if (numStatusMatch > 0) {
 					if (lookingForNextTest) {

package/src/server/report/result.js

@@ -175,7 +175,7 @@ function renderResult(resultData, options) {
 		let newPart;
 		if (resultData.passed) {
 			newPart = html`<div class="result-graphic padding">${ICON_TADA}<p>Hooray! No changes here.</p></div>`;
-		} else if (!resultData.info.diff && resultData.info.pixelsDiff === 0) {
+		} else if (resultData.bytediff) {
 			newPart = html`<div class="result-graphic padding">${ICON_BYTES}
 				<p>No pixels have changed, but the bytes are different.</p>
 				<p class="details">
@@ -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

@@ -27,6 +27,7 @@ function createData(rootDir, updateGoldens, sessions) {
 			const prevBrowser = metadata.browsers?.find(b => b.name === browserName);
 			browsers.set(browserName, {
 				name: browserName,
+				numByteDiff: 0,
 				numFailed: 0,
 				version: parseInt(s.browser.browser.version()),
 				previousVersion: prevBrowser?.version
@@ -36,14 +37,14 @@ function createData(rootDir, updateGoldens, sessions) {
 
 		const fileName = s.testFile.substring(rootDir.length + 1);
 		if (!files.has(fileName)) {
-			files.set(fileName, { name: fileName, numFailed: 0, tests: new Map() });
+			files.set(fileName, { name: fileName, numByteDiff: 0, numFailed: 0, tests: new Map() });
 		}
 		const fileData = files.get(fileName);
 		flattenResults(s, browserData, fileData);
 
 	});
 
-	let numTests = 0, numFailed = 0;
+	let numTests = 0, numFailed = 0, numByteDiff = 0;
 	files.forEach(f => {
 		numTests += f.tests.size;
 		f.tests.forEach(t => {
@@ -51,6 +52,10 @@ function createData(rootDir, updateGoldens, sessions) {
 				f.numFailed++;
 				numFailed++;
 			}
+			if (t.numByteDiff > 0) {
+				f.numByteDiff++;
+				numByteDiff++;
+			}
 		});
 	});
 
@@ -61,7 +66,7 @@ function createData(rootDir, updateGoldens, sessions) {
 		writeFileSync(metadataPath, `${JSON.stringify(metadata, undefined, '\t')}\n`);
 	}
 
-	return { browsers, files, numFailed, numTests };
+	return { browsers, files, numByteDiff, numFailed, numTests };
 
 }
 
@@ -79,12 +84,18 @@ function flattenResults(session, browserData, fileData) {
 			if (!fileData.tests.has(testName)) {
 				fileData.tests.set(testName, {
 					name: testName,
+					numByteDiff: 0,
 					numFailed: 0,
 					results: []
 				});
 			}
 			const testData = fileData.tests.get(testName);
+			const bytediff = !t.passed && !info.diff && info.pixelsDiff === 0;
 			if (!t.passed) {
+				if (bytediff) {
+					browserData.numByteDiff++;
+					testData.numByteDiff++;
+				}
 				browserData.numFailed++;
 				testData.numFailed++;
 			}
@@ -93,6 +104,7 @@ function flattenResults(session, browserData, fileData) {
 				duration: t.duration,
 				error: t.error?.message,
 				passed: t.passed,
+				bytediff,
 				info: info
 			});
 		});