ci: Use reg-actions for visual regression testing

.github/workflows/storybook.yml

@@ -16,7 +16,27 @@ 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 --serverCmd "npx http-server storybook-static -p 9001"
+          http://localhost:9001
+        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 +74,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/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", "."],