test-storybook.yml

name: test-storybook
on:
  pull_request:
    types: [labeled, unlabeled, opened, synchronize, reopened]
    branches:
      - main
      - v4.0.0

concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  prepare-base-branch:
    name: Prepare base branch image snapshots
    timeout-minutes: 20
    runs-on: ubuntu-latest
    steps:
      - name: Checkout base branch
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.base.ref }}
          fetch-depth: 0
      - name: Check commit hash
        id: commit-hash
        run: echo "hash=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
      - name: Restore image snapshot from cache
        uses: actions/cache@v4
        id: cache-image-snapshots
        with:
          path: __image_snapshots__
          key: image-snapshots-${{ steps.commit-hash.outputs.hash }}
      - uses: actions/setup-node@v4
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        with:
          node-version-file: '.node-version'
          cache: yarn
      - name: Install dependencies
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        run: yarn install --immutable --inline-builds
      - name: Cache Playwright runners
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        uses: actions/cache@v4
        with:
          path: |
            /home/runner/.cache/ms-playwright/
          key: ${{ runner.os }}-playwright-runner
      - name: Install Playwright
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        run: yarn playwright install --with-deps
      - name: Build Storybook
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        run: |
          yarn build
          yarn storybook:build --quiet
      - name: Serve Storybook and run tests
        if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
        run: yarn test:image-snapshot --updateSnapshot
      - name: Upload base branch snapshots
        uses: actions/upload-artifact@v4
        with:
          name: base__image-snapshots__
          path: __image_snapshots__/

  test-storybook:
    name: Build Storybook
    timeout-minutes: 20
    runs-on: ubuntu-latest
    needs: prepare-base-branch
    steps:
      - name: Checkout branch
        uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: '.node-version'
          cache: yarn
      - name: Install dependencies
        run: yarn install --immutable --inline-builds
      - name: Cache Playwright runners
        uses: actions/cache@v4
        with:
          path: |
            /home/runner/.cache/ms-playwright/
          key: ${{ runner.os }}-playwright-runner
      - name: Install Playwright
        run: yarn playwright install --with-deps
      - name: Build Storybook
        run: |
          yarn build
          yarn storybook:build --quiet
      - name: Check label
        uses: actions/github-script@v7
        id: label-checking
        env:
          SNAPSHOT_UPDATE_LABEL: image snapshots update
        with:
          result-encoding: string
          script: |
            const { issue, repo } = context
            const { data: pull } = await github.rest.issues.get({
              issue_number: issue.number,
              owner: repo.owner,
              repo: repo.repo
            })

            const labels = pull.labels.map(({ name }) => name)

            if(labels.includes(process.env.SNAPSHOT_UPDATE_LABEL)){
              console.log(`Found "${process.env.SNAPSHOT_UPDATE_LABEL}" label, image snapshots will be updated."`)
              return 'true'
            }

            console.log(`Not fount "${process.env.SNAPSHOT_UPDATE_LABEL}" label. Compare with image snapshots of main branch.`)
            return 'false'
      - name: Load base branch image snapshots
        uses: actions/download-artifact@v4
        if: steps.label-checking.outputs.result != 'true'
        with:
          name: base__image-snapshots__
          path: __image_snapshots__/
      - name: Serve Storybook and run tests
        if: steps.label-checking.outputs.result != 'true'
        run: yarn test:image-snapshot
      - name: Serve Storybook and take new image snapshots
        if: steps.label-checking.outputs.result == 'true'
        run: yarn test:image-snapshot --updateSnapshot
      - name: Archive image snapshot diffs
        uses: actions/upload-artifact@v4
        if: failure() && steps.label-checking.outputs.result != 'true'
        with:
          path: __diff_output__/
      - name: Archive new image snapshots
        if: steps.label-checking.outputs.result == 'true'
        uses: actions/upload-artifact@v4
        with:
          name: new__image_snapshots__
          path: __image_snapshots__/