From 41f3acddbe49ffa1251e87b318be42ef3d553618 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Mon, 24 Jul 2023 14:41:41 -0400 Subject: [PATCH 1/2] surface browser version change information --- .vdiff.json | 16 ++++++++++++++ src/server/report/app.js | 19 +++++++++++++++- src/server/report/common.js | 18 +++++++++++++++ src/server/report/index.html | 2 +- src/server/report/result.js | 35 ++++++++++++++++++++++++------ src/server/visual-diff-plugin.js | 1 + src/server/visual-diff-reporter.js | 17 +++++++++++++-- 7 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 .vdiff.json diff --git a/.vdiff.json b/.vdiff.json new file mode 100644 index 00000000..adbe97c5 --- /dev/null +++ b/.vdiff.json @@ -0,0 +1,16 @@ +{ + "browsers": [ + { + "name": "Chromium", + "version": 115 + }, + { + "name": "Firefox", + "version": 115 + }, + { + "name": "Webkit", + "version": 17 + } + ] +} \ No newline at end of file diff --git a/src/server/report/app.js b/src/server/report/app.js index cc43e9d7..8abb6896 100644 --- a/src/server/report/app.js +++ b/src/server/report/app.js @@ -157,7 +157,7 @@ class App extends LitElement { return html` @@ -222,12 +222,29 @@ class App extends LitElement { ${ data.browsers.map(b => renderBrowser(b))} ` : nothing; + const browserDiffs = data.browsers.reduce((acc, b) => { + const previousVersion = b.previousVersion || 'unknown'; + if (previousVersion === b.version) { + return acc; + } + return acc.push(html` +
  • ${b.name}: ${previousVersion} to ${b.version}
    • + `) && acc; + }, []); + const browserDiffInfo = browserDiffs.length > 0 ? html` +
    +
    Browser Version Changes
    + +
    + ` : nothing; + return html`
    Test Status ${statusFilters.map(f => renderStatusFilter(f))}
    ${browserFilter} + ${browserDiffInfo} `; } diff --git a/src/server/report/common.js b/src/server/report/common.js index abf12ec9..23aeca93 100644 --- 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 index 2389b10f..2c1c6361 100644 --- a/src/server/report/index.html +++ b/src/server/report/index.html @@ -3,7 +3,7 @@ - Visual Diff Report + Visual-Diff Report