test(sbb-card, sbb-card-button, sbb-card-link): add visual spec #19149
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/ | |
| is-pr-open: | |
| runs-on: ubuntu-latest | |
| if: github.event_name == 'push' | |
| needs: [build, lint, test] | |
| outputs: | |
| is-PR: ${{ !!fromJson(steps.get_issue_number.outputs.result).number }} | |
| is-draft: ${{ fromJson(steps.get_issue_number.outputs.result).draft }} | |
| title: ${{ fromJson(steps.get_issue_number.outputs.result).title }} | |
| steps: | |
| - uses: actions/github-script@v7 | |
| id: get_issue_number | |
| with: | |
| script: | | |
| const pr = (await github.rest.repos.listPullRequestsAssociatedWithCommit({ | |
| commit_sha: context.sha, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| })).data[0]; | |
| return pr ? { | |
| number: pr.number, | |
| title: pr.title, | |
| draft: pr.draft, | |
| state: pr.state | |
| } : {}; | |
| - name: Log | |
| run: echo "Number ${number}, isDraft ${isDraft}, title '${title}', data ${data}" | |
| env: | |
| data: ${{ steps.get_issue_number.outputs.result }} | |
| number: ${{ fromJson(steps.get_issue_number.outputs.result).number }} | |
| title: ${{ fromJson(steps.get_issue_number.outputs.result).title }} | |
| isDraft: ${{ fromJson(steps.get_issue_number.outputs.result).draft }} | |
| chromatic: | |
| runs-on: ubuntu-latest | |
| if: github.event_name == 'push' && needs.is-pr-open.outputs.is-PR == 'true' && needs.is-pr-open.outputs.is-draft == 'false' | |
| needs: [is-pr-open] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version-file: .nvmrc | |
| cache: yarn | |
| - run: yarn install --frozen-lockfile --non-interactive | |
| - name: Generate chromatic stories | |
| run: yarn generate:chromatic-stories | |
| - uses: actions/github-script@v7 | |
| id: version | |
| with: | |
| script: | | |
| const sha = context.payload.pull_request?.head.sha ?? context.sha; | |
| return `${require('./package.json').version}-rev.${sha.substring(0, 10)}`; | |
| result-encoding: string | |
| - name: Create versioned storybook for chromatic | |
| run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.result }} yarn build:storybook | |
| - name: Publish to Chromatic | |
| id: chromatic-publish | |
| uses: chromaui/action@v1 | |
| with: | |
| projectToken: ${{ secrets.CHROMATIC_TOKEN }} | |
| storybookBuildDir: dist/storybook | |
| exitOnceUploaded: true | |
| exitZeroOnChanges: true | |
| zip: true | |
| onlyChanged: true | |
| externals: '**/elements/core/styles/**/*.scss' | |
| visual-regression: | |
| runs-on: ubuntu-latest | |
| if: github.event_name == 'pull_request' | |
| needs: test | |
| 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 | |
| - name: Run visual regression tests | |
| run: yarn test:visual-regression | |
| env: | |
| NODE_ENV: production | |
| - 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 | |
| - 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 |