fix: add visual test cases #20210
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Continuous Integration | |
| on: [push, pull_request] | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} | |
| cancel-in-progress: true | |
| permissions: read-all | |
| env: | |
| IMAGE_REPO_VISUAL_REGRESSION: ghcr.io/${{ github.repository }}/visual-regression | |
| jobs: | |
| lint: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Run eslint | |
| run: yarn lint | |
| integrity: | |
| runs-on: ubuntu-latest | |
| needs: lint | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: 'Integrity: Verify workspace integrity' | |
| run: yarn integrity | |
| - name: 'Integrity: Assert no changes (run `yarn integrity` if this fails)' | |
| run: git diff --exit-code | |
| test: | |
| runs-on: ubuntu-latest | |
| needs: lint | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Install browser dependencies | |
| run: yarn playwright install-deps | |
| - name: Run tests | |
| run: yarn test | |
| env: | |
| NODE_ENV: production | |
| - name: Assert no new snapshots (run `yarn test --ci` if this fails) | |
| run: git diff --exit-code | |
| - name: Store coverage | |
| if: github.event_name == 'pull_request' | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: coverage | |
| path: coverage/ | |
| build: | |
| runs-on: ubuntu-latest | |
| needs: lint | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Run build | |
| run: yarn build | |
| env: | |
| STORYBOOK_COMPONENTS_VERSION: ${{ github.event.pull_request.head.sha || github.sha }} | |
| - name: Store storybook artifacts | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: storybook | |
| path: dist/storybook/ | |
| visual-regression: | |
| runs-on: ubuntu-latest | |
| if: github.event_name == 'pull_request' | |
| needs: lint | |
| services: | |
| visual-regression: | |
| image: ghcr.io/${{ github.repository }}/visual-regression:baseline | |
| ports: | |
| - 8050:8080 | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Install browser dependencies | |
| run: yarn playwright install-deps | |
| # This step must not fail, so we define a fallback, which will succeed, even if | |
| # the visual regression tests failed. This will be evaluated in the secure workflow. | |
| - name: Run visual regression tests | |
| run: yarn test:visual-regression || true | |
| env: | |
| NODE_ENV: production | |
| RELEVANT_SHA: ${{ github.event.pull_request.head.sha || github.sha }} | |
| - name: Prepare failed screenshot artifacts | |
| run: yarn ts-hooks tools/visual-regression-testing/prepare-failed-screenshots-artifact.ts | |
| - name: Store visual regression output | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: visual-regression-screenshots | |
| path: dist/screenshots-artifact/ | |
| visual-regression-baseline: | |
| runs-on: ubuntu-latest | |
| permissions: | |
| packages: write | |
| if: github.event_name == 'push' && github.ref == 'refs/heads/main' | |
| needs: lint | |
| services: | |
| visual-regression: | |
| image: ghcr.io/${{ github.repository }}/visual-regression:baseline | |
| ports: | |
| - 8080:8050 | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Install browser dependencies | |
| run: yarn playwright install-deps | |
| - name: Run visual regression baseline generation | |
| run: yarn test:visual-regression --update-visual-baseline | |
| env: | |
| NODE_ENV: production | |
| RELEVANT_SHA: ${{ github.sha }} | |
| - name: Build visual-regression-app | |
| run: yarn build:visual-regression-app | |
| - name: Build and push visual regression baseline | |
| run: | | |
| echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin | |
| docker build \ | |
| --file tools/visual-regression-testing/Dockerfile \ | |
| --tag $IMAGE_REPO_VISUAL_REGRESSION:baseline \ | |
| . | |
| docker push $IMAGE_REPO_VISUAL_REGRESSION:baseline | |
| env: | |
| DOCKER_BUILDKIT: 1 |