ci.yml

name: ci
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  merge_group:
    types: [checks_requested]

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

jobs:
  dedupe:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - name: Run yarn dedupe
        run: yarn dedupe --check

  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - name: Check formatting of project files
        run: yarn format:diff

  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - name: Lint JavaScript files
        run: yarn lint
      - name: Lint Sass files
        run: yarn lint:styles

  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
        if: github.event_name != 'merge_group'
        id: cache
        with:
          path: |
            node_modules
            */**/node_modules
          key:
            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
            'packages/**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - name: Build project
        run: yarn build
      - name: Check generated styles
        run: |
          yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'
      - name: Run tests
        run: yarn test --ci

  e2e:
    name: 'test:e2e'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
        if: github.event_name != 'merge_group'
        id: cache
        with:
          path: |
            node_modules
            */**/node_modules
          key:
            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
            'packages/**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
        id: filter
        with:
          filters: |
            e2e:
              - 'e2e/**'
              - 'packages/icons/**'
              - 'packages/icons-react/**'
              - 'packages/icons-vue/**'
              - 'packages/pictograms/**'
              - 'packages/pictograms-react/**'
              - 'packages/icon-build-helpers/**'
      - name: Build project
        if: ${{ steps.filter.outputs.e2e == 'true' }}
        run: yarn build
      - name: Run e2e tests
        if: ${{ steps.filter.outputs.e2e == 'true' }}
        run: yarn test:e2e

  vrt-runner:
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3, 4]
        shardTotal: [4]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
        if: github.event_name != 'merge_group'
        id: cache
        with:
          path: |
            node_modules
            */**/node_modules
          key:
            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
            'packages/**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - name: Install browsers
        run: yarn playwright install --with-deps
      - name: Build project
        run: yarn build
      - name: Build storybook
        run: yarn workspace @carbon/react storybook:build
      - name: Run storybook
        id: storybook
        run: |
          npx serve -l 3000 packages/react/storybook-static &
          pid=$!
          echo "pid=$pid" >> $GITHUB_OUTPUT
      - uses: ./actions/wait-for-it
        with:
          URL: 'http://localhost:3000'
        timeout-minutes: 3
      - name: Run VRT
        if: github.repository == 'carbon-design-system/carbon'
        env:
          PERCY_TOKEN: c9a21a3fde4fda0a0f822d633426ab26e2ab2c1cba55221d342d4047744c8c24
          PERCY_PARALLEL_TOTAL: 4
        run: |
          yarn percy exec --parallel -- yarn playwright test --project chromium --grep @vrt --shard="${{ matrix.shardIndex }}/${{ matrix.shardTotal }}"
      - name: Stop storybook
        run: kill ${{ steps.storybook.outputs.pid }}
      - name: Upload blob report to GitHub Actions Artifacts
        if: ${{ !cancelled() }}
        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a #4.3.6
        with:
          name: playwright-vrt-blob-report-${{ matrix.shardIndex }}
          path: blob-report
          retention-days: 1

  vrt:
    if: ${{ always() }}
    runs-on: ubuntu-latest
    needs: vrt-runner
    steps:
      - name: Check VRT Runner job status
        if: ${{ needs.vrt-runner.result != 'success' }}
        run: exit 1

  avt-runner:
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3, 4]
        shardTotal: [4]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
        if: github.event_name != 'merge_group'
        id: cache
        with:
          path: |
            node_modules
            */**/node_modules
          key:
            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
            'packages/**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache
      - name: Install browsers
        run: yarn playwright install --with-deps
      - name: Build project
        run: yarn build
      - name: Build storybook
        run: yarn workspace @carbon/react storybook:build
      - name: Run storybook
        id: storybook
        run: |
          npx serve -l 3000 packages/react/storybook-static &
          pid=$!
          echo "pid=$pid" >> $GITHUB_OUTPUT
      - uses: ./actions/wait-for-it
        with:
          URL: 'http://localhost:3000'
        timeout-minutes: 3
      - name: Run AVT
        if: github.repository == 'carbon-design-system/carbon'
        run: |
          yarn playwright test --project chromium --grep @avt --shard="${{ matrix.shardIndex }}/${{ matrix.shardTotal }}"
      - name: Stop storybook
        run: kill ${{ steps.storybook.outputs.pid }}
      - name: Upload blob report to GitHub Actions Artifacts
        if: ${{ !cancelled() }}
        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a #4.3.6
        with:
          name: playwright-avt-blob-report-${{ matrix.shardIndex }}
          path: blob-report
          retention-days: 1

  avt:
    if: ${{ always() }}
    runs-on: ubuntu-latest
    needs: avt-runner
    steps:
      - name: Check AVT Runner job status
        if: ${{ needs.avt-runner.result != 'success' }}
        run: exit 1

  merge-playwright-reports:
    # Merge reports after *-runner jobs, even if some shards have failed
    if: ${{ !cancelled() }}
    needs: [vrt-runner, avt-runner]

    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: Use Node.js 20.x
        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
        with:
          node-version: '20.x'
      - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
        if: github.event_name != 'merge_group'
        id: cache
        with:
          path: |
            node_modules
            */**/node_modules
          key:
            ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
            'packages/**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --immutable --immutable-cache

      - name: Download vrt blob reports from GitHub Actions Artifacts
        uses: actions/download-artifact@v4
        with:
          path: all-playwright-vrt-blob-reports
          pattern: playwright-vrt-blob-report-*
          merge-multiple: true

      - name: Merge vrt reports into HTML Report
        run:
          npx playwright merge-reports --reporter html
          ./all-playwright-vrt-blob-reports

      - name: Upload vrt HTML report
        uses: actions/upload-artifact@v4
        with:
          name: html-playwright-vrt-report--attempt-${{ github.run_attempt }}
          path: playwright-vrt-report
          retention-days: 14

      - name: Download avt blob reports from GitHub Actions Artifacts
        uses: actions/download-artifact@v4
        with:
          path: all-playwright-avt-blob-reports
          pattern: playwright-avt-blob-report-*
          merge-multiple: true

      - name: Merge avt reports into HTML Report
        run:
          npx playwright merge-reports --reporter html
          ./all-playwright-avt-blob-reports

      - name: Upload avt HTML report
        uses: actions/upload-artifact@v4
        with:
          name: html-playwright-avt-report--attempt-${{ github.run_attempt }}
          path: playwright-avt-report
          retention-days: 14