cypress-testing.yml

# keep name short as it is displayed in readme badge
name: Cypress CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:
env:
  NODE_ENV: "test" # see: https://github.com/vercel/next.js/issues/55804#issuecomment-1735124191.
  NEXT_PUBLIC_APP_ENV: "test"
  DEBUG: "cypress:server:args"
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  #address of services is the name of the service if both on containers and no port map needed
  DATABASE_URL: "mysql://root:root@mysql-service/t3template"
  NEXTAUTH_SECRET: ${{secrets.NEXTAUTH_SECRET}}
  NEXTAUTH_URL: ${{vars.NEXTAUTH_URL}}
  AUTH0_CLIENT_ID: ${{secrets.AUTH0_CLIENT_ID}}
  AUTH0_CLIENT_SECRET: ${{secrets.AUTH0_CLIENT_SECRET}}
  AUTH0_ISSUER: ${{vars.AUTH0_ISSUER}}
  AUTH0_BASE_URL: ${{vars.AUTH0_BASE_URL}}
  CYPRESS_DEMO_MAIL: ${{secrets.CYPRESS_DEMO_MAIL}}
  CYPRESS_DEMO_PASSWORD: ${{secrets.CYPRESS_DEMO_PASSWORD}}

jobs:
  install:
    runs-on: ubuntu-latest
    container:
      image: cypress/browsers:latest
    steps:
      - name: install pnpm
        uses: pnpm/action-setup@v2
      - name: Checkout
        uses: actions/checkout@v4
      - name: Cypress install
        uses: cypress-io/github-action@v5
        with:
          build: pnpm build:test
          runTests: false
      - name: Save build folder
        uses: actions/upload-artifact@v4
        with:
          name: build
          if-no-files-found: error
          path: .next

  ui-chrome-tests:
    needs: install
    runs-on: ubuntu-latest
    services:
      mysql-service:
        image: mysql:latest
        env:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: t3template
        ports:
          - 3306:3306
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
    container:
      image: cypress/browsers:latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Download the build folders
        uses: actions/download-artifact@v4
        with:
          name: build
          path: .next
      - name: "UI Tests - Chrome"
        uses: cypress-io/github-action@v5
        with:
          # use build step to seed the database, build is already done in install job
          build: pnpm db:seed
          start: npm start
          wait-on: "http://localhost:3000"
          wait-on-timeout: 120
          browser: chrome
          config-file: cypress.config.ts

  ui-chrome-mobile-tests:
    needs: install
    runs-on: ubuntu-latest
    services:
      mysql-service:
        image: mysql:latest
        env:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: t3template
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
    container:
      image: cypress/browsers:latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Download the build folders
        uses: actions/download-artifact@v4
        with:
          name: build
          path: .next
      - name: "UI Tests - Chrome - Mobile"
        uses: cypress-io/github-action@v5
        with:
          config: "viewportWidth=375,viewportHeight=667"
          #use build step to seed the database, build is already done in install job
          build: pnpm db:seed
          start: npm start
          wait-on: "http://localhost:3000"
          wait-on-timeout: 120
          browser: chrome
          config-file: cypress.config.ts

  component-testing:
    needs: install
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Download the build folders
        uses: actions/download-artifact@v4
        with:
          name: build
          path: .next
      - name: Run Component Testing
        uses: cypress-io/github-action@v5
        with:
          component: true
          config-file: cypress.config.ts