From 16f8f40df7d0540b498dd1ffe727c34b7a1b5dda Mon Sep 17 00:00:00 2001 From: Arnaud Meukam Date: Wed, 27 Nov 2024 02:05:35 +0100 Subject: [PATCH] Fix linting issues Fix some linting issues and improve readability of the codebase Signed-off-by: Arnaud Meukam --- web/src/tab-summary.ts | 36 +++-- web/src/testgrid-app.ts | 10 +- web/src/testgrid-dashboard-summary.ts | 2 +- web/src/testgrid-data-content.ts | 60 ++++---- web/src/testgrid-failures-summary.ts | 4 +- web/src/testgrid-grid-cell.ts | 1 + web/src/testgrid-grid.ts | 30 ++-- web/src/testgrid-group-summary.ts | 77 +++++----- web/src/testgrid-healthiness-summary.ts | 72 +++++---- web/src/testgrid-index.ts | 141 ++++++++++-------- web/src/testgrid-router.ts | 34 +++-- web/src/utils/navigation.ts | 18 +-- web/stories/tab-summary.stories.ts | 46 +++--- web/stories/testgrid-grid-cell.stories.ts | 54 ++++--- .../testgrid-grid-column-header.stories.ts | 15 +- web/stories/testgrid-grid-row-name.stories.ts | 10 +- web/stories/testgrid-grid.stories.ts | 12 +- web/stories/testgrid-group-summary.stories.ts | 8 +- web/test/testgrid-data-content.test.ts | 2 +- web/test/testgrid-grid-cell.test.ts | 76 +++++----- web/test/testgrid-grid.test.ts | 16 +- web/test/testgrid-index.test.ts | 57 +++---- 22 files changed, 443 insertions(+), 338 deletions(-) diff --git a/web/src/tab-summary.ts b/web/src/tab-summary.ts index 1ac70e2..981e370 100644 --- a/web/src/tab-summary.ts +++ b/web/src/tab-summary.ts @@ -44,30 +44,36 @@ export class TabSummary extends LitElement { - ${this.info?.failuresSummary !== undefined ? - html ` - `:''} - ${this.info?.healthinessSummary !== undefined ? - html ` - `:''} + ${this.info?.failuresSummary !== undefined + ? html` + ` + : ''} + ${this.info?.healthinessSummary !== undefined + ? html` + ` + : ''} `; } + /** * Lets the data content element know that the tab changed * * @fires tab-changed * @param tabName string */ - private changeTab(){ - window.dispatchEvent(new CustomEvent('tab-changed',{ - detail: { - tabName: this.info?.name! - }, - })) + private changeTab() { + window.dispatchEvent( + new CustomEvent('tab-changed', { + detail: { + tabName: this.info?.name!, + }, + }) + ); } static styles = css` - .tab-name { // title/link in each Summary card + .tab-name { + // title/link in each Summary card cursor: pointer; position: relative; padding: 4px 8px; @@ -86,7 +92,8 @@ export class TabSummary extends LitElement { align-items: center; } - .tab-name { // title/link in each Summary card + .tab-name { + // title/link in each Summary card cursor: pointer; position: relative; padding: 4px 8px; @@ -136,5 +143,4 @@ export class TabSummary extends LitElement { background-color: #000; } `; - } diff --git a/web/src/testgrid-app.ts b/web/src/testgrid-app.ts index 6daed01..42f7466 100644 --- a/web/src/testgrid-app.ts +++ b/web/src/testgrid-app.ts @@ -1,18 +1,18 @@ -import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; -import './testgrid-router' +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import './testgrid-router'; /** * Class definition for the `testgrid-app` element. * Application root element. */ @customElement('testgrid-app') -export class TestgridApp extends LitElement{ +export class TestgridApp extends LitElement { /** * Lit-element lifecycle method. * Invoked on each update to perform rendering tasks. */ - render(){ + render() { return html``; } } diff --git a/web/src/testgrid-dashboard-summary.ts b/web/src/testgrid-dashboard-summary.ts index 19e2bcd..3353856 100644 --- a/web/src/testgrid-dashboard-summary.ts +++ b/web/src/testgrid-dashboard-summary.ts @@ -162,7 +162,7 @@ export class TestgridDashboardSummary extends LitElement { throw new Error(`HTTP error: ${response.status}`); } const data = ListTabSummariesResponse.fromJson(await response.json()); - var tabSummaries: Array = []; + const tabSummaries: Array = []; data.tabSummaries.forEach(ts => { const si = convertResponse(ts); tabSummaries.push(si); diff --git a/web/src/testgrid-data-content.ts b/web/src/testgrid-data-content.ts index 2f0f2ba..c5c72a0 100644 --- a/web/src/testgrid-data-content.ts +++ b/web/src/testgrid-data-content.ts @@ -17,7 +17,6 @@ import './testgrid-grid'; @customElement('testgrid-data-content') // eslint-disable-next-line @typescript-eslint/no-unused-vars export class TestgridDataContent extends LitElement { - @state() tabNames: string[] = []; @@ -34,20 +33,20 @@ export class TestgridDataContent extends LitElement { tabName?: string; // set the functionality when any tab is clicked on - private onTabActivated(event: CustomEvent<{index: number}>) { + private onTabActivated(event: CustomEvent<{ index: number }>) { const tabIndex = event.detail.index; - if (tabIndex === this.activeIndex){ - return + if (tabIndex === this.activeIndex) { + return; } this.tabName = this.tabNames[tabIndex]; - if (this.activeIndex === 0 || tabIndex === 0){ + if (this.activeIndex === 0 || tabIndex === 0) { this.showTab = !this.showTab; } this.activeIndex = tabIndex; - navigateTab(this.dashboardName, this.tabName) + navigateTab(this.dashboardName, this.tabName); } /** @@ -64,15 +63,15 @@ export class TestgridDataContent extends LitElement { navigateTab(this.dashboardName, this.tabName!); }); window.addEventListener('popstate', () => { - console.log(location.pathname); - console.log(location.pathname.split('/')); - if (location.pathname.split('/').length === 2){ + console.log(window.location.pathname); + console.log(window.location.pathname.split('/')); + if (location.pathname.split('/').length === 2) { this.showTab = false; this.tabName = undefined; this.highlightIndex(this.tabName); navigateTab(this.dashboardName, this.tabName!); } - }) + }); } /** @@ -80,20 +79,31 @@ export class TestgridDataContent extends LitElement { * Invoked on each update to perform rendering tasks. */ render() { - var tabBar = html`${ + const tabBar = html`${ // make sure we only render the tabs when there are tabs - when(this.tabNames.length > 0, () => html` - + when( + this.tabNames.length > 0, + () => html` ${map( - this.tabNames,(name: string) => html`` + this.tabNames, + (name: string) => html`` )} - `) + ` + ) }`; return html` ${tabBar} - ${!this.showTab ? - html`` : - html``} + ${!this.showTab + ? html`` + : html``} `; } @@ -107,7 +117,7 @@ export class TestgridDataContent extends LitElement { throw new Error(`HTTP error: ${response.status}`); } const data = ListDashboardTabsResponse.fromJson(await response.json()); - var tabNames: string[] = ['Summary']; + const tabNames: string[] = ['Summary']; data.dashboardTabs.forEach(tab => { tabNames.push(tab.name); }); @@ -120,21 +130,21 @@ export class TestgridDataContent extends LitElement { // identify which tab to highlight on the tab bar private highlightIndex(tabName: string | undefined) { - if (tabName === undefined){ + if (tabName === undefined) { this.activeIndex = 0; - return + return; } - var index = this.tabNames.indexOf(tabName); - if (index > -1){ + const index = this.tabNames.indexOf(tabName); + if (index > -1) { this.activeIndex = index; } } static styles = css` - mwc-tab{ + mwc-tab { --mdc-typography-button-letter-spacing: 0; --mdc-tab-horizontal-padding: 12px; --mdc-typography-button-font-size: 0.8rem; } -`; + `; } diff --git a/web/src/testgrid-failures-summary.ts b/web/src/testgrid-failures-summary.ts index 1711cd2..184c2d8 100644 --- a/web/src/testgrid-failures-summary.ts +++ b/web/src/testgrid-failures-summary.ts @@ -1,12 +1,13 @@ import { LitElement, html, css } from 'lit'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { customElement, property, state } from 'lit/decorators.js'; -import { TabSummaryInfo } from './testgrid-dashboard-summary'; import { map } from 'lit/directives/map.js'; +import { TabSummaryInfo } from './testgrid-dashboard-summary'; @customElement('testgrid-failures-summary') export class TestgridFailuresSummary extends LitElement { @state() showFailureSummary = false; + @property() info?: TabSummaryInfo; render() { @@ -38,6 +39,7 @@ export class TestgridFailuresSummary extends LitElement { ` } + private dropdownTable(){ this.showFailureSummary = !this.showFailureSummary; } diff --git a/web/src/testgrid-grid-cell.ts b/web/src/testgrid-grid-cell.ts index 2753a8f..9ce2325 100644 --- a/web/src/testgrid-grid-cell.ts +++ b/web/src/testgrid-grid-cell.ts @@ -59,6 +59,7 @@ export class TestgridGridCell extends LitElement{ `; @property({reflect: true, attribute: 'status'}) status: String; + @property() icon: String; render(){ diff --git a/web/src/testgrid-grid.ts b/web/src/testgrid-grid.ts index fd6f388..5f192e6 100644 --- a/web/src/testgrid-grid.ts +++ b/web/src/testgrid-grid.ts @@ -1,7 +1,11 @@ -import { LitElement, html, PropertyValues } from "lit"; -import { map } from "lit/directives/map.js"; -import { customElement, property, state } from "lit/decorators.js"; -import { ListHeadersResponse, ListRowsResponse, ListRowsResponse_Row } from './gen/pb/api/v1/data.js'; +import { LitElement, html, PropertyValues } from 'lit'; +import { map } from 'lit/directives/map.js'; +import { customElement, property, state } from 'lit/decorators.js'; +import { + ListHeadersResponse, + ListRowsResponse, + ListRowsResponse_Row, +} from './gen/pb/api/v1/data.js'; import './testgrid-grid-row'; import './testgrid-grid-header-row'; @@ -11,7 +15,6 @@ import './testgrid-grid-header-row'; */ @customElement('testgrid-grid') export class TestgridGrid extends LitElement { - @property({ type: String, reflect: true }) dashboardName: String = ''; @@ -40,10 +43,17 @@ export class TestgridGrid extends LitElement { */ render() { return html` - - ${map(this.tabGridRows, - (row: ListRowsResponse_Row) => html`` - )} + + ${map( + this.tabGridRows, + (row: ListRowsResponse_Row) => + html`` + )} `; } @@ -62,7 +72,7 @@ export class TestgridGrid extends LitElement { throw new Error(`HTTP error: ${response.status}`); } const data = ListRowsResponse.fromJson(await response.json()); - var rows: Array = []; + const rows: Array = []; data.rows.forEach(row => rows.push(row)); this.tabGridRows = rows; } catch (error) { diff --git a/web/src/testgrid-group-summary.ts b/web/src/testgrid-group-summary.ts index efbaf61..c7354e8 100644 --- a/web/src/testgrid-group-summary.ts +++ b/web/src/testgrid-group-summary.ts @@ -1,8 +1,10 @@ import { LitElement, html, css } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { ListDashboardSummariesResponse } from './gen/pb/api/v1/data'; -import { DashboardSummary } from './gen/pb/api/v1/data'; import { map } from 'lit/directives/map.js'; +import { + ListDashboardSummariesResponse, + DashboardSummary, +} from './gen/pb/api/v1/data'; import { TabStatusIcon } from './testgrid-dashboard-summary'; /** @@ -17,7 +19,6 @@ interface RenderedDashboardSummary { @customElement('testgrid-group-summary') export class TestgridGroupSummary extends LitElement { - @property({ type: String }) groupName = ''; @@ -39,14 +40,18 @@ export class TestgridGroupSummary extends LitElement { - ${map(this.dashboardSummaries, + ${map( + this.dashboardSummaries, (ds: RenderedDashboardSummary) => html` - ${ds.icon} + + ${ds.icon} + ${ds.name} ${ds.tabDescription} - `)} + ` + )} `; @@ -65,72 +70,76 @@ export class TestgridGroupSummary extends LitElement { if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); } - const data = ListDashboardSummariesResponse.fromJson(await response.json()); - var summaries: RenderedDashboardSummary[] = []; - data.dashboardSummaries.forEach(summary => summaries.push(this.convertResponse(summary))); + const data = ListDashboardSummariesResponse.fromJson( + await response.json() + ); + const summaries: RenderedDashboardSummary[] = []; + data.dashboardSummaries.forEach(summary => + summaries.push(this.convertResponse(summary)) + ); this.dashboardSummaries = summaries; } catch (error) { console.error(`Could not get grid rows: ${error}`); } } - private convertResponse(summary: DashboardSummary){ + private convertResponse(summary: DashboardSummary) { const sortedStatuses: string[] = [ - "PASSING", - "ACCEPTABLE", - "FLAKY", - "FAILING", - "STALE", - "BROKEN", - "PENDING" - ] - - var numPassing = 0; - var total = 0; - for (const key in summary.tabStatusCount){ - if (key === "PASSING"){ + 'PASSING', + 'ACCEPTABLE', + 'FLAKY', + 'FAILING', + 'STALE', + 'BROKEN', + 'PENDING', + ]; + + let numPassing = 0; + let total = 0; + for (const key in summary.tabStatusCount) { + if (key === 'PASSING') { numPassing = summary.tabStatusCount[key]; } total += summary.tabStatusCount[key]; } - var prefix = `${numPassing} / ${total} PASSING`; - var descriptions: string [] = []; + let prefix = `${numPassing} / ${total} PASSING`; + const descriptions: string[] = []; sortedStatuses.forEach(status => { - if (summary.tabStatusCount[status] > 0){ + if (summary.tabStatusCount[status] > 0) { descriptions.push(`${summary.tabStatusCount[status]} ${status}`); } }); - if (descriptions.length >0){ - prefix += " ("+ descriptions.join(", ") +")"; + if (descriptions.length > 0) { + prefix += ` (${descriptions.join(', ')})`; } const rds: RenderedDashboardSummary = { name: summary.name, overallStatus: summary.overallStatus, icon: TabStatusIcon.get(summary.overallStatus)!, - tabDescription: prefix + tabDescription: prefix, }; return rds; } static styles = css` - - body{ + body { font-size: 12px; } - .material-icons{ + .material-icons { font-size: 2em; } - th, td { + th, + td { padding: 0.5em 2em; } - thead{ + thead { background-color: #e0e0e0; } diff --git a/web/src/testgrid-healthiness-summary.ts b/web/src/testgrid-healthiness-summary.ts index 72cc77a..2d6c745 100644 --- a/web/src/testgrid-healthiness-summary.ts +++ b/web/src/testgrid-healthiness-summary.ts @@ -1,48 +1,62 @@ import { LitElement, html, css } from 'lit'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { customElement, property, state } from 'lit/decorators.js'; -import { TabSummaryInfo } from './testgrid-dashboard-summary'; import { map } from 'lit/directives/map.js'; +import { TabSummaryInfo } from './testgrid-dashboard-summary'; @customElement('testgrid-healthiness-summary') export class TestgridTabTable extends LitElement { @state() showHealthinesSummary = false; + @property() info?: TabSummaryInfo; render() { return html` -
+
- ${this.showHealthinesSummary ? html` - - - - - - - - - - ${map( - this.info?.healthinessSummary!.topFlakyTests, - (test: any) => html` - - - - - - - - - `)} -
Test NameFlakiness (Previous)Flakiness (Current)TrendInfra Failure RateFlaky Tests Count
${test.displayName}${this.info?.healthinessSummary?.healthinessStats.previousFlakiness}${this.info?.healthinessSummary?.healthinessStats.averageFlakiness}N/A${test.flakiness}${this.info?.healthinessSummary?.healthinessStats.numFlakyTests}
` + ${this.showHealthinesSummary + ? html` + + + + + + + + + ${map( + this.info?.healthinessSummary!.topFlakyTests, + (test: any) => html` + + + + + + + + + ` + )} +
Test NameFlakiness (Previous)Flakiness (Current)TrendInfra Failure RateFlaky Tests Count
${test.displayName} + ${this.info?.healthinessSummary?.healthinessStats + .previousFlakiness} + + ${this.info?.healthinessSummary?.healthinessStats + .averageFlakiness} + N/A${test.flakiness} + ${this.info?.healthinessSummary?.healthinessStats + .numFlakyTests} +
` : ''}
- ` + `; } - private dropdownTable(){ + + private dropdownTable() { this.showHealthinesSummary = !this.showHealthinesSummary; } @@ -74,5 +88,5 @@ export class TestgridTabTable extends LitElement { th { text-align: left; } - ` + `; } diff --git a/web/src/testgrid-index.ts b/web/src/testgrid-index.ts index 8046153..bc53d71 100644 --- a/web/src/testgrid-index.ts +++ b/web/src/testgrid-index.ts @@ -2,12 +2,14 @@ import { LitElement, html, css } from 'lit'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { customElement, property } from 'lit/decorators.js'; import { map } from 'lit/directives/map.js'; -import { ListDashboardsResponse, ListDashboardGroupsResponse } from './gen/pb/api/v1/data.js'; -import { navigate } from './utils/navigation'; +import { + ListDashboardsResponse, + ListDashboardGroupsResponse, +} from './gen/pb/api/v1/data.js'; +import { navigate } from './utils/navigation.js'; import '@material/mwc-button'; import '@material/mwc-list'; - // dashboards template // clicking on any dashboard should navigate to the /dashboards view const dashboardTemplate = (dashboards: Array) => html` @@ -16,7 +18,8 @@ const dashboardTemplate = (dashboards: Array) => html` ${map( dashboards, (dash: string, index: number) => html` - navigate(dash)} class="column card dashboard"> + + navigate(dash)} class="column card dashboard">

${dash}

@@ -35,18 +38,17 @@ const dashboardTemplate = (dashboards: Array) => html` @customElement('testgrid-index') // eslint-disable-next-line @typescript-eslint/no-unused-vars export class TestgridIndex extends LitElement { - - @property({ type: Array }) + @property({ type: Array }) dashboards: Array = []; - @property({ type: Array }) + @property({ type: Array }) dashboardGroups: Array = []; - @property({ type: Array }) + @property({ type: Array }) respectiveDashboards: Array = []; // toggles between the dashboards of a particular group or a dashboard without a group - @property({ type: Boolean }) + @property({ type: Boolean }) show = true; /** @@ -68,19 +70,22 @@ export class TestgridIndex extends LitElement {
- ${map(this.dashboardGroups, (dash: string, index: number) => - html` - -
-

${dash}

-
- - `)} + ${map( + this.dashboardGroups, + (dash: string, index: number) => + html` + +
+

${dash}

+
+ + ` + )} @@ -88,8 +93,14 @@ export class TestgridIndex extends LitElement { ${!this.show ? dashboardTemplate(this.respectiveDashboards) : ''} - ${!this.show ? html` - X + ${!this.show + ? html` + X ` : ''}
@@ -98,20 +109,20 @@ export class TestgridIndex extends LitElement { // fetch the the list of dashboards from the API async fetchDashboards() { - try{ - fetch(`http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboards`).then( - async response => { - const resp = ListDashboardsResponse.fromJson(await response.json()); - const dashboards: string[] = []; - - resp.dashboards.forEach(db => { - if (db.dashboardGroupName === ""){ - dashboards.push(db.name); - } - }); - this.dashboards = dashboards; - } - ); + try { + fetch( + `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboards` + ).then(async response => { + const resp = ListDashboardsResponse.fromJson(await response.json()); + const dashboards: string[] = []; + + resp.dashboards.forEach(db => { + if (db.dashboardGroupName === '') { + dashboards.push(db.name); + } + }); + this.dashboards = dashboards; + }); } catch (error) { console.log(`failed to fetch: ${error}`); } @@ -119,20 +130,22 @@ export class TestgridIndex extends LitElement { // fetch the list of dashboard groups from API async fetchDashboardGroups() { - try{ - fetch(`http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboard-groups`).then( - async response => { - const resp = ListDashboardGroupsResponse.fromJson(await response.json()); - const dashboardGroups: string[] = []; - - resp.dashboardGroups.forEach(db => { - dashboardGroups.push(db.name); - }); - - this.dashboardGroups = dashboardGroups; - } - ); - } catch(error){ + try { + fetch( + `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboard-groups` + ).then(async response => { + const resp = ListDashboardGroupsResponse.fromJson( + await response.json() + ); + const dashboardGroups: string[] = []; + + resp.dashboardGroups.forEach(db => { + dashboardGroups.push(db.name); + }); + + this.dashboardGroups = dashboardGroups; + }); + } catch (error) { console.log(`failed to fetch: ${error}`); } } @@ -141,18 +154,18 @@ export class TestgridIndex extends LitElement { async fetchRespectiveDashboards(name: string) { this.show = false; try { - fetch(`http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboard-groups/${name}`).then( - async response => { - const resp = ListDashboardsResponse.fromJson(await response.json()); - const respectiveDashboards: string[] = []; - - resp.dashboards.forEach(ts => { - respectiveDashboards.push(ts.name); - }); - - this.respectiveDashboards = respectiveDashboards; - } - ); + fetch( + `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboard-groups/${name}` + ).then(async response => { + const resp = ListDashboardsResponse.fromJson(await response.json()); + const respectiveDashboards: string[] = []; + + resp.dashboards.forEach(ts => { + respectiveDashboards.push(ts.name); + }); + + this.respectiveDashboards = respectiveDashboards; + }); } catch (error) { console.error(`Could not get dashboard summaries: ${error}`); } diff --git a/web/src/testgrid-router.ts b/web/src/testgrid-router.ts index b9fe8b2..d4d5255 100644 --- a/web/src/testgrid-router.ts +++ b/web/src/testgrid-router.ts @@ -1,12 +1,12 @@ -import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; -import { Router } from "@lit-labs/router"; +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { Router } from '@lit-labs/router'; import './testgrid-data-content'; import './testgrid-index'; // Defines the type of params used for rendering components under different paths interface RouteParameter { - [key: string]: string | undefined; + [key: string]: string | undefined; } /** @@ -14,30 +14,38 @@ interface RouteParameter { * Handles the routing logic. */ @customElement('testgrid-router') -export class TestgridRouter extends LitElement{ +export class TestgridRouter extends LitElement { private router = new Router(this, [ { - path: '/:dashboard/*', - render: (params: RouteParameter) => html``, + path: '/:dashboard/*', + render: (params: RouteParameter) => + html``, }, { - path: '/:dashboard', - render: (params: RouteParameter) => html``, + path: '/:dashboard', + render: (params: RouteParameter) => + html``, }, { path: '/', render: () => html``, }, - ]) + ]); /** * Lit-element lifecycle method. * Invoked when a component is added to the document's DOM. */ - connectedCallback(){ + connectedCallback() { super.connectedCallback(); window.addEventListener('location-changed', () => { - this.router.goto(location.pathname); + this.router.goto(window.location.pathname); }); } @@ -45,7 +53,7 @@ export class TestgridRouter extends LitElement{ * Lit-element lifecycle method. * Invoked on each update to perform rendering tasks. */ - render(){ + render() { return html`${this.router.outlet()}`; } } diff --git a/web/src/utils/navigation.ts b/web/src/utils/navigation.ts index 7a36dab..32d0f51 100644 --- a/web/src/utils/navigation.ts +++ b/web/src/utils/navigation.ts @@ -3,10 +3,10 @@ * @fires location-changed * @param {string} path */ -export function navigate(name: string){ - const url = new URL(location.href); +export function navigate(name: string) { + const url = new URL(window.location.href); url.pathname = name; - history.pushState(null, '', url); + window.history.pushState(null, '', url); window.dispatchEvent(new CustomEvent('location-changed')); } @@ -15,12 +15,12 @@ export function navigate(name: string){ * @param {string} dashboard * @param {string} tab */ -export function navigateTab(dashboard: string, tab: string){ - const url = new URL(location.href) - if (tab === 'Summary' || tab === undefined){ - url.pathname = `${dashboard}` +export function navigateTab(dashboard: string, tab: string) { + const url = new URL(window.location.href); + if (tab === 'Summary' || tab === undefined) { + url.pathname = `${dashboard}`; } else { - url.pathname = `${dashboard}/${tab}` + url.pathname = `${dashboard}/${tab}`; } - history.pushState(null, '', url); + window.history.pushState(null, '', url); } diff --git a/web/stories/tab-summary.stories.ts b/web/stories/tab-summary.stories.ts index 9cde5d4..d4628a5 100644 --- a/web/stories/tab-summary.stories.ts +++ b/web/stories/tab-summary.stories.ts @@ -1,6 +1,14 @@ import { html, TemplateResult } from 'lit'; import '../src/tab-summary.js'; -import { FailingTestInfo, FailuresSummaryInfo, FailureStats, FlakyTestInfo, HealthinessStats, HealthinessSummaryInfo, TabSummaryInfo } from '../src/testgrid-dashboard-summary'; +import { + FailingTestInfo, + FailuresSummaryInfo, + FailureStats, + FlakyTestInfo, + HealthinessStats, + HealthinessSummaryInfo, + TabSummaryInfo, +} from '../src/testgrid-dashboard-summary'; export default { title: 'Tab summary', @@ -21,35 +29,35 @@ const Template: Story = ({ icon = 'done', overallStatus = 'PASSING', }: Args) => { - const failuresSummary = {} as FailuresSummaryInfo + const failuresSummary = {} as FailuresSummaryInfo; const failureStats: FailureStats = { - numFailingTests: 1 - } + numFailingTests: 1, + }; const FailingTest = { - displayName: "TEST0", + displayName: 'TEST0', failCount: 1, - passTimestamp: "today", - failTimestamp: "today", - } as FailingTestInfo + passTimestamp: 'today', + failTimestamp: 'today', + } as FailingTestInfo; - failuresSummary.failureStats = failureStats + failuresSummary.failureStats = failureStats; failuresSummary.topFailingTests = [FailingTest]; - const healthinessSummary = {} as HealthinessSummaryInfo + const healthinessSummary = {} as HealthinessSummaryInfo; const healthinessStats: HealthinessStats = { - startTimestamp: "today", - endTimestamp: "today", + startTimestamp: 'today', + endTimestamp: 'today', numFlakyTests: 1, averageFlakiness: 0, previousFlakiness: 100, - } + }; const FlakyTest = { - displayName: "TEST1", + displayName: 'TEST1', flakiness: 0, - } as FlakyTestInfo + } as FlakyTestInfo; - healthinessSummary.healthinessStats = healthinessStats - healthinessSummary.topFlakyTests = [FlakyTest] + healthinessSummary.healthinessStats = healthinessStats; + healthinessSummary.topFlakyTests = [FlakyTest]; const tsi: TabSummaryInfo = { icon, @@ -60,8 +68,8 @@ const Template: Story = ({ lastUpdateTimestamp: 'today', latestGreenBuild: 'HULK!', dashboardName: 'TEST1', - failuresSummary: failuresSummary, - healthinessSummary: healthinessSummary, + failuresSummary, + healthinessSummary, }; return html` = ({ - icon = '', status = '', -}: Args) => { - return html``; -}; +const Template: Story = ({ icon = '', status = '' }: Args) => + html``; export const NoResult = Template.bind({}); -NoResult.args = {icon: '', status: TestStatus[TestStatus.NO_RESULT]}; +NoResult.args = { icon: '', status: TestStatus[TestStatus.NO_RESULT] }; export const Pass = Template.bind({}); -Pass.args = {icon: '', status: TestStatus[TestStatus.PASS]}; +Pass.args = { icon: '', status: TestStatus[TestStatus.PASS] }; export const PassWithErrors = Template.bind({}); -PassWithErrors.args = {icon: 'E', status: TestStatus[TestStatus.PASS_WITH_ERRORS]}; +PassWithErrors.args = { + icon: 'E', + status: TestStatus[TestStatus.PASS_WITH_ERRORS], +}; export const PassWithSkips = Template.bind({}); -PassWithSkips.args = {icon: 'S', status: TestStatus[TestStatus.PASS_WITH_SKIPS]}; +PassWithSkips.args = { + icon: 'S', + status: TestStatus[TestStatus.PASS_WITH_SKIPS], +}; export const Running = Template.bind({}); -Running.args = {icon: 'R', status: TestStatus[TestStatus.RUNNING]}; +Running.args = { icon: 'R', status: TestStatus[TestStatus.RUNNING] }; export const CategorizedAbort = Template.bind({}); -CategorizedAbort.args = {icon: 'A', status: TestStatus[TestStatus.CATEGORIZED_ABORT]}; +CategorizedAbort.args = { + icon: 'A', + status: TestStatus[TestStatus.CATEGORIZED_ABORT], +}; export const Unknown = Template.bind({}); -Unknown.args = {icon: '?', status: TestStatus[TestStatus.UNKNOWN]}; +Unknown.args = { icon: '?', status: TestStatus[TestStatus.UNKNOWN] }; export const Cancel = Template.bind({}); -Cancel.args = {icon: 'C', status: TestStatus[TestStatus.CANCEL]}; +Cancel.args = { icon: 'C', status: TestStatus[TestStatus.CANCEL] }; export const Blocked = Template.bind({}); -Blocked.args = {icon: 'B', status: TestStatus[TestStatus.BLOCKED]}; +Blocked.args = { icon: 'B', status: TestStatus[TestStatus.BLOCKED] }; export const TimedOut = Template.bind({}); -TimedOut.args = {icon: 'T', status: TestStatus[TestStatus.TIMED_OUT]}; +TimedOut.args = { icon: 'T', status: TestStatus[TestStatus.TIMED_OUT] }; export const CategorizedFail = Template.bind({}); -CategorizedFail.args = {icon: 'F', status: TestStatus[TestStatus.CATEGORIZED_FAIL]}; +CategorizedFail.args = { + icon: 'F', + status: TestStatus[TestStatus.CATEGORIZED_FAIL], +}; export const BuildFail = Template.bind({}); -BuildFail.args = {icon: 'X', status: TestStatus[TestStatus.BUILD_FAIL]}; +BuildFail.args = { icon: 'X', status: TestStatus[TestStatus.BUILD_FAIL] }; export const Fail = Template.bind({}); -Fail.args = {icon: '', status: TestStatus[TestStatus.FAIL]}; +Fail.args = { icon: '', status: TestStatus[TestStatus.FAIL] }; export const Flaky = Template.bind({}); -Flaky.args = {icon: '1/2', status: TestStatus[TestStatus.FLAKY]}; +Flaky.args = { icon: '1/2', status: TestStatus[TestStatus.FLAKY] }; export const ToolFail = Template.bind({}); -ToolFail.args = {icon: '!', status: TestStatus[TestStatus.TOOL_FAIL]}; +ToolFail.args = { icon: '!', status: TestStatus[TestStatus.TOOL_FAIL] }; export const BuildPassed = Template.bind({}); -BuildPassed.args = {icon: '', status: TestStatus[TestStatus.BUILD_PASSED]}; +BuildPassed.args = { icon: '', status: TestStatus[TestStatus.BUILD_PASSED] }; diff --git a/web/stories/testgrid-grid-column-header.stories.ts b/web/stories/testgrid-grid-column-header.stories.ts index 0580f8d..4f4d2e1 100644 --- a/web/stories/testgrid-grid-column-header.stories.ts +++ b/web/stories/testgrid-grid-column-header.stories.ts @@ -15,15 +15,14 @@ interface Args { name: string; } -const Template: Story = ({ - name = '', -}: Args) => { - return html``; -}; +const Template: Story = ({ name = '' }: Args) => + html``; export const Empty = Template.bind({}); -Empty.args = {name: ''}; +Empty.args = { name: '' }; export const Short = Template.bind({}); -Short.args = {name: '1234'}; +Short.args = { name: '1234' }; export const Long = Template.bind({}); -Long.args = {name: '1234-5678-123456789012-very-long-id'}; +Long.args = { name: '1234-5678-123456789012-very-long-id' }; diff --git a/web/stories/testgrid-grid-row-name.stories.ts b/web/stories/testgrid-grid-row-name.stories.ts index da239ca..e1101c4 100644 --- a/web/stories/testgrid-grid-row-name.stories.ts +++ b/web/stories/testgrid-grid-row-name.stories.ts @@ -15,11 +15,11 @@ interface Args { name: string; } -const Template: Story = ({ name = '' }: Args) => { - return html``; -}; +const Template: Story = ({ + name = '', +}: Args) => html``; export const Empty = Template.bind({}); Empty.args = { name: '' }; diff --git a/web/stories/testgrid-grid.stories.ts b/web/stories/testgrid-grid.stories.ts index bbd2e09..cb35974 100644 --- a/web/stories/testgrid-grid.stories.ts +++ b/web/stories/testgrid-grid.stories.ts @@ -16,11 +16,11 @@ interface Args { tabName: String; } -const Template: Story = ({ - dashboardName = '', tabName = '', -}: Args) => { - return html``; -}; +const Template: Story = ({ dashboardName = '', tabName = '' }: Args) => + html``; export const Grid = Template.bind({}); -Grid.args = {dashboardName: 'fake-dashboard-1', tabName: 'fake_tab_3'} +Grid.args = { dashboardName: 'fake-dashboard-1', tabName: 'fake_tab_3' }; diff --git a/web/stories/testgrid-group-summary.stories.ts b/web/stories/testgrid-group-summary.stories.ts index 17edfd8..e8a1ff1 100644 --- a/web/stories/testgrid-group-summary.stories.ts +++ b/web/stories/testgrid-group-summary.stories.ts @@ -15,16 +15,12 @@ interface Args { groupName: string; } -const Template: Story = ({ - groupName = '', -}: Args) => { - return html` +const Template: Story = ({ groupName = '' }: Args) => html` `; -}; export const DashboardGroup = Template.bind({}); -DashboardGroup.args = {groupName:'fake-dashboard-group-1'} +DashboardGroup.args = { groupName: 'fake-dashboard-group-1' }; diff --git a/web/test/testgrid-data-content.test.ts b/web/test/testgrid-data-content.test.ts index 995f678..a3eb34c 100644 --- a/web/test/testgrid-data-content.test.ts +++ b/web/test/testgrid-data-content.test.ts @@ -7,8 +7,8 @@ import { waitUntil, } from '@open-wc/testing'; -import { TestgridDataContent} from '../src/testgrid-data-content'; import { Tab } from '@material/mwc-tab'; +import { TestgridDataContent} from '../src/testgrid-data-content'; describe('Testgrid Data Content page', () => { let element: TestgridDataContent; diff --git a/web/test/testgrid-grid-cell.test.ts b/web/test/testgrid-grid-cell.test.ts index 29342d6..313c74a 100644 --- a/web/test/testgrid-grid-cell.test.ts +++ b/web/test/testgrid-grid-cell.test.ts @@ -1,46 +1,50 @@ import { - html, - fixture, - defineCE, - unsafeStatic, - expect, + html, + fixture, + defineCE, + unsafeStatic, + expect, } from '@open-wc/testing'; import { TestgridGridCell } from '../src/testgrid-grid-cell'; import { TestStatus } from '../src/gen/pb/test_status/test_status'; describe('TestGrid grid cell', () => { - let element: TestgridGridCell; - beforeEach(async () => { - // Need to wrap an element to apply its properties (ex. @customElement) - // See https://open-wc.org/docs/testing/helpers/#test-a-custom-class-with-properties - const tagName = defineCE(class extends TestgridGridCell { }); - const tag = unsafeStatic(tagName); - element = await fixture(html`<${tag}>`); - }); - it('passes the a11y audit', async () => { - expect(element).shadowDom.to.be.accessible(); - }); + let element: TestgridGridCell; + beforeEach(async () => { + // Need to wrap an element to apply its properties (ex. @customElement) + // See https://open-wc.org/docs/testing/helpers/#test-a-custom-class-with-properties + const tagName = defineCE(class extends TestgridGridCell {}); + const tag = unsafeStatic(tagName); + element = await fixture(html`<${tag}>`); + }); + it('passes the a11y audit', async () => { + expect(element).shadowDom.to.be.accessible(); + }); - it('can instantiate', async () => { - expect(element).to.exist; - expect(element.icon).to.undefined; - expect(element.status).to.undefined; - }); + it('can instantiate', async () => { + expect(element).to.exist; + expect(element.icon).to.undefined; + expect(element.status).to.undefined; + }); + + [ + { icon: 'P', status: TestStatus.PASS }, + { icon: 'F', status: TestStatus.FAIL }, + { icon: 'R', status: TestStatus.RUNNING }, + ].forEach(testCase => { + it(`renders with status ${TestStatus[testCase.status]}`, async () => { + const tagName = defineCE(class extends TestgridGridCell {}); + const tag = unsafeStatic(tagName); + let el: TestgridGridCell; + el = await fixture( + html`<${tag} .icon=${testCase.icon} .status=${ + TestStatus[testCase.status] + }>` + ); - [ - {icon: 'P', status: TestStatus.PASS}, - {icon: 'F', status: TestStatus.FAIL}, - {icon: 'R', status: TestStatus.RUNNING}, - ].forEach(function(testCase) { - it("renders with status " + TestStatus[testCase.status], async() => { - const tagName = defineCE(class extends TestgridGridCell { }); - const tag = unsafeStatic(tagName); - let el: TestgridGridCell; - el = await fixture(html`<${tag} .icon=${testCase.icon} .status=${TestStatus[testCase.status]}>`); - - expect(el).to.exist; - expect(el.icon).to.equal(testCase.icon); - expect(el.status).to.equal(TestStatus[testCase.status]); - }); + expect(el).to.exist; + expect(el.icon).to.equal(testCase.icon); + expect(el.status).to.equal(TestStatus[testCase.status]); }); + }); }); diff --git a/web/test/testgrid-grid.test.ts b/web/test/testgrid-grid.test.ts index 56104e5..4331692 100644 --- a/web/test/testgrid-grid.test.ts +++ b/web/test/testgrid-grid.test.ts @@ -16,7 +16,9 @@ describe('Testgrid Grid page', () => { // See https://open-wc.org/docs/testing/helpers/#test-a-custom-class-with-properties const tagName = defineCE(class extends TestgridGrid {}); const tag = unsafeStatic(tagName); - element = await fixture(html`<${tag} .dashboardName=${'fake-dashboard-1'} .tabName=${'fake-tab-3'}>`); + element = await fixture( + html`<${tag} .dashboardName=${'fake-dashboard-1'} .tabName=${'fake-tab-3'}>` + ); }); // TODO - add accessibility tests @@ -26,11 +28,17 @@ describe('Testgrid Grid page', () => { 'Grid display did not render grid data', { timeout: 4000, - }, + } ); expect(element).to.exist; - expect(element.shadowRoot?.children.length).to.be.equal(3, 'ShadowRoot children differ'); + expect(element.shadowRoot?.children.length).to.be.equal( + 3, + 'ShadowRoot children differ' + ); expect(element.tabGridRows.length).to.be.equal(2, 'Number of rows differ'); - expect(element.tabGridHeaders?.headers.length).to.be.equal(5, 'Number of columns differ'); + expect(element.tabGridHeaders?.headers.length).to.be.equal( + 5, + 'Number of columns differ' + ); }); }); diff --git a/web/test/testgrid-index.test.ts b/web/test/testgrid-index.test.ts index 3720173..efb35ab 100644 --- a/web/test/testgrid-index.test.ts +++ b/web/test/testgrid-index.test.ts @@ -24,14 +24,13 @@ describe('Testgrid Index page', () => { // TODO - add accessibility tests it('fetches dashboards and dashboard-groups after loading the component', async () => { - // waiting until list items (dashboards and groups) are fully rendered await waitUntil( () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'), 'Index did not render dashboards', { timeout: 5000, - }, + } ); await waitUntil( @@ -39,7 +38,7 @@ describe('Testgrid Index page', () => { 'Index did not render dashboard groups', { timeout: 5000, - }, + } ); // check if dashboards and dashboard groups exist expect(element.dashboards).to.not.be.empty; @@ -56,17 +55,19 @@ describe('Testgrid Index page', () => { 'Index did not render dashboard groups', { timeout: 4000, - }, + } ); expect(element.dashboardGroups).to.not.be.empty; // click on first dashboard group to fetch respective dashboards - const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard-group')!; + const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector( + 'mwc-list-item.dashboard-group' + )!; dashboardGroup.click(); await aTimeout(3000); - + expect(element.show).to.be.false; expect(element.respectiveDashboards).to.not.be.empty; }); @@ -80,11 +81,13 @@ describe('Testgrid Index page', () => { 'Index did not render dashboard groups', { timeout: 4000, - }, + } ); // click on first dashboard group to fetch respective dashboards - const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard-group')!; + const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector( + 'mwc-list-item.dashboard-group' + )!; dashboardGroup.click(); expect(element.show).to.be.false; @@ -94,28 +97,30 @@ describe('Testgrid Index page', () => { 'Element did not render children', { timeout: 4000, - }, + } ); - - const closeBtn: Button = element.shadowRoot!.querySelector('mwc-button.column')!; + + const closeBtn: Button = + element.shadowRoot!.querySelector('mwc-button.column')!; closeBtn.click(); expect(element.show).to.be.true; }); - it('navigates to /dashboards after clicking on dashboard',async () => { - - await waitUntil( - () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'), - 'Index did not render dashboards', - { - timeout: 4000, - }, - ); - - // click on first dashboard group to fetch respective dashboards - const dashboard: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard')!; - dashboard.click(); - - expect(location.pathname).to.not.equal('/'); + it('navigates to /dashboards after clicking on dashboard', async () => { + await waitUntil( + () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'), + 'Index did not render dashboards', + { + timeout: 4000, + } + ); + + // click on first dashboard group to fetch respective dashboards + const dashboard: ListItemBase = element.shadowRoot!.querySelector( + 'mwc-list-item.dashboard' + )!; + dashboard.click(); + + expect(location.pathname).to.not.equal('/'); }); });