ci: Use reg-actions for visual regression testing

.github/workflows/storybook-diff.yml

@@ -0,0 +1,25 @@
+# SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+# SPDX-License-Identifier: CC0-1.0
+name: 'Compare Storybooks'
+
+on: [push, pull_request]
+
+jobs:
+  visual-testing:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm install storycap puppeteer http-server
+        working-directory: ./frontend
+      - name: Capture screenshots
+        run:
+          npx storycap http://localhost:6006 --serverCmd "npx -p @angular/cli
+          ng run capellacollab:storybook" --flat
+        working-directory: ./frontend
+      - uses: reg-viz/reg-actions@v2
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
+          image-directory-path: './frontend/__screenshots__'
+          outdated-comment-action: minimize
+          retention-days: 90

.github/workflows/storybook.yml → .github/workflows/storybook-publish.yml

@@ -1,6 +1,6 @@
 # SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
 # SPDX-License-Identifier: CC0-1.0
-name: 'Storybook'
+name: 'Publish Storybook'
 
 on:
   pull_request:
@@ -16,7 +16,7 @@ on:
       - '.github/workflows/storybook.yml'
 
 jobs:
-  chromatic:
+  deploy:
     runs-on: ubuntu-latest
     # prettier-ignore
     if:
@@ -64,7 +64,6 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: ./frontend
           storybookBuildDir: ./storybook-static
-          onlyChanged: true
       - name: Create Storybook comment (initial)
         if: github.event_name == 'pull_request'
         uses: peter-evans/create-or-update-comment@v4

frontend/.gitignore

@@ -64,3 +64,7 @@ storybook-static
 documentation.json
 
 .nx
+
+__screenshots__
+.reg
+y

frontend/.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    'storycap',
   ],
   framework: {
     name: '@storybook/angular',

frontend/.storybook/preview.ts

@@ -9,9 +9,11 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
-import type { Preview } from '@storybook/angular';
+import type { AngularRenderer, Preview } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
 import { ToastrModule } from 'ngx-toastr';
+import { DecoratorFunction } from 'storybook/internal/types';
+import { withScreenshot } from 'storycap';
 import docJson from '../documentation.json';
 import { IconModule } from '../src/app/icon.module';
 
@@ -25,6 +27,20 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    screenshot: {
+      viewports: {
+        desktop: {
+          width: 1920,
+          height: 1080,
+        },
+        mobile: {
+          width: 420,
+          height: 920,
+        },
+      },
+      fullPage: false,
+      captureBeyondViewport: false,
+    },
   },
   decorators: [
     applicationConfig({
@@ -49,6 +65,7 @@ const preview: Preview = {
         { provide: DialogRef, useValue: {} },
       ],
     }),
+    withScreenshot as DecoratorFunction<AngularRenderer>,
   ],
 };
 

frontend/Makefile

@@ -25,6 +25,10 @@ storybook:
 build-storybook:
 	ng run capellacollab:build-storybook
 
+snapshots:
+	rm -rf __screenshots__
+	npx storycap http://localhost:6006 --serverCmd "npm run storybook" --flat
+
 openapi:
 	python postprocess_openapi_schema.py
 	OPENAPI_DIR=$$(mktemp -d)

frontend/angular.json

@@ -163,8 +163,6 @@
           "builder": "@storybook/angular:build-storybook",
           "options": {
             "configDir": ".storybook",
-            "webpackStatsJson": true,
-
             "browserTarget": "capellacollab:build:storybook",
             "compodoc": true,
             "compodocArgs": ["-e", "json", "-d", "."],