From 31e2be0bd4bca17a66c6dbbf1b304eefcaca02b0 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 12 Jul 2023 09:32:16 -0400 Subject: [PATCH] improvements to the diff panel --- src/server/report/test-result.js | 115 --------------------------- src/server/report/test.js | 132 ++++++++++++++++++++++++++++--- 2 files changed, 122 insertions(+), 125 deletions(-) delete mode 100644 src/server/report/test-result.js diff --git a/src/server/report/test-result.js b/src/server/report/test-result.js deleted file mode 100644 index 8f085d0c..00000000 --- a/src/server/report/test-result.js +++ /dev/null @@ -1,115 +0,0 @@ -import { css, html, LitElement, nothing } from 'lit'; -import { FULL_MODE, LAYOUTS } from './common.js'; -import data from './data.js'; - -class TestResult extends LitElement { - static properties = { - browser: { type: String }, - fullMode: { attribute: 'full-mode', type: String }, - layout: { type: String }, - file: { type: String }, - showOverlay: { attribute: 'show-overlay', type: Boolean }, - test: { type: String }, - }; - static styles = [css` - :host { - display: block; - padding: 20px; - } - .split { - flex-direction: row; - flex-wrap: nowrap; - display: flex; - gap: 10px; - } - .split > div { - flex: 0 1 auto; - } - img { - max-width: 100%; - } - .diff-container { - background: repeating-conic-gradient(#cdd5dc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; - background-position: 0 0; - border: 1px solid #cdd5dc; - display: inline-block; - line-height: 0; - } - .overlay-container { - position: relative; - } - .overlay { - background: hsla(0,0%,100%,.8); - position: absolute; - top: 0; - left: 0; - } - .no-changes { - border: 1px solid #cdd5dc; - padding: 20px; - } - `]; - render() { - - const resultData = this._fetchData(); - if (!resultData) return nothing; - - return html` - ${this._renderBody(resultData)} - `; - - } - _fetchData() { - - const fileData = data.files.find(f => f.name === this.file); - if (!fileData) return {}; - - const testData = fileData.tests.find(t => t.name === this.test); - if (!testData) return {}; - - const resultData = testData.results.find(r => r.name === this.browser); - if (!resultData) return {}; - - const browserData = data.browsers.find(b => b.name === this.browser); - if (!browserData) return {}; - - return resultData; - - } - _renderBody(resultData) { - - if (!resultData.passed && resultData.info === undefined) { - return html` -

An error occurred that prevented a visual-diff snapshot from being taken:

- 
${resultData.error}
- `; - } - - const noChanges = html`
No changes
`; - const goldenImage = html``; - const newImage = html``; - - const overlay = (this.showOverlay && !resultData.passed) ? - html`
` : nothing; - - if (this.layout === LAYOUTS.SPLIT.value) { - const g = html`
${goldenImage}
`; - return html` -
- ${ resultData.passed ? noChanges : g } -
${newImage}${overlay}
-
`; - } else if (this.layout === LAYOUTS.FULL.value) { - return html` -
-
- ${(this.fullMode === FULL_MODE.GOLDEN.value) ? goldenImage : newImage} - ${overlay} -
-
`; - } - - } -} - -customElements.define('d2l-vdiff-report-test-result', TestResult); diff --git a/src/server/report/test.js b/src/server/report/test.js index 25cedd06..a479ef94 100644 --- a/src/server/report/test.js +++ b/src/server/report/test.js @@ -1,5 +1,4 @@ import './button.js'; -import './test-result.js'; import { css, html, LitElement, nothing } from 'lit'; import { FULL_MODE, getId, LAYOUTS } from './common.js'; import { ICON_BROWSERS, ICON_HOME } from './icons.js'; @@ -185,6 +184,71 @@ class Test extends LitElement { .warning { color: #e87511; } + .result { + padding: 20px; + } + .result-split { + flex-direction: row; + flex-wrap: nowrap; + display: flex; + } + .result-split > .result-part { + flex: 0 1 auto; + } + .result-split-divider { + border-right: 4px dashed #007bff; + flex: 0 0 auto; + } + .result-part { + display: inline-block; + } + .result-diff-container img { + max-width: 100%; + } + .result-diff-container { + background: repeating-conic-gradient(#cdd5dc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; + background-position: 0 0; + border: 2px dashed #90989d; + display: inline-block; + line-height: 0; + position: relative; + } + .result-split > .result-part:first-of-type > .result-diff-container { + border-right: none; + } + .result-split > .result-part:last-of-type > .result-diff-container { + border-left: none; + } + .result-overlay { + background: hsla(0,0%,100%,.8); + position: absolute; + top: 0; + left: 0; + } + .result-part-info { + align-items: center; + display: flex; + gap: 5px; + } + .result-part-info-spacer, + .result-part-info-size { + flex: 1 0 0%; + text-align: right; + } + .result-part-info-name { + flex: 0 0 auto; + font-weight: bold; + padding: 5px; + } + .result-part-info-size { + color: #90989d; + font-size: 0.8rem; + padding: 5px; + } + .result-no-changes { + border: 1px solid #cdd5dc; + padding: 20px; + } `]; constructor() { super(); @@ -223,7 +287,7 @@ class Test extends LitElement { ${tabButtons} - ${this._renderTabPanels(browsers, selectedBrowser, fileData, testData)} + ${this._renderTabPanels(browsers, selectedBrowser, testData)} ${this._renderFooter(selectedBrowser, selectedResult)} `; @@ -341,18 +405,12 @@ class Test extends LitElement { `; } - _renderTabPanels(browsers, selectedBrowser, fileData, testData) { + _renderTabPanels(browsers, selectedBrowser, testData) { const renderTabPanel = (browser) => { return html`
- + ${this._renderTestResults(browser, testData)}
`; }; @@ -360,6 +418,60 @@ class Test extends LitElement { return html`
${browsers.map(b => renderTabPanel(b.name))}
`; } + _renderTestResult(resultData) { + + if (!resultData.passed && resultData.info === undefined) { + return html` +

An error occurred that prevented a visual-diff snapshot from being taken:

+ 
${resultData.error}
+ `; + } + + const renderPart = (label, partInfo, noChanges, overlay) => { + const img = noChanges ? html` +
No changes
+ ` : html``; + return html` +
+
+
+
${label}
+
(${partInfo.width} x ${partInfo.height})
+
+
+ ${img}${overlay} +
+
+ `; + }; + + const overlay = (this.showOverlay && !resultData.passed) ? + html`
` : nothing; + + if (this.layout === LAYOUTS.SPLIT.value) { + return html` +
+ ${ renderPart('golden', resultData.info.golden, resultData.passed, undefined) } +
+ ${ renderPart('new', resultData.info.new, false, overlay) } +
`; + } else if (this.layout === LAYOUTS.FULL.value) { + if (this.fullMode === FULL_MODE.GOLDEN.value) { + return renderPart('golden', resultData.info.golden, false, overlay); + } else { + return renderPart('new', resultData.info.new, false, overlay); + } + } + + } + _renderTestResults(browser, testData) { + const result = testData.results.find(r => r.name === browser); + return html` +
+ ${this._renderTestResult(result)} +
+ `; + } _triggerChange(name, value) { this.dispatchEvent(new CustomEvent( 'setting-change', {