Skip to content

Commit

Permalink
ci: Use reg-actions for visual regression testing
Browse files Browse the repository at this point in the history
MoritzWeber0 committed Sep 14, 2024

Verified

This commit was signed with the committer’s verified signature.
MoritzWeber0 Moritz Weber
1 parent 62eb891 commit 20d2f1e
Showing 9 changed files with 17,132 additions and 12,745 deletions.
23 changes: 23 additions & 0 deletions .github/workflows/storybook-diff.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# 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"
working-directory: ./frontend
- uses: reg-viz/reg-actions@v2
with:
github-token: '${{ secrets.GITHUB_TOKEN }}'
image-directory-path: './frontend/__screenshots__'
outdated-comment-action: minimize
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -64,3 +64,5 @@ storybook-static
documentation.json

.nx

__screenshots__
1 change: 1 addition & 0 deletions frontend/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ const config: StorybookConfig = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storycap',
],
framework: {
name: '@storybook/angular',
18 changes: 17 additions & 1 deletion frontend/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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>,
],
};

2 changes: 0 additions & 2 deletions frontend/angular.json
Original file line number Diff line number Diff line change
@@ -163,8 +163,6 @@
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"webpackStatsJson": true,

"browserTarget": "capellacollab:build:storybook",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
Loading

0 comments on commit 20d2f1e

Please sign in to comment.