test.yml

name: Test

on: # yamllint disable-line rule:truthy
  - push

jobs:
  # Run visual and composition tests with Chromatic
  visual-and-composition:
    name: Test Visual and Composition
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        name: Checkout repository
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v4
        name: Setup Node.js @v20
        with:
          cache: npm
          node-version: 20.x

      - run: npm ci
        name: Install dependencies

      - uses: chromaui/action@v1
        name: Publish to Chromatic
        with:
          buildScriptName: build:storybook
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

  # Run interaction and accessibility tests
  interaction-and-accessibility:
    name: Test Interactions and Accessibility
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        name: Checkout repository
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v4
        name: Setup Node.js @v20
        with:
          cache: npm
          node-version: 20.x

      - run: npm ci
        name: Install dependencies

      - run: npx playwright install --with-deps
        name: Install Playwright

      - run: npm run build:storybook --quiet
        name: Build Storybook

      - run: |
          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
          "npx http-server storybook-static --port 6006 --silent" \
          "npx wait-on tcp:6006 && npm run test:storybook"
        name: Serve Storybook and run tests

  # Run user flow tests with Cypress
  user-flow:
    name: Test User Flow
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
      matrix:
        containers: [1, 2] # Uses 2 parallel instances
    steps:
      - uses: actions/checkout@v4
        name: Checkout repository
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v4
        name: Setup Node.js @v20
        with:
          cache: npm
          node-version: 20.x

      - run: npm ci
        name: Install dependencies

        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
      - uses: cypress-io/github-action@v6
        name: Cypress run
        with:
          # Starts web server for E2E tests - replace with your own server invocation
          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
          start: npm run dev
          wait-on: "http://localhost:3000" # Waits for above
          # Records to Cypress Cloud
          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
          record: true
          parallel: true # Runs test in parallel using settings above
        env:
          # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
          # in GitHub repo → Settings → Secrets → Actions
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}