refactor: rename diff-app to visual-regression-app

Signed-off-by: Jeremias Peier <[email protected]>

.github/workflows/continuous-integration-secure.yml

@@ -127,8 +127,8 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
 
-      - name: Build diff-app
-        run: yarn build:diff-app
+      - name: Build visual-regression-app
+        run: yarn build:visual-regression-app
 
       - name: Create check if changed
         uses: actions/github-script@v7

eslint.config.js

@@ -48,7 +48,7 @@ export default [
   ),
   eslintPluginLyne.default.configs.recommended,
   {
-    files: ['tools/visual-regression-testing/diff-app/**/*.ts'],
+    files: ['src/visual-regression-app/**/*.ts'],
     rules: {
       'lyne/custom-element-class-name-rule': 'off',
       'import-x/namespace': 'off',

package.json

@@ -28,7 +28,7 @@
     "build:react:production": "vite build --config src/react/vite.config.ts",
     "build:react:development": "NODE_ENV=development vite build --mode development --config src/react/vite.config.ts",
     "build:storybook": "storybook build --quiet --output-dir dist/storybook --stats-json",
-    "build:diff-app": "vite build --config tools/visual-regression-testing/diff-app/vite.config.ts",
+    "build:visual-regression-app": "vite build --config src/visual-regression-app/vite.config.ts",
     "build": "npm-run-all --sequential build:components build:react build:storybook",
     "docs": "npm-run-all --sequential docs:manifest docs:to-md",
     "docs:manifest": "custom-elements-manifest analyze --config tools/manifest/custom-elements-manifest.config.js",
@@ -48,8 +48,9 @@
     "lint:tsc": "npm-run-all --sequential lint:tsc:*",
     "lint:tsc:components": "tsc --noEmit --project src/components/tsconfig.json",
     "lint:tsc:components-spec": "tsc --noEmit --project src/components/tsconfig.spec.json",
+    "lint:tsc:visual-regression-app": "tsc --noEmit --project src/visual-regression-app/tsconfig.json",
     "start": "storybook dev -p 6006",
-    "start:diff-app": "vite --config tools/visual-regression-testing/diff-app/vite.config.ts",
+    "start:visual-regression-app": "vite --config src/visual-regression-app/vite.config.ts",
     "test": "wtr --coverage",
     "test:snapshot": "yarn test:csr --ci --update-snapshots",
     "test:csr": "wtr --group default",

tools/visual-regression-testing/diff-app/interfaces.ts → src/visual-regression-app/interfaces.ts

@@ -5,7 +5,7 @@ export interface FailedFiles {
   diffFile: string;
   baselineFile: string;
   isNew: boolean;
-  vierports: string;
+  viewport: string;
 }
 
 export type ScreenshotMap = Record<string, Record<string, Record<string, FailedFiles[]>>>;

tools/visual-regression-testing/diff-app/src/components/overview/overview.scss → src/visual-regression-app/src/components/overview/overview.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../src/components/core/styles/index' as sbb;
+@use '../../../../components/core/styles/index' as sbb;
 
 @include sbb.box-sizing;
 

tools/visual-regression-testing/diff-app/src/components/overview/overview.ts → src/visual-regression-app/src/components/overview/overview.ts

@@ -5,14 +5,14 @@ import { screenshots } from '../../screenshots.js';
 
 import style from './overview.scss?lit&inline';
 
-import '../../../../../../src/components/accordion.js';
-import '../../../../../../src/components/button/secondary-button-link.js';
-import '../../../../../../src/components/card.js';
-import '../../../../../../src/components/container.js';
-import '../../../../../../src/components/expansion-panel.js';
-import '../../../../../../src/components/link-list.js';
-import '../../../../../../src/components/link/block-link.js';
-import '../../../../../../src/components/title.js';
+import '../../../../components/accordion.js';
+import '../../../../components/button/secondary-button-link.js';
+import '../../../../components/card.js';
+import '../../../../components/container.js';
+import '../../../../components/expansion-panel.js';
+import '../../../../components/link-list.js';
+import '../../../../components/link/block-link.js';
+import '../../../../components/title.js';
 
 /**
  * Overview over all failed or new tests

tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss → src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../../../src/components/core/styles/index' as sbb;
+@use '../../../../../../components/core/styles/index' as sbb;
 
 @include sbb.box-sizing;
 

tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts → src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts

@@ -1,13 +1,13 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbRadioButtonGroupElement } from '../../../../../../../../src/components/radio-button/radio-button-group/radio-button-group.js';
-import type { ScreenshotFailedFiles } from '../../../../screenshots.js';
+import type { SbbRadioButtonGroupElement } from '../../../../../../components/radio-button/radio-button-group/radio-button-group.js';
+import type { FailedFiles } from '../../../../../interfaces.js';
 
 import style from './fullscreen-diff.scss?lit&inline';
 
-import '../../../../../../../../src/components/chip.js';
-import '../../../../../../../../src/components/radio-button.js';
+import '../../../../../../components/chip.js';
+import '../../../../../../components/radio-button.js';
 
 /**
  * Displays two images in fullscreen to overlay them.
@@ -16,7 +16,7 @@ import '../../../../../../../../src/components/radio-button.js';
 export class FullscreenDiff extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  @property() public failedFile?: ScreenshotFailedFiles;
+  @property() public failedFile?: FailedFiles;
 
   @property() public selectedFile: 'baselineFile' | 'failedFile' | 'diffFile' = 'failedFile';
 

tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.scss → src/visual-regression-app/src/components/test-case/image-diff/image-diff.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../../src/components/core/styles/index' as sbb;
+@use '../../../../../components/core/styles/index' as sbb;
 
 @include sbb.box-sizing;
 

tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.ts → src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts

@@ -1,16 +1,16 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { SbbOverlayElement } from '../../../../../../../src/components/overlay/overlay.js';
-import type { SbbToggleCheckElement } from '../../../../../../../src/components/toggle-check/toggle-check.js';
-import type { ScreenshotFailedFiles } from '../../../screenshots.js';
+import { SbbOverlayElement } from '../../../../../components/overlay/overlay.js';
+import type { SbbToggleCheckElement } from '../../../../../components/toggle-check/toggle-check.js';
+import type { FailedFiles } from '../../../../interfaces.js';
 
 import style from './image-diff.scss?lit&inline';
 
-import '../../../../../../../src/components/chip.js';
-import '../../../../../../../src/components/status.js';
-import '../../../../../../../src/components/overlay.js';
-import '../../../../../../../src/components/toggle-check.js';
+import '../../../../../components/chip.js';
+import '../../../../../components/status.js';
+import '../../../../../components/overlay.js';
+import '../../../../../components/toggle-check.js';
 
 import './fullscreen-diff/fullscreen-diff.js';
 
@@ -24,7 +24,7 @@ const getImageDimension = (img: HTMLImageElement): string =>
 export class ImageDiff extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  @property() public failedFile?: ScreenshotFailedFiles;
+  @property() public failedFile?: FailedFiles;
 
   @state() private _baselineDimension?: string;
   @state() private _failedDimension?: string;

tools/visual-regression-testing/diff-app/src/components/test-case/test-case-filter/test-case-filter.scss → src/visual-regression-app/src/components/test-case/test-case-filter/test-case-filter.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../../src/components/core/styles/index' as sbb;
+@use '../../../../../components/core/styles/index' as sbb;
 
 @include sbb.box-sizing;
 

tools/visual-regression-testing/diff-app/src/components/test-case/test-case-filter/test-case-filter.ts → src/visual-regression-app/src/components/test-case/test-case-filter/test-case-filter.ts

@@ -1,10 +1,10 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbTagElement } from '../../../../../../../src/components/tag/tag/tag.js';
+import type { SbbTagElement } from '../../../../../components/tag/tag/tag.js';
 import { type ScreenshotTestCase } from '../../../screenshots.js';
-import '../../../../../../../src/components/title.js';
-import '../../../../../../../src/components/tag.js';
+import '../../../../../components/title.js';
+import '../../../../../components/tag.js';
 
 import style from './test-case-filter.scss?lit&inline';
 

tools/visual-regression-testing/diff-app/src/components/test-case/test-case.scss → src/visual-regression-app/src/components/test-case/test-case.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../src/components/core/styles/index' as sbb;
+@use '../../../../components/core/styles/index' as sbb;
 
 @include sbb.box-sizing;
 

tools/visual-regression-testing/diff-app/src/components/test-case/test-case.ts → src/visual-regression-app/src/components/test-case/test-case.ts

@@ -9,12 +9,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import { screenshots, type ScreenshotTestCase } from '../../screenshots.js';
 
-import '../../../../../../src/components/button/secondary-button-link.js';
-import '../../../../../../src/components/chip.js';
-import '../../../../../../src/components/container.js';
-import '../../../../../../src/components/header.js';
-import '../../../../../../src/components/notification.js';
-import '../../../../../../src/components/title.js';
+import '../../../../components/button/secondary-button-link.js';
+import '../../../../components/chip.js';
+import '../../../../components/container.js';
+import '../../../../components/header.js';
+import '../../../../components/notification.js';
+import '../../../../components/title.js';
 
 import type { TestCaseFilter } from './test-case-filter/test-case-filter.js';
 import style from './test-case.scss?lit&inline';

tools/visual-regression-testing/diff-app/src/main.ts → src/visual-regression-app/src/main.ts

@@ -2,7 +2,7 @@ import { Router } from '@lit-labs/router';
 import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import '../../../../src/components/core/styles/standard-theme.scss';
+import '../../components/core/styles/standard-theme.scss';
 
 /**
  * Main app containing the router outlet.

src/visual-regression-app/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../..",
+    "baseUrl": "."
+  },
+  "include": ["./**/*.ts", "./src/vite-env.d.ts"],
+  "exclude": ["vite.config.ts"]
+}

tools/visual-regression-testing/diff-app/vite.config.ts → src/visual-regression-app/vite.config.ts

@@ -10,16 +10,16 @@ import {
   type UserConfig,
 } from 'vite';
 
-import rootConfig from '../../../vite.config.js';
-import { distDir } from '../../vite/index.js';
+import { distDir } from '../../tools/vite/index.js';
+import rootConfig from '../../vite.config.js';
 
 import type { FailedFiles } from './interfaces.js';
 
 const packageRoot = new URL('.', import.meta.url);
 const screenshotsDir = new URL(`./screenshots/`, distDir);
 
 const extractHierarchicalMap = (
-  screenshots: Map<string, FailedFiles[]>,
+  screenshots: Map<string, Omit<FailedFiles, 'viewport'>[]>,
 ): Map<string, Map<string, Map<string, FailedFiles[]>>> => {
   const map = new Map<string, Map<string, Map<string, FailedFiles[]>>>();
 
@@ -42,9 +42,10 @@ const extractHierarchicalMap = (
 
     testCaseMap.set(
       viewport,
-      failedFiles.map((failedFile) => ({ ...failedFile, viewport })),
+      failedFiles.map((failedFile) => ({ ...failedFile, viewport }) satisfies FailedFiles),
     );
   });
+
   return map;
 };
 
@@ -191,7 +192,7 @@ export default defineConfig(() =>
     root: packageRoot.pathname,
     plugins: [prepareScreenshots()],
     build: {
-      outDir: new URL(`./diff-app/`, distDir).pathname,
+      outDir: new URL(`./visual-regression-app/`, distDir).pathname,
       emptyOutDir: true,
     },
   }),

tools/visual-regression-testing/diff-app.Dockerfile

@@ -4,7 +4,7 @@ LABEL org.opencontainers.image.source=https://github.com/lyne-design-system/lyne
 
 # This is currently the same config file as for baseline. Separate into separate configs, if this changes.
 COPY ./tools/visual-regression-testing/baseline.nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./dist/diff-app /usr/share/nginx/html
+COPY ./dist/visual-regression-app /usr/share/nginx/html
 
 COPY --chmod=555 ./tools/visual-regression-testing/etag-map-generation.sh /usr/share/nginx/etag-map-generation.sh