frontend-visual.yml

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Frontend - Visual Testing (Percy)

on:
  pull_request:
    branches: [master]
    paths:
      - hivemq-edge/src/frontend/**
env:
  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./hivemq-edge/src/frontend/
    strategy:
      matrix:
        node-version: [18.16.0]

    steps:
      - name: 👓 Checkout repository
        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4

      - name: 🚚 Setup pnpm
        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
        with:
          version: 8.4.0

      - name: 🔻 Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: 📦 Install dependencies
        run: pnpm install

      - name: 🏗️ Build Application
        run: pnpm run build

      - name: 🧪 Run Cypress E2E
        uses: cypress-io/github-action@v6
        with:
          working-directory: ./hivemq-edge/src/frontend/
          start: pnpm dev

      - name: 🧪 Run Cypress Component
        uses: cypress-io/github-action@v6
        with:
          working-directory: ./hivemq-edge/src/frontend/
          component: true
          start: pnpm dev

      - name: 📸 Run Percy visual tests
        run: pnpm cypress:percy
        ## Percy should block the pipeline except if no money left on the plan :-)
        continue-on-error: true
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}