feat: Merge pull request #94 from BrightspaceUI/dlockhart/browser-info

Surface browser version change information
BrightspaceUI · Jul 26, 2023 · 3e79e64 · 3e79e64
2 parents 442ec63 + de3e180
commit 3e79e64
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 11 deletions.
diff --git a/.vdiff.json b/.vdiff.json
@@ -0,0 +1,16 @@
+{
+	"browsers": [
+		{
+			"name": "Chromium",
+			"version": 115
+		},
+		{
+			"name": "Firefox",
+			"version": 115
+		},
+		{
+			"name": "Webkit",
+			"version": 17
+		}
+	]
+}
diff --git a/src/server/report/app.js b/src/server/report/app.js
@@ -157,7 +157,7 @@ class App extends LitElement {
 		return html`
 			<aside>
 				<div>
-					<h1>Visual-diff Results</h1>
+					<h1>Visual-Diff Report</h1>
 					${this._renderFilters()}
 				</div>
 			</aside>
@@ -222,12 +222,29 @@ class App extends LitElement {
 				${ data.browsers.map(b => renderBrowser(b))}
 			</fieldset>` : nothing;
 
+		const browserDiffs = data.browsers.reduce((acc, b) => {
+			const previousVersion = b.previousVersion || 'unknown';
+			if (previousVersion === b.version) {
+				return acc;
+			}
+			return acc.push(html`
+				<li>${b.name}: <strong>${previousVersion}</strong> to <strong>${b.version}</strong></li>
+			`) && acc;
+		}, []);
+		const browserDiffInfo = browserDiffs.length > 0 ? html`
+			<div class="browser-diff">
+				<div class="browser-diff-title">Browser Version Changes</div>
+				<ul>${browserDiffs}</ul>
+			</div>
+		` : nothing;
+
 		return html`
 			<fieldset>
 				<legend>Test Status</legend>
 				${statusFilters.map(f => renderStatusFilter(f))}
 			</fieldset>
 			${browserFilter}
+			${browserDiffInfo}
 		`;
 
 	}

diff --git a/src/server/report/common.js b/src/server/report/common.js
@@ -15,6 +15,24 @@ export const COMMON_STYLE = css`
 		outline: 2px solid #007bff;
 		outline-offset: 1px;
 	}
+	.browser-diff {
+		background-color: #fff9d6;
+		border: 1px solid #ffba59;
+		border-radius: 4px;
+		color: #6e7477;
+		padding: 5px;
+	}
+	.result-browser > .browser-diff {
+		text-align: end;
+	}
+	.browser-diff-title {
+		color: #c47400;
+		font-weight: bold;
+	}
+	.browser-diff ul {
+		margin: 5px 0 0 0;
+		padding-inline-start: 15px;
+	}
 	.empty {
 		align-items: center;
 		display: flex;

diff --git a/src/server/report/index.html b/src/server/report/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>Visual Diff Report</title>
+		<title>Visual-Diff Report</title>
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<style>

diff --git a/src/server/report/result.js b/src/server/report/result.js
@@ -1,6 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { FILTER_STATUS, FULL_MODE, LAYOUTS, renderEmpty, renderStatusText, STATUS_TYPE } from './common.js';
 import { ICON_BROWSERS, ICON_NO_GOLDEN, ICON_TADA } from './icons.js';
+import data from './data.js';
 
 export const RESULT_STYLE = css`
 	.result-browser {
@@ -14,6 +15,9 @@ export const RESULT_STYLE = css`
 		height: 50px;
 		width: 50px;
 	}
+	.result-browser-info {
+		flex: 1 1 auto;
+	}
 	.result-browser-name {
 		font-size: 1.2rem;
 		font-weight: bold;
@@ -101,6 +105,29 @@ export const RESULT_STYLE = css`
 	}
 `;
 
+function renderBrowserInfo(browser) {
+
+	const previousVersion = data.browsers.find(b => b.name === browser.name).previousVersion || 'unknown';
+
+	let browserDiffInfo = nothing;
+	if (previousVersion !== browser.version) {
+		browserDiffInfo = html`
+			<div class="browser-diff">
+				<div class="browser-diff-title">Browser Version Change</div>
+				<div><strong>${previousVersion}</strong> (golden) to <strong>${browser.version}</strong> (new)</div>
+			</div>`;
+	}
+
+	return html`<div class="result-browser padding">
+		${ICON_BROWSERS[browser.name]}
+		<div class="result-browser-info">
+			<div class="result-browser-name">${browser.name}</div>
+			<div>version ${browser.version}</div>
+		</div>
+		${browserDiffInfo}
+	</div>`;
+}
+
 function renderResult(resultData, options) {
 
 	if (!resultData.passed && resultData.info === undefined) {
@@ -180,13 +207,7 @@ export function renderBrowserResults(browser, tests, options) {
 
 	}, []);
 	return html`
-		<div class="result-browser padding">
-			${ICON_BROWSERS[browser.name]}
-			<div>
-				<div class="result-browser-name">${browser.name}</div>
-				<div>version ${browser.version}</div>
-			</div>
-		</div>
+		${renderBrowserInfo(browser)}
 		${results.length === 0 ? renderEmpty() : results}
 	`;
 }
diff --git a/src/server/visual-diff-plugin.js b/src/server/visual-diff-plugin.js
@@ -11,6 +11,7 @@ export const PATHS = {
 	FAIL: 'fail',
 	GOLDEN: 'golden',
 	PASS: 'pass',
+	METADATA: '.vdiff.json',
 	REPORT_ROOT: '.report',
 	VDIFF_ROOT: '.vdiff'
 };

diff --git a/src/server/visual-diff-reporter.js b/src/server/visual-diff-reporter.js
@@ -1,4 +1,4 @@
-import { cpSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { getTestInfo, PATHS } from './visual-diff-plugin.js';
 import { execSync } from 'node:child_process';
@@ -8,17 +8,25 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 function createData(rootDir, sessions) {
 
+	let metadata = {};
+	const metadataPath = join(rootDir, PATHS.METADATA);
+	if (existsSync(metadataPath)) {
+		metadata = JSON.parse(readFileSync(metadataPath));
+	}
+
 	const files = new Map();
 	const browsers = new Map();
 
 	sessions.forEach(s => {
 
 		const browserName = s.browser.name;
 		if (!browsers.has(browserName)) {
+			const prevBrowser = metadata.browsers?.find(b => b.name === browserName);
 			browsers.set(browserName, {
 				name: browserName,
 				numFailed: 0,
-				version: s.browser.browser.version().substring(0, s.browser.browser.version().indexOf('.'))
+				version: parseInt(s.browser.browser.version()),
+				previousVersion: prevBrowser?.version
 			});
 		}
 		const browserData = browsers.get(browserName);
@@ -43,6 +51,11 @@ function createData(rootDir, sessions) {
 		});
 	});
 
+	metadata.browsers = Array.from(browsers.values()).map(b => {
+		return { name: b.name, version: b.version };
+	});
+	writeFileSync(metadataPath, JSON.stringify(metadata, undefined, '\t'));
+
 	return { browsers, files, numFailed, numTests };
 
 }