build: add global diff switch for visual regression app (#2884)

sbb-design-systems · Jul 3, 2024 · 3074644 · 3074644
1 parent 852c3c7
commit 3074644
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts b/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
+import { type CSSResultGroup, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 // eslint-disable-next-line import-x/no-unresolved
 import { meta } from 'virtual:meta';
@@ -32,10 +32,10 @@ export class ImageDiff extends LitElement {
   @state() private _baselineDimension?: string;
   @state() private _failedDimension?: string;
 
-  @state() private _showDiff: boolean = true;
+  @property() public showDiff: boolean = true;
 
   private _toggleDiff(event: Event): void {
-    this._showDiff = (event.target as SbbToggleCheckElement).checked;
+    this.showDiff = (event.target as SbbToggleCheckElement).checked;
   }
 
   private _setFailedImageDimension(event: Event): void {
@@ -88,7 +88,7 @@ export class ImageDiff extends LitElement {
         </div>
         ${!this.screenshotFiles.isNew && this.screenshotFiles.diffFile
           ? html`<sbb-toggle-check
-              checked
+              .checked=${this.showDiff}
               size="s"
               class="app-diff-toggle"
               @change=${this._toggleDiff}
@@ -120,7 +120,7 @@ export class ImageDiff extends LitElement {
               <button
                 @click=${() => this._showFullscreen('diffFile')}
                 class="app-image-button"
-                ?hidden=${!this._showDiff || this.screenshotFiles.isNew}
+                ?hidden=${!this.showDiff || this.screenshotFiles.isNew}
               >
                 <img
                   class="app-image"
@@ -131,7 +131,7 @@ export class ImageDiff extends LitElement {
               <button
                 @click=${() => this._showFullscreen('failedFile')}
                 class="app-image-button"
-                ?hidden=${this._showDiff && !this.screenshotFiles.isNew}
+                ?hidden=${this.showDiff && !this.screenshotFiles.isNew}
               >
                 <img
                   class="app-image"

diff --git a/src/visual-regression-app/src/components/test-case/test-case.scss b/src/visual-regression-app/src/components/test-case/test-case.scss
@@ -47,3 +47,20 @@ sbb-title {
   background-color: var(--sbb-color-black);
   width: calc(var(--app-progress) * 100%);
 }
+
+.app-filter-and-toggle {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @include sbb.mq($from: wide) {
+    align-items: end;
+    flex-direction: row;
+  }
+}
+
+.app-diff-global-toggle {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+}
diff --git a/src/visual-regression-app/src/components/test-case/test-case.ts b/src/visual-regression-app/src/components/test-case/test-case.ts
@@ -2,6 +2,7 @@ import {
   type CSSResultGroup,
   html,
   LitElement,
+  nothing,
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
@@ -19,6 +20,8 @@ import '@sbb-esta/lyne-elements/title.js';
 import type { TestCaseFilter } from './test-case-filter/test-case-filter.js';
 import style from './test-case.scss?lit&inline';
 
+import type { SbbToggleCheckElement } from '@sbb-esta/lyne-elements/toggle-check.js';
+
 import './test-case-filter/test-case-filter.js';
 import './image-diff/image-diff.js';
 
@@ -40,6 +43,7 @@ export class TestCase extends LitElement {
   @state() private _testCase?: ScreenshotTestCase;
   @state() private _testCaseIndex: number = -1;
   @state() private _filter: Filter = {};
+  @state() private _showGlobalDiff = true;
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
@@ -86,6 +90,10 @@ export class TestCase extends LitElement {
     };
   }
 
+  private _toggleGlobalDiff(event: Event): void {
+    this._showGlobalDiff = (event.target as SbbToggleCheckElement).checked;
+  }
+
   public override render(): TemplateResult {
     return html`
       <sbb-header expanded>
@@ -116,19 +124,36 @@ export class TestCase extends LitElement {
       ${this._testCase
         ? html`<div class="app-testcase">
             <sbb-container expanded>
-              <app-test-case-filter
-                .testCase=${this._testCase}
-                @browserFilterChange=${this._browserFilterChanged}
-                @viewportFilterChange=${this._viewportFilterChanged}
-              ></app-test-case-filter>
+              <div class="app-filter-and-toggle">
+                <app-test-case-filter
+                  .testCase=${this._testCase}
+                  @browserFilterChange=${this._browserFilterChanged}
+                  @viewportFilterChange=${this._viewportFilterChanged}
+                ></app-test-case-filter>
+                ${this._testCase
+                  ?.filter(this._filter.viewport, this._filter.browser)
+                  .some((screenshotFiles) => !screenshotFiles.isNew && !!screenshotFiles.diffFile)
+                  ? html`<sbb-toggle-check
+                      @change=${this._toggleGlobalDiff}
+                      .checked=${this._showGlobalDiff}
+                      size="s"
+                      class="app-diff-global-toggle"
+                    >
+                      Show Diff
+                    </sbb-toggle-check>`
+                  : nothing}
+              </div>
             </sbb-container>
             <sbb-container expanded color="milk">
               <div class="app-image-diffs">
                 ${this._testCase
                   ?.filter(this._filter.viewport, this._filter.browser)
                   .map(
                     (screenshotFiles) =>
-                      html`<app-image-diff .screenshotFiles=${screenshotFiles}></app-image-diff>`,
+                      html`<app-image-diff
+                        .screenshotFiles=${screenshotFiles}
+                        .showDiff=${this._showGlobalDiff}
+                      ></app-image-diff>`,
                   )}
               </div>
             </sbb-container>