@brightspace-ui/testing 1.12.2 → 1.13.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.12.2",
+  "version": "1.13.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",
@@ -21,9 +21,9 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "chai": "^4",
+    "chai": "^5",
     "eslint": "^8",
-    "eslint-config-brightspace": "^0.23",
+    "eslint-config-brightspace": "^1",
     "mocha": "^10",
     "sinon": "^17"
   },

package/src/server/report/result.js

@@ -177,7 +177,7 @@ function renderResult(resultData, options) {
 			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) {
 			newPart = html`<div class="result-graphic padding">${ICON_BYTES}
-				<p>No pixels have changed, but the byte size is different.</p>
+				<p>No pixels have changed, but the bytes are different.</p>
 				<p class="details">
 					Golden size: ${resultData.info.golden.byteSize} bytes<br />
 					New size: ${resultData.info.new.byteSize} bytes

package/src/server/rollup.config.js

@@ -1,10 +1,11 @@
+import { cwd } from 'node:process';
 import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { join } from 'path';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { PATHS } from './visual-diff-plugin.js';
 
 export default {
-	input: join(PATHS.VDIFF_ROOT, PATHS.REPORT_ROOT, './temp/index.html'),
+	input: join(cwd(), PATHS.VDIFF_ROOT, PATHS.REPORT_ROOT, './temp/index.html'),
 	output: {
 		dir: join(PATHS.VDIFF_ROOT, PATHS.REPORT_ROOT)
 	},

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

@@ -197,7 +197,8 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
 
-				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
+				const screenshotFileBuffer = await readFile(screenshotFileName);
+				const screenshotImage = PNG.sync.read(screenshotFileBuffer);
 				setTestInfo(session, payload.name, {
 					slowDuration: payload.slowDuration,
 					new: {
@@ -217,7 +218,8 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
 				}
 
-				const goldenImage = PNG.sync.read(await readFile(goldenFileName));
+				const goldenFileBuffer = await readFile(goldenFileName);
+				const goldenImage = PNG.sync.read(goldenFileBuffer);
 				setTestInfo(session, payload.name, {
 					golden: {
 						height: goldenImage.height,
@@ -227,6 +229,14 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				});
 
 				if (screenshotImage.width === goldenImage.width && screenshotImage.height === goldenImage.height) {
+					const goldenSize = (await stat(goldenFileName)).size;
+					const screenshotSize = (await stat(screenshotFileName)).size;
+					if (goldenSize === screenshotSize && screenshotFileBuffer.equals(goldenFileBuffer)) {
+						const success = await tryMoveFile(screenshotFileName, passFileName);
+						if (!success) return { pass: false, message: 'Problem moving file to "pass" directory.' };
+						return { pass: true };
+					}
+
 					const diff = new PNG({ width: screenshotImage.width, height: screenshotImage.height });
 					const pixelsDiff = pixelmatch(
 						screenshotImage.data, goldenImage.data, diff.data, screenshotImage.width, screenshotImage.height, { diffMask: true, threshold: DEFAULT_TOLERANCE }
@@ -243,25 +253,17 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 						await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
 						return { pass: false, message: `Image does not match golden. ${pixelsDiff} pixels are different.` };
 					} else {
-						const goldenSize = (await stat(goldenFileName)).size;
-						const screenshotSize = (await stat(screenshotFileName)).size;
-						if (goldenSize !== screenshotSize) {
-							setTestInfo(session, payload.name, {
-								golden: {
-									byteSize: goldenSize
-								},
-								new: {
-									path: `${screenshotFile.substring(rootLength)}.png`,
-									byteSize: screenshotSize
-								},
-								pixelsDiff
-							});
-							return { pass: false, message: 'Image diff is clean but the images do not have the same byte size.' };
-						} else {
-							const success = await tryMoveFile(screenshotFileName, passFileName);
-							if (!success) return { pass: false, message: 'Problem moving file to "pass" directory.' };
-							return { pass: true };
-						}
+						setTestInfo(session, payload.name, {
+							golden: {
+								byteSize: goldenSize
+							},
+							new: {
+								path: `${screenshotFile.substring(rootLength)}.png`,
+								byteSize: screenshotSize
+							},
+							pixelsDiff
+						});
+						return { pass: false, message: 'Image diff is clean but the images do not have the same bytes.' };
 					}
 				} else {
 					return { resizeRequired: true };