test-stories.yaml

# Chromatic action from https://www.chromatic.com/docs/github-actions

# Publish to Chromatic for snapshot tests then use storybook/test-runner to test stories
name: test stories

on:
  pull_request:
    types:
      - opened
      - synchronize
      - ready_for_review

  # When Changesets opens a PR it does not trigger GitHub actions,
  # because its token does not have permission to. This is a hack
  # to allow one of us to trigger GitHub actions for a changesets PR
  # by enabling automerge on the PR.
  pull_request_target:
    types:
      - auto_merge_enabled
    branches:
      - main # the target branch of the PR
    paths:
      - "**/CHANGELOG.md" # only changesets releases touch changelogs

env:
  ARTIFACT_NAME: artifact--storybook-build

jobs:
  build-storybook:
    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
      - uses: ./.github/actions/setup
      - run: yarn storybook:build --webpack-stats-json
      - name: Upload Storybook build as artifact
        uses: actions/upload-artifact@v3
        with:
          name: ${{ env.ARTIFACT_NAME }}
          path: "./storybook/public"
          retention-days: 1

  storybook-tests-1:
    name: "test-storybook"
    needs: build-storybook
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup
      - name: Install Playwright
        run: npx playwright install --with-deps
      - uses: ./.github/actions/run-storybook
        with:
          artifactName: ${{ env.ARTIFACT_NAME }}
      - name: Storybook tests (1/3)
        run: yarn test:storybook --shard 1/3

  storybook-tests-2:
    name: "test-storybook"
    needs: build-storybook
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup
      - name: Install Playwright
        run: npx playwright install --with-deps
      - uses: ./.github/actions/run-storybook
        with:
          artifactName: ${{ env.ARTIFACT_NAME }}
      - name: Storybook tests (2/3)
        run: yarn test:storybook --shard 2/3

  storybook-tests-3:
    name: "test-storybook"
    needs: build-storybook
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup
      - name: Install Playwright
        run: npx playwright install --with-deps
      - uses: ./.github/actions/run-storybook
        with:
          artifactName: ${{ env.ARTIFACT_NAME }}
      - name: Storybook tests (3/3)
        run: yarn test:storybook --shard 3/3

  chromatic:
    needs: build-storybook
    runs-on: ubuntu-latest
    outputs:
      storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Download Storybook build artifact
        id: download
        uses: actions/download-artifact@v3
        with:
          name: ${{ env.ARTIFACT_NAME }}
          path: "./storybook/public"
      - id: publishChromatic
        name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          token: ${{ github.token }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: "./storybook/public"
          onlyChanged: "!(main)"
          externals: |
            [
              "**/!(*.module).scss",
              "packages/button/src/Button/*.scss",
              "packages/component-library/components/Spacing/Base.module.scss"
            ]

  update-branch-preview:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    needs: chromatic
    env:
      COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
    steps:
      - uses: actions/checkout@v3
        with:
          ref: ${{ env.COMMIT_SHA }}
      - name: Get commit message
        id: getCommitMessage
        run: echo "commitMessage=$(git show -s --format=%s)" >> "$GITHUB_OUTPUT"
      - uses: ./.github/actions/branch-preview
        with:
          prNumber: ${{ github.event.pull_request.number }}
          commitSha: ${{ env.COMMIT_SHA }}
          commitMessage: ${{ steps.getCommitMessage.outputs.commitMessage }}
          storybookUrl: ${{ needs.chromatic.outputs.storybookUrl }}