pr_ci_frontend.yaml

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

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

    services:
      postgres:  # Database service example
        image: postgres:15
        env:
          POSTGRES_DB: ${{ secrets.DATABASE_NAME }}
          POSTGRES_USER: ${{ secrets.DATABASE_USER }}
          POSTGRES_PASSWORD: ${{ secrets.DATABASE_PASSWORD }}
        ports:
          - 5432:5432  # Using the default PostgreSQL port

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

      - name: Set up Docker Compose
        run: |
          echo "FRONTEND_PORT=${{ secrets.FRONTEND_PORT }}" >> .env
          echo "BACKEND_PORT=${{ secrets.BACKEND_PORT }}" >> .env
          echo "DATABASE_PORT=${{ secrets.DATABASE_PORT }}" >> .env
          echo "DATABASE_HOST=postgres" >> .env
          echo "DATABASE_NAME=${{ secrets.DATABASE_NAME }}" >> .env
          echo "DATABASE_USER=${{ secrets.DATABASE_USER }}" >> .env
          echo "DATABASE_PASSWORD=${{ secrets.DATABASE_PASSWORD }}" >> .env
          echo "DJANGO_ALLOWED_HOSTS=${{ secrets.DJANGO_ALLOWED_HOSTS }}" >> .env
          echo "DEBUG=${{ secrets.DEBUG }}" >> .env
          echo "SECRET_KEY=${{ secrets.SECRET_KEY }}" >> .env

      - name: Run Docker Compose
        run: docker-compose -f docker-compose.yml up -d

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '16'
          cache: 'yarn'

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

      - name: Install dependencies
        working-directory: ./frontend
        run: |
          yarn install --frozen-lockfile

      - name: Run Prettier - Formatting check
        working-directory: ./frontend
        run: |
          yarn prettier --check .

      - 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: Wait for web server to be ready
        working-directory: ./frontend
        run: |
          curl --retry 5 --retry-delay 5 --retry-all-errors http://localhost:${{ secrets.FRONTEND_PORT }}

      - 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

      - name: Shutdown Docker Compose
        if: always()
        run: docker-compose down