Experiment with chromatic to streamline visual UI testing

.github/workflows/chromatic.yml

@@ -0,0 +1,30 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./web
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm install --include=dev
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          workingDir: web
+          autoAcceptChanges: webv2
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

web/package-lock.json

@@ -71,6 +71,7 @@
         "@typescript-eslint/parser": "5.10.2",
         "addon-screen-reader": "^1.8.6",
         "babel-loader": "^8.2.4",
+        "chromatic": "^6.5.4",
         "css-loader": "^5.2.7",
         "eslint": "8.8.0",
         "eslint-config-airbnb": "19.0.4",
@@ -14435,6 +14436,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromatic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.4.tgz",
+      "integrity": "sha512-/yunI/+rdc56C6x0IhpPmdfK/DRMOvQ2hoNyAe6uuU9rdWRoAH72lYatr2NcpdsOdHGOcV5DKgIaKgVdPfUk1w==",
+      "dev": true,
+      "bin": {
+        "chroma": "bin/main.cjs",
+        "chromatic": "bin/main.cjs",
+        "chromatic-cli": "bin/main.cjs"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -43456,6 +43468,12 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "chromatic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.4.tgz",
+      "integrity": "sha512-/yunI/+rdc56C6x0IhpPmdfK/DRMOvQ2hoNyAe6uuU9rdWRoAH72lYatr2NcpdsOdHGOcV5DKgIaKgVdPfUk1w==",
+      "dev": true
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",

web/package.json

@@ -75,6 +75,7 @@
     "@typescript-eslint/parser": "5.10.2",
     "addon-screen-reader": "^1.8.6",
     "babel-loader": "^8.2.4",
+    "chromatic": "^6.5.4",
     "css-loader": "^5.2.7",
     "eslint": "8.8.0",
     "eslint-config-airbnb": "19.0.4",
@@ -100,4 +101,4 @@
     "typescript": "4.5.5",
     "yaml": "^2.0.1"
   }
-}
+}