👷 [#31] -- add running storybook tests to CI pipeline

.github/workflows/ci.yml

@@ -101,12 +101,47 @@ jobs:
       - name: Run ESLint
         run: yarn test:lint
 
+  tests:
+    name: Run Storybook tests
+    runs-on: ubuntu-latest
+    needs:
+      - storybook
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      # Reference: https://storybook.js.org/docs/6.5/react/writing-tests/test-runner#run-against-non-deployed-storybooks
+      - name: Set up test environment
+        run: |
+          npx playwright install --with-deps
+
+      - name: Download storybook artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: github-pages
+          path: storybook-static
+
+      - name: Serve storybook and run tests
+        run: |
+          cd storybook-static/ && tar -xvf artifact.tar && cd ..
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --quiet" \
+            "npx wait-on -l http://127.0.0.1:6006 && yarn test:storybook"
+
   deploy:
     runs-on: ubuntu-latest
     needs:
       - storybook
       - prettier
       - eslint
+      - tests
     # do not run in forks & only publish main branch
     if: github.ref_name == 'main' && github.repository_owner == 'open-formulieren'
 
@@ -135,6 +170,7 @@ jobs:
       - build-package
       - prettier
       - eslint
+      - tests
 
     # do not publish in forks or non-tag pushes
     if: startsWith(github.ref, 'refs/tags/') && github.repository_owner == 'open-formulieren'