pr_ci_frontend.yaml

name: pr_ci_frontend
on:
  push:
  pull_request:
    branches:
      - main
    types: [opened, reopened, synchronize]

env:
  NODE_VERSION: '14'

jobs:
  frontend:
    name: Run PR Frontend Check
    runs-on: ubuntu-latest
    environment: dev

    services:
      app:  # This is the service for the web server needed for Playwright tests
        image: docker-compose.yml
        env:
          FRONTEND_PORT: ${{ secrets.FRONTEND_PORT }}
          BACKEND_PORT: ${{ secrets.BACKEND_PORT }}
          DATABASE_PORT: ${{ secrets.DATABASE_PORT }}
          DATABASE_HOST: ${{ secrets.DATABASE_HOST }}
          DATABASE_NAME: ${{ secrets.DATABASE_NAME }}
          DATABASE_USER: ${{ secrets.DATABASE_USER }}
          DATABASE_PASSWORD: ${{ secrets.DATABASE_PASSWORD }}
          DJANGO_ALLOWED_HOSTS: ${{ secrets.DJANGO_ALLOWED_HOSTS }}
          DEBUG: ${{ secrets.DEBUG }}
          SECRET_KEY: ${{ secrets.SECRET_KEY }}
        ports:
          - ${{ secrets.FRONTEND_PORT }}:${{ secrets.FRONTEND_PORT }}
        options: --env-file .env.dev up --build

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node environment
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install Yarn and dependencies
        working-directory: ./frontend
        run: yarn install

      - name: Run Prettier - Formatting check
        working-directory: ./frontend
        run: yarn prettier . --check --config ../.prettierrc --ignore-path ../.prettierignore

      - name: Run Type Check
        working-directory: ./frontend
        run: yarn nuxi typecheck

      - name: Run eslint - Linting
        working-directory: ./frontend
        run: yarn eslint . --ext .js,.vue

      - name: Install Playwright Browsers
        working-directory: ./frontend
        run: yarn playwright install --with-deps

      - name: Run Playwright tests
        working-directory: ./frontend
        run: yarn playwright test

      - name: Upload Playwright report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: frontend/playwright-report/
          retention-days: 30