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: Clean up any existing containers
        run: |
          docker stop $(docker ps -aq) || true
          docker rm $(docker ps -aq) || true

      - name: Check Port Availability
        run: |
          ! nc -z localhost ${{ secrets.FRONTEND_PORT }} && \
          ! nc -z localhost ${{ secrets.BACKEND_PORT }} && \
          ! nc -z localhost 5432

      - 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  # Using the service name from the services section
          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 environment
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

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

      - name: Install Prettier
        working-directory: ./frontend
        run: yarn add prettier

      - 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: 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