Migrate e2e tests to use backend instead of mock data

.github/workflows/run-ci-cd.yaml

@@ -309,7 +309,7 @@ jobs:
         run: |
           timeout 5m bash -c '
             until wget --spider http://localhost:9000/a; do
-              echo "Waiting for backend..."
+              echo "Waiting for the backend..."
               sleep 5
             done
           '
@@ -321,12 +321,42 @@ jobs:
         run: |
           pg_restore -h localhost -U nest_user_e2e -d nest_db_e2e < backend/data/nest.dump
 
-      - name: Build frontend end-to-end testing image
+      - name: Build frontend image
         uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
         with:
           cache-from: |
             type=gha
-            type=registry,ref=owasp/nest:test-frontend-e2e-cache
+            type=registry,ref=owasp/nest:frontend-e2e-cache
+          context: frontend
+          file: docker/frontend/Dockerfile
+          build-args: |
+            ENV_FILE=.env.e2e.example
+            NEXT_PUBLIC_E2E_BACKEND_BASE_URL=http://localhost:9000
+          load: true
+          platforms: linux/amd64
+          tags: owasp/nest:frontend-e2e-latest
+
+      - name: Run frontend in the background
+        run: |
+          docker run -d --name e2e-nest-frontend \
+          --env-file frontend/.env.e2e.example \
+          --network host \
+          -p 3000:3000 \
+          owasp/nest:frontend-e2e-latest
+
+      - name: Wait for frontend to be ready
+        run: |
+          timeout 5m bash -c '
+            until wget --spider http://localhost:3000/; do
+              echo "Waiting for the frontend..."
+              sleep 5
+            done
+          '
+          echo "Frontend is up!"
+
+      - name: Build e2e testing image
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
+        with:
           context: frontend
           file: docker/frontend/Dockerfile.e2e.test
           load: true
@@ -335,8 +365,12 @@ jobs:
 
       - name: Run frontend end-to-end tests
         run: |
-          docker run --env-file frontend/.env.e2e.example owasp/nest:test-frontend-e2e-latest pnpm run test:e2e
-    timeout-minutes: 15
+          docker run --network host \
+            -e FRONTEND_URL=http://localhost:3000 \
+            -e NEXTAUTH_SECRET=secret \
+            -e NEXTAUTH_URL=http://localhost:3000 \
+            owasp/nest:test-frontend-e2e-latest npx playwright test
+    timeout-minutes: 20
 
   run-frontend-a11y-tests:
     name: Run frontend accessibility tests

CONTRIBUTING.md

@@ -456,6 +456,12 @@ This command automatically:
 - Executes the e2e tests
 - Cleans up containers when done
 
+To run e2e tests without initializing the database, use the following command:
+
+```bash
+make test-frontend-e2e-no-init
+```
+
 For debugging, you can run the e2e backend separately:
 
 ```bash
@@ -468,6 +474,20 @@ Then load data manually in another terminal:
 make load-data-e2e
 ```
 
+For debugging the frontend e2e tests UI mode, run:
+
+```bash
+make test-frontend-e2e-ui
+```
+
+To run the frontend e2e tests UI mode without the database initialized, use the following command:
+
+```bash
+make test-frontend-e2e-ui-no-init
+```
+
+You can access the UI at [http://localhost:3800](http://localhost:3800).
+
 ### Running Fuzz Tests
 
 Run the fuzz tests with the following command:

.dockerignore → backend/.dockerignore

@@ -2,9 +2,6 @@
 .bash_history
 .cache
 .dockerignore
-.env
-.env.*
-.envs
 .git
 .gitignore
 .local
@@ -17,13 +14,13 @@
 *.log
 *.pem
 **/__pycache__
-backend/data
 backend/staticfiles
 build
 coverage
 dist
 docker
 Dockerfile.*
 node_modules
+**/node_modules
 npm-debug.log
 venv

cspell/custom-dict.txt

@@ -1,11 +1,14 @@
 AVD
+Abhay
 Agentic
 Agsoc
 Aichi
 Aissue
 Atqc
 Aupdated
 BOTTOMPADDING
+Balbin
+Balbin's
 Birda
 CCSP
 CISSP
@@ -46,6 +49,7 @@ Sivagangai
 Sonarqube
 Stegen
 T04T40NHX
+Tarandach
 Truncator
 Turbopack
 Twitterbot
@@ -93,6 +97,7 @@ geocoders
 geoloc
 geopy
 gha
+glueup
 graphiql
 graphqler
 gunicorn

docker-compose/e2e/compose.yaml

@@ -89,19 +89,45 @@ services:
     volumes:
       - e2e-cache-data:/data
 
+  frontend:
+    container_name: e2e-nest-frontend
+    build:
+      context: ../../frontend
+      dockerfile: ../docker/frontend/Dockerfile
+      args:
+        ENV_FILE: .env.e2e.example
+
+    env_file: ../../frontend/.env.e2e.example
+    depends_on:
+      backend:
+        condition: service_healthy
+    ports:
+      - 3500:3000
+    networks:
+      - e2e-nest-network
+    healthcheck:
+      interval: 5s
+      start_period: 20s
+      retries: 10
+      test: >
+        sh -c '
+          wget --spider http://0.0.0.0:3000/
+        '
+      timeout: 5s
+
   e2e-tests:
     container_name: e2e-nest-tests
     build:
       context: ../../frontend
       dockerfile: ../docker/frontend/Dockerfile.e2e.test
-    command: >
-      sh -c '
-        pnpm run test:e2e
-      '
     depends_on:
-      backend:
+      frontend:
         condition: service_healthy
-    env_file: ../../frontend/.env.e2e.example
+    command: ${E2E_TEST_COMMAND:-sh -c "pnpm run test:e2e"}
+    environment:
+      - FRONTEND_URL=http://frontend:3000
+    ports:
+      - 3800:3800
     networks:
       - e2e-nest-network
 

docker/frontend/Dockerfile

@@ -10,7 +10,11 @@ ENV APK_CACHE_DIR="/app/.cache/apk" \
     NPM_CACHE="/app/.npm" \
     PNPM_HOME="/pnpm"
 
-ENV PATH="$PNPM_HOME:$PATH"
+ARG ENV_FILE=.env
+ARG NEXT_PUBLIC_E2E_BACKEND_BASE_URL=http://backend:9000
+
+ENV PATH="$PNPM_HOME:$PATH" \
+    NEXT_PUBLIC_E2E_BACKEND_BASE_URL=${NEXT_PUBLIC_E2E_BACKEND_BASE_URL}
 
 RUN mkdir -p ${APK_CACHE_DIR} && \
     ln -fns ${APK_CACHE_DIR} ${APK_SYMLINK_DIR}
@@ -29,7 +33,8 @@ COPY --chmod=444 package.json pnpm-lock.yaml ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts
 
-COPY --chmod=444 .env .pnpmrc next.config.ts postcss.config.js tailwind.config.mjs tsconfig.json ./
+COPY --chmod=444 .pnpmrc next.config.ts postcss.config.js tailwind.config.mjs tsconfig.json ./
+COPY --chmod=444 ${ENV_FILE} ./.env
 COPY --chmod=555 public public
 COPY --chmod=555 src src
 

docker/frontend/Dockerfile.e2e.test

@@ -13,12 +13,13 @@ RUN --mount=type=cache,target=${NPM_CACHE} \
 
 WORKDIR /app
 
-COPY --chmod=444 package.json pnpm-lock.yaml ./
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
-    pnpm install --frozen-lockfile --ignore-scripts
+COPY --chmod=444 __tests__/e2e/package.json __tests__/e2e/pnpm-lock.yaml ./
 
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+COPY .pnpmrc next.config.ts postcss.config.js playwright.config.ts tailwind.config.mjs tsconfig.json ./
+COPY src/utils src/utils
 COPY __tests__/e2e __tests__/e2e
 COPY __tests__/mockData __tests__/mockData
-COPY .pnpmrc next.config.ts postcss.config.js playwright.config.ts tailwind.config.mjs tsconfig.json ./
-COPY public public
-COPY src src
+
+EXPOSE 3800

frontend/.dockerignore

@@ -0,0 +1,26 @@
+.ash_history
+.bash_history
+.cache
+.dockerignore
+.git
+.gitignore
+.local
+.next
+.pnpm-store
+.pytest_cache
+.ruff_cache
+.venv
+.vscode
+*.log
+*.pem
+**/__pycache__
+backend/staticfiles
+build
+coverage
+dist
+docker
+Dockerfile.*
+node_modules
+**/node_modules
+npm-debug.log
+venv

frontend/.env.e2e.example

@@ -1,16 +1,16 @@
-NEXTAUTH_SECRET=<your-nextauth-secret>
+NEXTAUTH_SECRET=secret3234
 NEXTAUTH_URL=http://localhost:3000/
-NEXT_PUBLIC_API_URL=http://localhost:9000/
-NEXT_PUBLIC_CSRF_URL=http://localhost:9000/csrf/
-NEXT_PUBLIC_ENVIRONMENT=local
-NEXT_PUBLIC_GRAPHQL_URL=http://localhost:9000/graphql/
+NEXT_PUBLIC_API_URL=/
+NEXT_PUBLIC_CSRF_URL=/csrf/
+NEXT_PUBLIC_ENVIRONMENT=production
+NEXT_PUBLIC_GRAPHQL_URL=/graphql/
 NEXT_PUBLIC_GTM_ID=
 NEXT_PUBLIC_IDX_URL=http://localhost:9000/idx/
 NEXT_PUBLIC_IS_PROJECT_HEALTH_ENABLED=true
 NEXT_PUBLIC_RELEASE_VERSION=
 NEXT_PUBLIC_SENTRY_DSN=
 NEXT_SERVER_CSRF_URL=http://localhost:9000/csrf/
 NEXT_SERVER_DISABLE_SSR=false
-NEXT_SERVER_GITHUB_CLIENT_ID=your-github-client-id
-NEXT_SERVER_GITHUB_CLIENT_SECRET=your-github-client-secret
+NEXT_SERVER_GITHUB_CLIENT_ID=retye6y6
+NEXT_SERVER_GITHUB_CLIENT_SECRET=tyurtyu5
 NEXT_SERVER_GRAPHQL_URL=http://localhost:9000/graphql/

frontend/Makefile

@@ -39,6 +39,12 @@ format-frontend-code:
 graphql-codegen:
 	@cd frontend && pnpm run graphql-codegen
 
+init-e2e-db:
+	@docker container rm -f e2e-nest-db >/dev/null 2>&1 || true
+	@docker volume rm -f nest-e2e_e2e-db-data >/dev/null 2>&1 || true
+	@DOCKER_BUILDKIT=1 \
+	docker compose --project-name nest-e2e -f docker-compose/e2e/compose.yaml up --build --remove-orphans --abort-on-container-exit db cache backend data-loader
+
 lighthouse-ci:
 	@cd frontend && pnpm run lighthouse-ci
 
@@ -90,13 +96,17 @@ test-frontend-a11y:
 		-t nest-test-frontend-a11y
 	@docker run --env-file frontend/.env.example --rm nest-test-frontend-a11y pnpm run test:a11y
 
-test-frontend-e2e:
-	@docker container rm -f e2e-nest-db >/dev/null 2>&1 || true
-	@docker volume rm -f nest-e2e_e2e-db-data >/dev/null 2>&1 || true
+test-frontend-e2e-no-db-init:
 	@DOCKER_BUILDKIT=1 \
-	docker compose --project-name nest-e2e -f docker-compose/e2e/compose.yaml up --build --remove-orphans --abort-on-container-exit db cache backend data-loader
-	@DOCKER_BUILDKIT=1 NEXT_PUBLIC_ENVIRONMENT=local \
-	docker compose --project-name nest-e2e -f docker-compose/e2e/compose.yaml up --build --remove-orphans --abort-on-container-exit db cache backend e2e-tests
+	docker compose --project-name nest-e2e -f docker-compose/e2e/compose.yaml up --build --remove-orphans --abort-on-container-exit db cache backend frontend e2e-tests
+
+test-frontend-e2e: init-e2e-db test-frontend-e2e-no-db-init
+
+test-frontend-e2e-ui-no-db-init:
+	@DOCKER_BUILDKIT=1 E2E_TEST_COMMAND="pnpm run test:e2e:ui" \
+	docker compose --project-name nest-e2e -f docker-compose/e2e/compose.yaml up --build --remove-orphans --abort-on-container-exit db cache backend frontend e2e-tests
+
+test-frontend-e2e-ui: init-e2e-db test-frontend-e2e-ui-no-db-init
 
 test-frontend-unit:
 	@DOCKER_BUILDKIT=1 NEXT_PUBLIC_ENVIRONMENT=local docker build \

frontend/__tests__/e2e/components/Footer.spec.ts

@@ -1,4 +1,3 @@
-import { mockHomeData } from '@e2e/data/mockHomeData'
 import { test, expect, devices } from '@playwright/test'
 
 // Desktop tests
@@ -9,20 +8,6 @@ test.describe('Footer - Desktop (Chrome)', () => {
   })
 
   test.beforeEach(async ({ page }) => {
-    await page.route('**/graphql/', async (route) => {
-      await route.fulfill({
-        status: 200,
-        json: mockHomeData,
-      })
-    })
-    await page.context().addCookies([
-      {
-        name: 'csrftoken',
-        value: 'abc123',
-        domain: 'localhost',
-        path: '/',
-      },
-    ])
     await page.goto('/')
   })
   test('should have buttons', async ({ page }) => {
@@ -45,20 +30,6 @@ test.use({
 
 test.describe('Footer - Mobile (iPhone 13)', () => {
   test.beforeEach(async ({ page }) => {
-    await page.route('**/graphql/', async (route) => {
-      await route.fulfill({
-        status: 200,
-        json: mockHomeData,
-      })
-    })
-    await page.context().addCookies([
-      {
-        name: 'csrftoken',
-        value: 'abc123',
-        domain: 'localhost',
-        path: '/',
-      },
-    ])
     await page.goto('/')
   })
   test('should have buttons', async ({ page }) => {