ci: Use reg-actions for visual regression testing

.github/workflows/storybook.yml

@@ -16,7 +16,26 @@ on:
       - '.github/workflows/storybook.yml'
 
 jobs:
-  chromatic:
+  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: Build Storybook
+        run: npx -p @angular/cli ng run capellacollab:build-storybook
+        working-directory: ./frontend
+      - name: Capture screenshots
+        run:
+          npx storycap http://localhost:6006 --serverCmd "npx -p @angular/cli ng run capellacollab:storybook" --verbose
+        working-directory: ./frontend
+      - uses: reg-viz/reg-actions@v2
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
+          image-directory-path: './frontend/__screenshots__'
+
+  deploy:
     runs-on: ubuntu-latest
     # prettier-ignore
     if:
@@ -54,16 +73,12 @@ jobs:
       - name: Install dependencies
         run: npm ci
         working-directory: ./frontend
-      - name: Build Storybook
-        run: npx -p @angular/cli ng run capellacollab:build-storybook
-        working-directory: ./frontend
       - name: Run Chromatic
         id: chromatic
         uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: ./frontend
-          storybookBuildDir: ./storybook-static
           onlyChanged: true
       - name: Create Storybook comment (initial)
         if: github.event_name == 'pull_request'

frontend/.gitignore

@@ -64,3 +64,5 @@ storybook-static
 documentation.json
 
 .nx
+
+__screenshots__

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,19 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    screenshot: {
+      viewports: {
+        desktop: {
+          width: 1920,
+          height: 1080,
+        },
+        mobile: {
+          width: 420,
+          height: 920,
+        },
+      },
+      fullPage: false,
+    },
   },
   decorators: [
     applicationConfig({
@@ -49,6 +64,7 @@ const preview: Preview = {
         { provide: DialogRef, useValue: {} },
       ],
     }),
+    withScreenshot as DecoratorFunction<AngularRenderer>,
   ],
 };
 

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", "."],