feat: use cypress for e2e tests

# Conflicts:
#	website/yarn.lock

.github/workflows/website.yml

@@ -107,4 +107,55 @@ jobs:
           context: ./website
           push: true
           tags: ${{ steps.dockerMetadata.outputs.tags }}
-          labels: ${{ steps.dockerMetadata.outputs.labels }}
+          labels: ${{ steps.dockerMetadata.outputs.labels }}
+
+  end2endTests:
+    name: End to End Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ~/.cache/yarn
+          key: ${{ runner.os }}-yarn-${{ hashFiles('variation/**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: Start database
+        run: docker compose -f ../docker-compose.yml up -d database
+
+      - name: Copy production env file
+        run: cp .env.production.sample .env.production
+
+      - name: Build website
+        run: yarn build
+        env:
+          NODE_ENV: production
+
+      - name: Install pm2
+        run: yarn global add pm2
+
+      - name: Start website
+        run: pm2 start yarn --name website -- start
+
+      - name: Run tests
+        run: yarn e2e

docker-compose.yml

@@ -9,6 +9,8 @@ services:
     restart: always
     ports:
       - 3000:3000
+    depends_on:
+      - database
 
   database:
     image: mongo:latest

website/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        baseUrl: 'http://localhost:3000',
+        supportFile: false,
+    },
+});

website/cypress/e2e/app.cy.ts

@@ -0,0 +1,11 @@
+describe('Navigation', () => {
+    it('should navigate to the survey page', () => {
+        cy.visit('http://localhost:3000');
+
+        cy.get('a[href*="survey"]').click();
+
+        cy.url().should('include', '/survey');
+
+        cy.get('h1').should('contain', 'Survey');
+    });
+});

website/package.json

@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --write '*/**/*.{js,jsx,ts,tsx,json,css,md}'",
-    "test": "vitest"
+    "test": "vitest",
+    "cypress:open": "cypress open",
+    "e2e": "cypress run --e2e"
   },
   "dependencies": {
     "@types/mongodb": "^4.0.7",
@@ -27,6 +29,7 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
+    "cypress": "^13.6.4",
     "eslint": "^8",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",