refactor: remove service because obsolete since router refactoring

Signed-off-by: Jeremias Peier <[email protected]>
sbb-design-systems · May 13, 2024 · 2414324 · 2414324
1 parent fd8a5d3
commit 2414324
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 62 deletions.
diff --git a/tools/visual-regression-testing/diff-app/src/components/overview/overview.ts b/tools/visual-regression-testing/diff-app/src/components/overview/overview.ts
@@ -1,7 +1,7 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { screenshotService } from '../../screenshots.js';
+import { screenshots } from '../../screenshots.js';
 
 import style from './overview.scss?lit&inline';
 
@@ -27,20 +27,18 @@ export class Overview extends LitElement {
         <sbb-title level="3">Lyne visual regression comparison</sbb-title>
         <div class="app-overview">
           <sbb-card color="milk">
-            ${screenshotService.screenshots.stats}
+            ${screenshots.stats}
             <sbb-secondary-button-link
-              href="/compare/${screenshotService.screenshots.flatTestCases[0].path}"
+              href="/compare/${screenshots.flatTestCases[0].path}"
               size="s"
             >
               Start comparing
             </sbb-secondary-button-link>
           </sbb-card>
           <sbb-accordion>
-            ${screenshotService.screenshots.components.map(
+            ${screenshots.components.map(
               (screenshotComponent) => html`
-                <sbb-expansion-panel
-                  ?expanded=${screenshotService.screenshots!.components.length === 1}
-                >
+                <sbb-expansion-panel ?expanded=${screenshots!.components.length === 1}>
                   <sbb-expansion-panel-header>
                     ${screenshotComponent.name} (${screenshotComponent.stats})
                   </sbb-expansion-panel-header>

diff --git a/tools/visual-regression-testing/diff-app/src/components/test-case/test-case.ts b/tools/visual-regression-testing/diff-app/src/components/test-case/test-case.ts
@@ -1,13 +1,13 @@
 import {
-  LitElement,
-  html,
-  type TemplateResult,
   type CSSResultGroup,
+  html,
+  LitElement,
   type PropertyValues,
+  type TemplateResult,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { screenshotService, type ScreenshotTestCase } from '../../screenshots.js';
+import { screenshots, type ScreenshotTestCase } from '../../screenshots.js';
 
 import '../../../../../../src/components/button/secondary-button-link.js';
 import '../../../../../../src/components/chip.js';
@@ -38,21 +38,40 @@ export class TestCase extends LitElement {
   @property() public params?: { componentName: string; testCaseName: string };
 
   @state() private _testCase?: ScreenshotTestCase;
+  @state() private _testCaseIndex: number = -1;
   @state() private _filter: Filter = {};
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
     if (changedProperties.has('params')) {
+      // Reset
       this._filter = {};
       this.shadowRoot!.querySelector<TestCaseFilter>('app-test-case-filter')?.reset();
-      this._testCase = screenshotService.setCurrentTestCase(
+
+      // Get test case
+      this._testCaseIndex = screenshots.indexOfTestCase(
         this.params!.componentName!,
         this.params!.testCaseName!,
       );
+      if (this._testCaseIndex >= 0) {
+        this._testCase = screenshots.getByTestCaseIndex(this._testCaseIndex);
+      }
     }
   }
 
+  private _progressFraction(): number {
+    return (this._testCaseIndex + 1) / screenshots.testCaseCount;
+  }
+
+  private _next(): ScreenshotTestCase | undefined {
+    return screenshots.getByTestCaseIndex(this._testCaseIndex + 1);
+  }
+
+  private _previous(): ScreenshotTestCase | undefined {
+    return screenshots.getByTestCaseIndex(this._testCaseIndex - 1);
+  }
+
   private _viewportFilterChanged(event: CustomEvent<string>): void {
     this._filter = {
       ...this._filter,
@@ -70,10 +89,7 @@ export class TestCase extends LitElement {
   public override render(): TemplateResult {
     return html`
       <sbb-header expanded>
-        <div
-          class="app-progress"
-          style="--app-progress: ${screenshotService.progressFraction}"
-        ></div>
+        <div class="app-progress" style="--app-progress: ${this._progressFraction()}"></div>
         <div class="app-file-name-box sbb-header-shrinkable">
           <sbb-chip color="charcoal">${this.params?.componentName}</sbb-chip>
           <sbb-title level="2" visual-level="6">
@@ -84,16 +100,16 @@ export class TestCase extends LitElement {
         <div class="app-navigation-block" slot="logo">
           <sbb-header-link href="/" icon-name="house-small">Overview</sbb-header-link>
           <sbb-secondary-button-link
-            href="/compare/${screenshotService.previous?.path}"
+            href="/compare/${this._previous()?.path}"
             size="s"
             icon-name="arrow-left-small"
-            ?disabled=${!screenshotService.previous}
+            ?disabled=${!this._previous()}
           ></sbb-secondary-button-link>
           <sbb-secondary-button-link
-            href="/compare/${screenshotService.next?.path}"
+            href="/compare/${this._next()?.path}"
             size="s"
             icon-name="arrow-right-small"
-            ?disabled=${!screenshotService.next}
+            ?disabled=${!this._next()}
           ></sbb-secondary-button-link>
         </div>
       </sbb-header>

diff --git a/tools/visual-regression-testing/diff-app/src/screenshots.ts b/tools/visual-regression-testing/diff-app/src/screenshots.ts
@@ -174,45 +174,4 @@ export class Screenshots {
   }
 }
 
-export class ScreenshotService {
-  public readonly screenshots;
-  private _currentIndex: number = -1;
-
-  public get progressFraction(): number {
-    return (this._currentIndex + 1) / this.screenshots.testCaseCount;
-  }
-
-  public get current(): ScreenshotTestCase | undefined {
-    return this._current;
-  }
-  private _current?: ScreenshotTestCase;
-
-  public constructor(screenshots: Screenshots) {
-    this.screenshots = screenshots;
-    this._currentIndex = 0;
-    this._current = screenshots.getByTestCaseIndex(this._currentIndex);
-  }
-
-  public get next(): ScreenshotTestCase | undefined {
-    return this.screenshots.getByTestCaseIndex(this._currentIndex + 1);
-  }
-
-  public get previous(): ScreenshotTestCase | undefined {
-    return this.screenshots.getByTestCaseIndex(this._currentIndex - 1);
-  }
-
-  public setCurrentTestCase(
-    componentName: string,
-    testCaseName: string,
-  ): ScreenshotTestCase | undefined {
-    const testCaseIndex = this.screenshots.indexOfTestCase(componentName, testCaseName);
-
-    this._currentIndex = testCaseIndex;
-    if (testCaseIndex >= 0) {
-      this._current = this.screenshots.getByTestCaseIndex(testCaseIndex);
-      return this._current;
-    }
-  }
-}
-
-export const screenshotService = new ScreenshotService(new Screenshots(screenshotsRaw));
+export const screenshots = new Screenshots(screenshotsRaw);