visual_tests.yml

name: Percy Visual Tests

on:
  pull_request_target:
    types:
      - opened
      - synchronize
      - reopened
      - closed

jobs:
  pre_job:
    name: Path match check
    runs-on: ubuntu-latest
    # Map a step output to a job output
    outputs:
      should_skip: ${{ steps.skip_check.outputs.should_skip }}
    steps:
      - id: skip_check
        uses: fkirc/skip-duplicate-actions@master
        with:
          github_token: ${{ github.token }}
          paths: '["lib/**", "jest.conf/visual*" ]'
          # Avoid duplicate skipping so it can be run again on the target branch
          skip_after_successful_duplicate: false

  visual_tests:
    name: Frontend Visual Tests
    needs: pre_job
    if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
    runs-on: ubuntu-latest
    strategy:
      # Using matrix just to dynamically set the environment variable
      matrix:
        env:
          # Protect deployments from non-merged PRs but allow merged PRs to run
          # on the target branch
          - ${{ github.event.pull_request.merged == false && 'percy_tests' || '' }}
    environment: ${{ matrix.env }}
    outputs:
      percy_url: ${{ steps.extract-url.outputs.percy_url }}
    steps:
      - name: Checkout code from PR
        if: github.event.pull_request.merged == false
        uses: actions/checkout@v6
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Checkout code from target branch
        if: github.event.pull_request.merged == true
        uses: actions/checkout@v6
        with:
          ref: ${{ github.event.pull_request.base.ref }}
      - name: Set PERCY_BRANCH to target branch
        if: github.event.pull_request.merged == true
        # set the PERCY_BRANCH environment variable to the target branch for the Percy build
        # to be associated with the target branch
        run: echo "PERCY_BRANCH=${{ github.event.pull_request.base.ref }}" >> $GITHUB_ENV
      - name: Use Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '18.x'
      - name: Cache Node.js modules
        uses: actions/cache@v5
        with:
          path: '**/node_modules'
          key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.OS }}-node-
      - name: Install dependencies
        run: |
          yarn --frozen-lockfile
          npm rebuild node-sass
      - name: Download Chromium
        run: npx puppeteer browsers install chrome
      - name: Extract jsdocs and environment info
        run: yarn pregenerate
      - name: Run visual tests
        run: yarn test:visual 2>&1 | tee test-output.log
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
      - name: Extract Percy build URL
        id: extract-url
        run: |
          url=$(grep -o 'https://percy.io/[a-zA-Z0-9/_-]*' test-output.log | tail -1)
          echo "percy_url=$url" >> $GITHUB_OUTPUT

  comment:
    name: Comment Percy results
    needs: visual_tests
    if: ${{ needs.visual_tests.result == 'success' && github.event.pull_request.merged == false }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code from PR
        uses: actions/checkout@v6
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Define comment body
        id: comment-text
        uses: actions/github-script@v8
        with:
          script: |
            const percyUrl = "${{ needs.visual_tests.outputs.percy_url }}";
            const utils = require('./.github/githubUtils.js');
            return await utils.generateComment(percyUrl);
      - name: Find existing comment
        id: find-comment
        uses: actions/github-script@v8
        with:
          script: |
            const utils = require('./.github/githubUtils.js');
            return await utils.findComment(github, context, context.issue.number);
      - name: Create build comment
        if: ${{!steps.find-comment.outputs.result}}
        uses: actions/github-script@v8
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
              github.rest.issues.createComment({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                body: ${{ steps.comment-text.outputs.result }}
              })
      - name: Update build comment
        if: ${{steps.find-comment.outputs.result}}
        uses: actions/github-script@v8
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
              github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: ${{steps.find-comment.outputs.result}},
                body: ${{ steps.comment-text.outputs.result }}
              })