visual-regression.yml

name: visual-regression

on:
  push:
    branches:
      - '**'
      - '!**--skip-ci'
      - '!**--visual-reports'
      - '!wip/**'
      - '!experiments/**'
      - '!release'
      - '!portal'
      - '!beta'
      - '!alpha'
  pull_request:
    branches:
      - 'portal'
      - 'release'
      - 'beta'
      - 'alpha'
      - 'next'
    types: [opened]

concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

permissions:
  contents: read
  pull-requests: read

env:
  GH_EMAIL: ${{ secrets.GH_EMAIL }}
  GH_NAME: ${{ secrets.GH_NAME }}
  GH_TOKEN: ${{ secrets.GH_TOKEN }}
  GITHUB_TOKEN: ${{ github.token }}
  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
  FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
  FIGMA_ICONS_FILE: ${{ secrets.FIGMA_ICONS_FILE }}
  ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
  ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
  ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
  ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
  RUN_POST_BUILD: ${{ startsWith(github.ref, 'refs/heads/main') || startsWith(github.ref, 'refs/heads/v') }}
  RUN_VISUAL_TEST: ${{ !startsWith(github.ref, 'refs/heads/icon') }}

jobs:
  visual-regression:
    name: Run visual-regression tests

    runs-on: macos-26

    timeout-minutes: 40

    steps:
      - name: Git checkout
        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
        with:
          persist-credentials: false

      - name: Use Node.js
        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
        with:
          node-version-file: 'package.json'

      - name: Use yarn cache
        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5
        id: yarn-cache
        with:
          path: ./.yarn/cache
          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-${{ hashFiles('**/yarn.lock') }}
          restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-deps-

      - name: Install dependencies
        run: yarn install --immutable

      - name: Resolve changed files
        uses: actions/github-script@v7
        with:
          script: |
            let changedFiles = []

            if (context.eventName === 'pull_request') {
              const pullNumber = context.payload.pull_request?.number

              if (!pullNumber) {
                core.warning('No pull request number found. VISUAL_TEST_CHANGED_FILES was not set.')
                return
              }

              const files = await github.paginate(
                github.rest.pulls.listFiles,
                {
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  pull_number: pullNumber,
                  per_page: 100,
                }
              )

              changedFiles = files
                .map((file) => file.filename)
                .filter(Boolean)
            } else if (context.eventName === 'push') {
              const head = context.payload.after || context.sha
              const defaultBranch =
                context.payload.repository?.default_branch || 'main'

              if (!head) {
                core.warning('Missing push head SHA. VISUAL_TEST_CHANGED_FILES was not set.')
                return
              }

              try {
                const comparison = await github.rest.repos.compareCommitsWithBasehead({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  basehead: `${defaultBranch}...${head}`,
                })

                changedFiles = (comparison.data.files || [])
                  .map((file) => file.filename)
                  .filter(Boolean)
              } catch {
                const base = context.payload.before

                if (!base) {
                  core.warning('Missing push base SHA. VISUAL_TEST_CHANGED_FILES was not set.')
                  return
                }

                const comparison = await github.rest.repos.compareCommits({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  base,
                  head,
                })

                changedFiles = (comparison.data.files || [])
                  .map((file) => file.filename)
                  .filter(Boolean)
              }
            } else {
              core.warning(`Unsupported event: ${context.eventName}`)
              return
            }

            core.exportVariable(
              'VISUAL_TEST_CHANGED_FILES',
              changedFiles.join('\n')
            )

      - name: Use Playwright cache
        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5
        id: playwright-cache
        with:
          path: |
            ~/Library/Caches/ms-playwright
            ~/.cache/ms-playwright
            %USERPROFILE%\AppData\Local\ms-playwright
          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
      - run: yarn workspace @dnb/eufemia playwright install --with-deps firefox
        if: steps.playwright-cache.outputs.cache-hit != 'true'
      - run: yarn workspace @dnb/eufemia playwright install-deps firefox
        if: steps.playwright-cache.outputs.cache-hit == 'true'

      - name: Prebuild Library
        if: env.RUN_POST_BUILD == 'true'
        run: yarn workspace @dnb/eufemia prebuild:ci

      - name: Postbuild Library
        if: env.RUN_POST_BUILD == 'true'
        run: yarn workspace @dnb/eufemia postbuild:ci

      - name: Build portal
        if: env.RUN_VISUAL_TEST == 'true'
        run: yarn workspace dnb-design-system-portal build:visual-test

      - name: Run visual tests
        if: env.RUN_VISUAL_TEST == 'true'
        run: yarn workspace dnb-design-system-portal test:screenshots:ci:conditional

      - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
        if: failure()
        with:
          name: visual-test-artifact
          path: |
            ./packages/dnb-eufemia/src/**/*.snap-diff.png
            ./packages/dnb-eufemia/jest-visual-diff-report/*

      - name: Run visual tests info
        if: failure()
        run: echo '\n\n👉 Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n'