feat(elements): add progress bar for real-time reporting (#2560)

Add a result bar that fills up during real-time reporting. It is actually always visible, also for static reports.

Author: xandervedder

packages/elements/src/components/app/app.component.ts

@@ -5,14 +5,14 @@ import { MutantResult, MutationTestResult } from 'mutation-testing-report-schema
 import { MetricsResult, MutantModel, TestModel, calculateMutationTestMetrics } from 'mutation-testing-metrics';
 import { tailwind, globals } from '../../style';
 import { locationChange$, View } from '../../lib/router';
-import { Subscription, debounceTime, fromEvent } from 'rxjs';
+import { Subscription, fromEvent, sampleTime } from 'rxjs';
 import theme from './theme.scss';
 import { createCustomEvent } from '../../lib/custom-events';
 import { FileUnderTestModel, Metrics, MutationTestMetricsResult, TestFileModel, TestMetrics } from 'mutation-testing-metrics';
 import { toAbsoluteUrl } from '../../lib/html-helpers';
 import { isLocalStorageAvailable } from '../../lib/browser';
 import { mutantChanges } from '../../lib/mutant-changes';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 interface BaseContext {
   path: string[];
@@ -40,7 +40,7 @@ const UPDATE_CYCLE_TIME = 100;
 type Context = MutantContext | TestContext;
 
 @customElement('mutation-test-report-app')
-export class MutationTestReportAppComponent extends RealtimeElement {
+export class MutationTestReportAppComponent extends RealTimeElement {
   @property({ attribute: false })
   public report: MutationTestResult | undefined;
 
@@ -280,7 +280,7 @@ export class MutationTestReportAppComponent extends RealtimeElement {
     });
 
     const applySubscription = fromEvent(this.source, 'mutant-tested')
-      .pipe(debounceTime(UPDATE_CYCLE_TIME))
+      .pipe(sampleTime(UPDATE_CYCLE_TIME))
       .subscribe(() => {
         this.applyChanges();
       });
@@ -325,10 +325,18 @@ export class MutationTestReportAppComponent extends RealtimeElement {
         <div class="container bg-white pb-4 font-sans text-gray-800 motion-safe:transition-max-width">
           <div class="space-y-4 transition-colors">
             ${this.renderErrorMessage()}
-            <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right mx-4 pt-4" .theme="${this.theme}">
+            <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right pt-6" .theme="${this.theme}">
             </mte-theme-switch>
             ${this.renderTitle()} ${this.renderTabs()}
-            <mte-breadcrumb .view="${this.context.view}" class="my-4" .path="${this.context.path}"></mte-breadcrumb>
+            <mte-breadcrumb .view="${this.context.view}" .path="${this.context.path}"></mte-breadcrumb>
+            <mte-result-status-bar
+              .detected="${this.rootModel?.systemUnderTestMetrics.metrics.totalDetected}"
+              .undetected="${this.rootModel?.systemUnderTestMetrics.metrics.totalUndetected}"
+              .invalid="${this.rootModel?.systemUnderTestMetrics.metrics.totalInvalid}"
+              .ignored="${this.rootModel?.systemUnderTestMetrics.metrics.ignored}"
+              .pending="${this.rootModel?.systemUnderTestMetrics.metrics.pending}"
+              .total="${this.rootModel?.systemUnderTestMetrics.metrics.totalMutants}"
+            ></mte-result-status-bar>
             ${this.context.view === 'mutant' && this.context.result
               ? html`<mte-mutant-view
                   id="mte-mutant-view"

packages/elements/src/components/breadcrumb.ts

@@ -25,7 +25,7 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
   }
 
   public render() {
-    return html`<nav class="my-6 flex rounded-md border border-gray-200 bg-primary-100 px-5 py-3 text-gray-700" aria-label="Breadcrumb">
+    return html`<nav class="my-4 flex rounded-md border border-primary-600 bg-primary-100 p-3 text-gray-700" aria-label="Breadcrumb">
       <ol class="inline-flex items-center">
         ${this.path && this.path.length > 0 ? this.renderLink(this.rootName, []) : this.renderActiveItem(this.rootName)}
         ${this.renderBreadcrumbItems()}
@@ -53,7 +53,7 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
 
   private renderActiveItem(title: string) {
     return html`<li aria-current="page">
-      <span class="ml-1 text-sm font-medium text-gray-800 md:ml-2">${title}</span>
+      <span class="ml-1 text-sm font-medium text-gray-800">${title}</span>
     </li> `;
   }
 

packages/elements/src/components/drawer-mutant/drawer-mutant.component.ts

@@ -7,12 +7,12 @@ import { tailwind } from '../../style';
 import { DrawerMode } from '../drawer/drawer.component';
 import { renderDrawer } from '../drawer/util';
 import { renderDetailLine, renderEmoji, renderSummaryContainer, renderSummaryLine } from './util';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 const describeTest = (test: TestModel) => `${test.name}${test.sourceFile && test.location ? ` (${describeLocation(test)})` : ''}`;
 
 @customElement('mte-drawer-mutant')
-export class MutationTestReportDrawerMutant extends RealtimeElement {
+export class MutationTestReportDrawerMutant extends RealTimeElement {
   @property()
   public mutant?: MutantModel;
 

packages/elements/src/components/drawer-test/drawer-test.component.ts

@@ -6,12 +6,12 @@ import { tailwind } from '../../style';
 import { renderDetailLine, renderEmoji, renderSummaryContainer, renderSummaryLine } from '../drawer-mutant/util';
 import { DrawerMode } from '../drawer/drawer.component';
 import { renderDrawer } from '../drawer/util';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 const describeMutant = (mutant: MutantModel) => html`<code>${mutant.getMutatedLines()}</code> (${describeLocation(mutant)})`;
 
 @customElement('mte-drawer-test')
-export class MutationTestReportDrawerTestComponent extends RealtimeElement {
+export class MutationTestReportDrawerTestComponent extends RealTimeElement {
   @property()
   public test?: TestModel;
 

packages/elements/src/components/file/file.component.ts

@@ -10,12 +10,12 @@ import { prismjs, tailwind } from '../../style';
 import { StateFilter } from '../state-filter/state-filter.component';
 import style from './file.scss';
 import { renderDots, renderLine } from './util';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 const diffOldClass = 'diff-old';
 const diffNewClass = 'diff-new';
 @customElement('mte-file')
-export class FileComponent extends RealtimeElement {
+export class FileComponent extends RealTimeElement {
   static styles = [prismjs, tailwind, unsafeCSS(style)];
 
   @state()

packages/elements/src/components/metrics-table/metrics-table.component.ts

@@ -7,7 +7,7 @@ import { Thresholds } from 'mutation-testing-report-schema/api';
 import { toAbsoluteUrl } from '../../lib/html-helpers';
 import { tailwind } from '../../style';
 import { renderEmoji } from '../drawer-mutant/util';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 export type TableWidth = 'normal' | 'large';
 
@@ -25,7 +25,7 @@ export interface Column<TMetric> {
 }
 
 @customElement('mte-metrics-table')
-export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealtimeElement {
+export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTimeElement {
   @property()
   public model?: MetricsResult<TFile, TMetric>;
 

packages/elements/src/components/mutant-view/mutant-view.ts

@@ -7,10 +7,10 @@ import { tailwind } from '../../style';
 import { DrawerMode } from '../drawer/drawer.component';
 import { Column } from '../metrics-table/metrics-table.component';
 import style from './mutant-view.scss';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 @customElement('mte-mutant-view')
-export class MutationTestReportMutantViewComponent extends RealtimeElement {
+export class MutationTestReportMutantViewComponent extends RealTimeElement {
   @property()
   public drawerMode: DrawerMode = 'closed';
 

packages/elements/src/components/realtime-element.ts renamed to packages/elements/src/components/real-time-element.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import { Subscription } from 'rxjs';
 import { mutantChanges } from '../lib/mutant-changes';
 
-export abstract class RealtimeElement extends LitElement {
+export abstract class RealTimeElement extends LitElement {
   public shouldReactivate(): boolean {
     return true;
   }

packages/elements/src/components/result-status-bar/result-status-bar.ts

@@ -0,0 +1,133 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { tailwind } from '../../style';
+
+type ProgressType = 'detected' | 'undetected' | 'ignored + invalid' | 'pending';
+type ProgressMetric = { type: ProgressType; amount: number; tooltip: string };
+
+@customElement('mte-result-status-bar')
+export class ResultStatusBar extends LitElement {
+  public static styles = [tailwind];
+
+  @property({ attribute: false })
+  public detected = 0;
+
+  @property({ attribute: false })
+  public undetected = 0;
+
+  @property({ attribute: false })
+  public invalid = 0;
+
+  @property({ attribute: false })
+  public ignored = 0;
+
+  @property({ attribute: false })
+  public pending = 0;
+
+  @property({ attribute: false })
+  public total = 0;
+
+  @state()
+  private shouldBeSmall = false;
+
+  #observer: IntersectionObserver | undefined;
+
+  public constructor() {
+    super();
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    // This code is responsible for making the small progress-bar show up.
+    // Once this element (the standard progress-bar) is no longer intersecting (visible) the viewable window,
+    // the smaller progress-bar will show up at the top if the window.
+    // If this element is visible, the smaller progress-bar will fade out and it will no longer be visible.
+    this.#observer = new window.IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        this.shouldBeSmall = false;
+      } else {
+        this.shouldBeSmall = true;
+      }
+
+      this.requestUpdate();
+    });
+    this.#observer.observe(this);
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.#observer?.disconnect();
+  }
+
+  public render() {
+    return html`
+      ${this.#renderSmallParts()}
+      <div class="my-4 rounded-md border border-gray-200 bg-white transition-all">
+        <div class="relative">
+          <div class="parts flex h-8 w-full overflow-hidden rounded bg-gray-200">${this.#renderParts()}</div>
+        </div>
+      </div>
+    `;
+  }
+
+  #renderSmallParts() {
+    return html`<div
+      class="${this.shouldBeSmall ? 'opacity-1' : 'opacity-0'} pointer-events-none fixed left-0 top-0 z-20 flex w-full justify-center transition-all"
+    >
+      <div class="container w-full bg-white py-2">
+        <div class="flex h-2 overflow-hidden rounded bg-gray-200">${this.#getMetrics().map((metric) => this.#renderSmallPart(metric))}</div>
+      </div>
+    </div>`;
+  }
+
+  #renderSmallPart(metric: ProgressMetric) {
+    return html`<div
+      class="${this.#colorFromMetric(metric.type)} z-20 h-2 transition-all"
+      style="width: ${this.#calculatePercentage(metric.amount)}%"
+    ></div>`;
+  }
+
+  #renderParts() {
+    return html`${this.#getMetrics().map((metric) => this.#renderPart(metric))}`;
+  }
+
+  #renderPart(metric: ProgressMetric) {
+    return html`<div
+      title="${metric.tooltip}"
+      style="width: ${this.#calculatePercentage(metric.amount)}%"
+      class="${this.#colorFromMetric(metric.type)} ${metric.amount === 0
+        ? 'opacity-0'
+        : ''} relative flex h-8 items-center overflow-hidden transition-all"
+    >
+      <span class="ms-3 font-bold text-gray-800">${metric.amount}</span>
+    </div>`;
+  }
+
+  #getMetrics(): Array<ProgressMetric> {
+    return [
+      { type: 'detected', amount: this.detected, tooltip: 'killed + timeout' },
+      { type: 'undetected', amount: this.undetected, tooltip: 'survived + no coverage' },
+      { type: 'ignored + invalid', amount: this.ignored + this.invalid, tooltip: 'ignored + runtime error + compile error' },
+      { type: 'pending', amount: this.pending, tooltip: 'pending' },
+    ];
+  }
+
+  #colorFromMetric(metric: ProgressType) {
+    switch (metric) {
+      case 'detected':
+        return 'bg-green-600';
+      case 'undetected':
+        return 'bg-red-600';
+      case 'ignored + invalid':
+        return 'bg-yellow-600';
+      default:
+        return 'bg-gray-200';
+    }
+  }
+
+  #calculatePercentage(metric: number) {
+    return this.total !== 0 ? (100 * metric) / this.total : 0;
+  }
+}

packages/elements/src/components/state-filter/state-filter.component.ts

@@ -5,7 +5,7 @@ import { createCustomEvent } from '../../lib/custom-events';
 import { renderIf } from '../../lib/html-helpers';
 import { tailwind } from '../../style';
 import style from './state-filter.scss';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 export interface StateFilter<TStatus> {
   status: TStatus;
@@ -16,7 +16,7 @@ export interface StateFilter<TStatus> {
 }
 
 @customElement('mte-state-filter')
-export class FileStateFilterComponent<TStatus extends string> extends RealtimeElement {
+export class FileStateFilterComponent<TStatus extends string> extends RealTimeElement {
   static styles = [tailwind, unsafeCSS(style)];
 
   @property({ type: Array })
@@ -53,7 +53,7 @@ export class FileStateFilterComponent<TStatus extends string> extends RealtimeEl
 
   public render() {
     return html`
-      <div class="sticky top-offset z-10 my-1 flex flex-row bg-white py-4">
+      <div class="sticky top-offset z-10 flex flex-row bg-white py-6">
         <div class="mr-3">
           <button title="Previous" @click=${this.previous} type="button" class="step-button">
             <svg aria-hidden="true" class="h-4 w-4 rotate-180" fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

packages/elements/src/components/test-file/test-file.component.ts

@@ -12,10 +12,10 @@ import { prismjs, tailwind } from '../../style';
 import '../../style/prism-plugins';
 import { renderDots, renderLine } from '../file/util';
 import { StateFilter } from '../state-filter/state-filter.component';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 @customElement('mte-test-file')
-export class TestFileComponent extends RealtimeElement {
+export class TestFileComponent extends RealTimeElement {
   public static styles = [prismjs, tailwind, unsafeCSS(style)];
 
   @property()

packages/elements/src/components/test-view/test-view.ts

@@ -6,10 +6,10 @@ import { tailwind } from '../../style';
 import { DrawerMode } from '../drawer/drawer.component';
 import { Column } from '../metrics-table/metrics-table.component';
 import style from './test-view.scss';
-import { RealtimeElement } from '../realtime-element';
+import { RealTimeElement } from '../real-time-element';
 
 @customElement('mte-test-view')
-export class MutationTestReportTestViewComponent extends RealtimeElement {
+export class MutationTestReportTestViewComponent extends RealTimeElement {
   @property()
   public drawerMode: DrawerMode = 'closed';
 

packages/elements/src/index.ts

@@ -12,3 +12,4 @@ import './components/test-file/test-file.component';
 import './components/drawer-test/drawer-test.component';
 import './components/file-icon/file-icon.component';
 import './components/tooltip/tooltip.component';
+import './components/result-status-bar/result-status-bar';

packages/elements/test/integration/drawer.it.spec/drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode.linux.snap.png

@@ -0,0 +1,25 @@
+import { PageObject } from './PageObject.po';
+
+export class RealTimeProgressBar extends PageObject {
+  public async smallProgressBarVisible() {
+    const smallProgressBar = await this.$('div.pointer-events-none');
+    return (await smallProgressBar.getCssValue('opacity')) === '1';
+  }
+
+  public async progressBarVisible() {
+    try {
+      await this.$('div.my-4');
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public async progressBarWidth() {
+    return await this.$('.parts > div').getCssValue('width');
+  }
+
+  public async killedCount() {
+    return await this.$('.parts > div > span').getText();
+  }
+}