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

env:
  GH_EMAIL: ${{ secrets.GH_EMAIL }}
  GH_NAME: ${{ secrets.GH_NAME }}
  GH_TOKEN: ${{ secrets.GH_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') }}

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

    runs-on: macos-15

    timeout-minutes: 40

    steps:
      - name: Git checkout
        uses: actions/checkout@v4
        with:
          persist-credentials: false

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

      - name: Use yarn cache
        uses: actions/cache@v4
        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: Use Playwright cache
        uses: actions/cache@v4
        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
        run: yarn workspace dnb-design-system-portal build:visual-test

      - name: Run visual tests
        run: yarn workspace dnb-design-system-portal test:screenshots:ci

      - uses: actions/upload-artifact@v4
        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'

      - name: Slack
        uses: 8398a7/action-slack@v3
        with:
          channel: '#eufemia-dev'
          status: ${{ job.status }}
          fields: author,ref,workflow,job,took
          job_name: Run visual regression tests
          github_base_url: https://github.com/
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
        if: ${{ always() && !github.event.pull_request.head.repo.fork }}
        continue-on-error: true