Skip to content

Commit

Permalink
merge test component into app
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlockhart
dlockhart committed Jul 17, 2023
1 parent 9ccfdc0 commit b6ad25d
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 271 deletions.
211 changes: 188 additions & 23 deletions src/server/report/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import './test.js';
import './button.js';
import { css, html, LitElement, nothing } from 'lit';
import { FILTER_STATUS, FULL_MODE, LAYOUTS } from './common.js';
import { ICON_BROWSERS, ICON_HOME } from './icons.js';
import { RADIO_STYLE, renderRadio } from './radio.js';
import { renderResult, RESULT_STYLE } from './result.js';
import { renderTabButtons, renderTabPanel, TAB_STATUS_TYPE, TAB_STYLE } from './tabs.js';
import { classMap } from 'lit/directives/class-map.js';
import data from './data.js';
import page from 'page';

Expand All @@ -11,9 +16,10 @@ class App extends LitElement {
_filterTest: { state: true },
_fullMode: { state: true },
_layout: { state: true },
_overlay: { state: true }
_overlay: { state: true },
_selectedBrowserIndex: { state: true }
};
static styles = [css`
static styles = [RADIO_STYLE, RESULT_STYLE, TAB_STYLE, css`
.container {
display: grid;
grid-auto-flow: row;
Expand Down Expand Up @@ -72,6 +78,88 @@ class App extends LitElement {
.padding {
padding: 20px;
}
.test-results {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header'
'content'
'footer';
height: 100vh;
}
.header {
border-bottom: 1px solid #cdd5dc;
grid-area: header;
}
.tab-panels {
grid-area: content;
overflow: auto;
}
.footer {
align-items: center;
border-top: 1px solid #cdd5dc;
display: flex;
gap: 10px;
grid-area: footer;
padding: 20px;
}
.footer > svg {
flex: 0 0 auto;
height: 50px;
width: 50px;
}
.footer-info {
flex: 1 0 auto;
}
.footer-browser-name {
font-size: 1.2rem;
font-weight: bold;
}
.footer-timing {
flex: 0 0 auto;
font-size: 2rem;
font-weight: bold;
}
.header, .footer {
background-color: #f0f0f0;
box-shadow: 0 0 6px rgba(0,0,0,.07);
}
.title {
display: flex;
padding: 20px 20px 0 20px;
}
.title h2 {
margin: 0;
}
.title-info {
flex: 1 0 auto;
}
.title-navigation {
flex: 0 0 auto;
}
.settings {
align-items: center;
display: flex;
padding: 20px;
gap: 20px;
}
.settings-box {
background-color: #ffffff;
border: 1px solid #cdd5dc;
border-radius: 5px;
line-height: 24px;
padding: 10px;
user-select: none;
}
.pass {
color: #46a661;
}
.error {
color: #cd2026;
}
.warning {
color: #e87511;
}
`];
constructor() {
super();
Expand All @@ -80,6 +168,7 @@ class App extends LitElement {
this._fullMode = FULL_MODE.GOLDEN.value;
this._layout = LAYOUTS.SPLIT.value;
this._overlay = true;
this._selectedBrowserIndex = -1;
}
connectedCallback() {
super.connectedCallback();
Expand Down Expand Up @@ -121,17 +210,7 @@ class App extends LitElement {
view = html`<p>Test not found: <b>${this._filterTest}</b>.</p>`;
} else {
hasPadding = false;
view = html`
<d2l-vdiff-report-test
browsers="${this._filterBrowsers.join(',')}"
file="${fileData.name}"
full-mode="${this._fullMode}"
layout="${this._layout}"
@navigation="${this._handleNavigation}"
@setting-change="${this._handleSettingChange}"
?show-overlay="${this._overlay}"
test="${testData.name}"></d2l-vdiff-report-test>
`;
view = this._renderTestResults(fileData, testData);
}
}
} else {
Expand All @@ -156,6 +235,9 @@ class App extends LitElement {
</div>
`;
}
_handleBackClick() {
this._updateSearchParams({ file: undefined, test: undefined });
}
_handleFilterBrowserChange(e) {
const browsers = data.browsers.map(b => b.name).filter(b => {
if (b === e.target.value) {
Expand All @@ -169,15 +251,8 @@ class App extends LitElement {
_handleFilterStatusChange(e) {
this._updateSearchParams({ status: e.target.value });
}
_handleNavigation(e) {
switch (e.detail.location) {
case 'home':
this._updateSearchParams({ file: undefined, test: undefined });
break;
}
}
_handleSettingChange(e) {
this[`_${e.detail.name}`] = e.detail.value;
_handleOverlayChange(e) {
this._overlay = e.target.checked;
}
_handleTestClick(e) {
this._updateSearchParams({ file: e.target.dataset.file, test: e.target.dataset.test });
Expand Down Expand Up @@ -245,6 +320,41 @@ class App extends LitElement {
${browserFilter}
`;

}
_renderFooter(selectedBrowser, selectedResult) {
const duration = selectedResult.duration;
const durationClass = {
'error': duration >= 1000,
'footer-timing': true,
'pass': duration < 500,
'warning': duration >= 500 && duration < 1000
};
return html`
<div class="footer">
${ICON_BROWSERS[selectedBrowser.name]}
<div class="footer-info">
<div class="footer-browser-name">${selectedBrowser.name}</div>
<div>version ${selectedBrowser.version}</div>
</div>
<div class="${classMap(durationClass)}">${selectedResult.duration}ms</div>
</div>
`;
}
_renderTabButtons(tabs) {
if (tabs.length < 2) return nothing;
return renderTabButtons('browser results', tabs, index => this._selectedBrowserIndex = index);
}
_renderTabPanels(tabs) {

let panelsContent;
if (tabs.length < 2) {
panelsContent = tabs.map(t => t.content);
} else {
panelsContent = tabs.map(t => renderTabPanel(t));
}

return html`<div class="tab-panels">${panelsContent}</div>`;

}
_renderTestResultRow(file, test) {
const results = data.browsers.map(b => {
Expand All @@ -264,6 +374,61 @@ class App extends LitElement {
</tr>
`;
}
_renderTestResults(fileData, testData) {

let fullMode = nothing;
if (this._layout === LAYOUTS.FULL.value) {
fullMode = renderRadio(
'fullMode',
this._fullMode,
(val) => this._fullMode = val,
[FULL_MODE.GOLDEN, FULL_MODE.NEW]
);
}

const browsers = data.browsers.filter(b => this._filterBrowsers.includes(b.name));
const selectedBrowser = browsers[this._selectedBrowserIndex] ||
browsers.find(b => testData.results.find(r => r.name === b.name && !r.passed)) ||
browsers[0];
const selectedResult = testData.results.find(r => r.name === selectedBrowser.name);

const tabs = browsers.map((b) => {
const result = testData.results.find(r => r.name === b.name);
return {
content: html`<div style="padding: 20px;">${renderResult(result, { fullMode: this._fullMode, layout: this._layout, showOverlay: this._overlay })}</div>`,
label: b.name,
id: b.name.toLowerCase(),
selected: b.name === selectedBrowser.name,
status: result.passed ? 'passed' : 'failed',
statusType: result.passed ? TAB_STATUS_TYPE.NORMAL : TAB_STATUS_TYPE.ERROR
};
});

return html`
<div class="test-results">
<div class="header">
<div class="title">
<div class="title-info">
<h2>${testData.name}</h2>
<div>${fileData.name}</div>
</div>
<div class="title-navigation">
<d2l-vdiff-report-button text="Back" @click="${this._handleBackClick}">${ICON_HOME}</d2l-vdiff-report-button>
</div>
</div>
<div class="settings">
${renderRadio('layout', this._layout, (val) => this._layout = val, [LAYOUTS.FULL, LAYOUTS.SPLIT])}
<label class="settings-box"><input type="checkbox" ?checked="${this._overlay}" @change="${this._handleOverlayChange}">Overlay Difference</label>
${fullMode}
</div>
${this._renderTabButtons(tabs)}
</div>
${this._renderTabPanels(tabs)}
${this._renderFooter(selectedBrowser, selectedResult)}
</div>
`;

}
_updateFiles() {

const files = [];
Expand Down
Loading

0 comments on commit b6ad25d

Please sign in to comment.