gh action for cypress test (CI)

.github/workflows/cypress-testing.yml

@@ -0,0 +1,125 @@
+# 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: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress install
+        uses: cypress-io/github-action@v5
+        with:
+          build: npm run 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: npm run 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: npm run 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