Add Chromatic visual regression tests for UI components

chromaui · Dec 22, 2023 · 3f59dc0 · 3f59dc0
1 parent ec8b30a
commit 3f59dc0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,24 @@
+# Workflow name
+name: "Chromatic Deployment"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/angular/en/deploy/ to obtain it
+          projectToken: t1lqdxy63up
+          token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "@storybook/test-runner": "^0.16.0",
     "@types/jasmine": "~4.3.0",
     "@types/jest": "^29.5.1",
+    "chromatic": "^10.2.0",
     "jasmine-core": "~4.5.0",
     "jest": "^29.5.0",
     "jest-preset-angular": "^13.0.1",