visual_tests.yml

name: Visual Tests

on:
  push:
    branches: [ staging ]
  pull_request:
    types: [ unlabeled, labeled, synchronize, opened ]

env:
  HUSKY: 0

concurrency:
  group: "${{ github.workflow }}-${{ github.ref }}"
  cancel-in-progress: true

jobs:
  filter-actions:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: read
    outputs:
      dialtone-vue-2: ${{ steps.filter.outputs.dialtone-vue-2 }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Filter actions by path
        if: github.event_name == 'pull_request'
        uses: dorny/paths-filter@v3
        id: filter
        with:
          filters: |
            dialtone-vue-2:
              - 'packages/dialtone-css/**'
              - 'packages/dialtone-icons/**'
              - 'packages/dialtone-tokens/**'
              - 'packages/dialtone-vue2/**'

  prompt-for-label:
    needs: filter-actions
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - name: Add label prompt message
        uses: mshick/add-pr-comment@v2
        if: ${{ github.event_name == 'pull_request' && needs.filter-actions.outputs.dialtone-vue-2 == 'true' && (!contains(github.event.pull_request.labels.*.name, 'visual-test-ready') && !contains(github.event.pull_request.labels.*.name, 'no-visual-test')) }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          message: |
            Please add either the `visual-test-ready` or `no-visual-test` label to this PR depending on whether you want to run visual tests or not.
            It is recommended to run visual tests if your PR changes any UI. ‼️
          message-id: 'missing-visual-test-label'
          refresh-message-position: true

  dialtone-vue-2:
    needs: filter-actions
    if: ${{ github.event_name == 'push' || (needs.filter-actions.outputs.dialtone-vue-2 == 'true' && contains(github.event.pull_request.labels.*.name, 'visual-test-ready')) }}

    runs-on: ubuntu-latest
    steps:
      - name: Check out branch
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Use pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 9
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
        uses: actions/cache@v4
        with:
          path: ${{ env.STORE_PATH }}
          key: "${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}"
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build Dialtone-vue 2 library and documentation site
        run: pnpm nx run --verbose dialtone-vue2:build-docs

      - name: Run Dialtone-vue 2 Visual Tests
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
          PERCY_TARGET_BRANCH: ${{ github.base_ref }}
        run: pnpm nx run --verbose dialtone-vue2:test:visual