🧪 Add Storybook tests to the CI (#4437)

* Add `@storybook/test-runner`

* Run pages tests only

* Cache dependencies in another job

* Add the storybook-test job

* Fix the cache hit check

* Fix storybook tests

.github/workflows/CI.yml

@@ -5,7 +5,37 @@ on:
   pull_request:
 
 jobs:
+  install:
+    timeout-minutes: 10
+    strategy:
+      matrix: { node: ["18.x"], os: [ubuntu-latest] }
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - if: ${{ steps.yarn-cache.outputs.cache-hit != 'true' }}
+        name: Install dependencies
+        run: yarn --immutable
+
   test:
+    needs: install
     timeout-minutes: 60
     strategy:
       matrix: { node: ["18.x"], os: [ubuntu-latest] }
@@ -18,6 +48,17 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install dependencies
         run: yarn --immutable
 
@@ -30,3 +71,65 @@ jobs:
       - name: Run tests
         run: node --max_old_space_size=7000 --expose-gc $(yarn bin jest) --logHeapUsage --silent
         working-directory: packages/ui
+
+  storybook-test:
+    needs: install
+    timeout-minutes: 60
+    strategy:
+      matrix: { node: ["18.x"], os: [ubuntu-latest] }
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Get the Storybook preview deployment url
+        run: |
+          URL=$( \
+            vercel list \
+              --meta githubCommitSha=$COMMIT_SHA \
+              --token=${{ secrets.VERCEL_STORYBOOK_TOKEN }} \
+            2>&1 | tail -n 2 | head -n 1 | awk '{print $2}' \
+          )
+          echo "VERCEL_DEPLOYMENT_URL=$URL" >> "$GITHUB_ENV"
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_STORYBOOK_PROJECT_ID }}
+          COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - name: Wait for the deployment to complete
+        run: |
+          vercel inspect "${{ env.VERCEL_DEPLOYMENT_URL }}" \
+            --wait --timeout 10m \
+            --token=${{ secrets.VERCEL_STORYBOOK_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_STORYBOOK_PROJECT_ID }}
+
+      - name: Run Storybook tests
+        run: yarn workspace @joystream/pioneer test-storybook
+        env:
+          TARGET_URL: ${{ env.VERCEL_DEPLOYMENT_URL }}

packages/ui/package.json

@@ -19,6 +19,7 @@
     "storybook": "storybook dev -p 6006",
     "i18n:json2csv": "node ./src/services/i18n/utils/converter.js --input=\"./src/services/i18n/dict\" --output=\"./src/services/i18n/utils/csv\"",
     "i18n:csv2json": "node ./src/services/i18n/utils/converter.js --from=csv --input=\"./src/services/i18n/utils/csv\" --output=\"./src/services/i18n/dict\" && yarn prettier \"./src/services/i18n/dict/**/*.json\" --print-width 20 --write --loglevel warn",
+    "test-storybook": "test-storybook",
     "test": "jest"
   },
   "dependencies": {
@@ -101,6 +102,7 @@
     "@storybook/addon-links": "^7.0.18",
     "@storybook/react": "^7.0.18",
     "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/test-runner": "^0.10.0",
     "@storybook/theming": "^7.0.18",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",

packages/ui/test-runner-jest.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { getJestConfig } = require('@storybook/test-runner')
+
+module.exports = {
+  // The default configuration comes from @storybook/test-runner
+  ...getJestConfig(),
+
+  /** Add your own overrides below
+   * @see https://jestjs.io/docs/configuration
+   */
+  roots: undefined,
+  testMatch: ['<rootDir>/src/app/pages/*/*.stories.tsx'],
+}