frontend-cli.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 - React Testing Pyramid

on:
  push:
    branches:
      - "**"        # matches every branch
    paths:
      - hivemq-edge/src/frontend/**
  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@v3

      - name: 🚚 Setup pnpm
        uses: pnpm/action-setup@v2.2.4
        with:
          version: 8.4.0

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

      - name: 📦 Install dependencies
        run: pnpm install

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

      - name: 🧪 Run Prettier
        run: pnpm lint:prettier

      - name: 🧪 Run ESLint
        run: pnpm lint:eslint

      - name: 🧪 Run Test
        run: pnpm test

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

      # after the test run completes store videos
      - name: 💾 Upload E2E videos
        uses: actions/upload-artifact@v3
        with:
          name: cypress-e2e-videos
          path: hivemq-edge/src/frontend/cypress/videos
          if-no-files-found: ignore

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

      # after the test run completes store videos
      - name: 💾 Upload Component videos
        uses: actions/upload-artifact@v3
        with:
          name: cypress-component-videos
          path: hivemq-edge/src/frontend/cypress/videos
          if-no-files-found: ignore

      - name: 📸 Run Percy visual tests
        run: echo "Check the Percy tests on the other workflow"

      - name: 🚥 Run Lighthouse audits
        uses: treosh/lighthouse-ci-action@v10
        id: lighthouse
        with:
          temporaryPublicStorage: true # upload lighthouse report to the temporary storage
          ## budgetPath: ./budget.json # test performance budgets
          uploadArtifacts: true # save results as an action artifacts
          configPath: 'hivemq-edge/src/frontend/.lighthouserc.cjs'

      - name: 💾 Job successful feedback
        if: ${{ success() }}
        run: |
          echo '### Lighthouse results 🚦' >> $GITHUB_STEP_SUMMARY
          echo "Performance: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}" >> $GITHUB_STEP_SUMMARY
          echo "Accessibility: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.accessibility }}" >> $GITHUB_STEP_SUMMARY
          echo "Best-practices: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.best-practices }}" >> $GITHUB_STEP_SUMMARY
          echo "SEO: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.seo }}" >> $GITHUB_STEP_SUMMARY