Test/e2e login auth (#19)

* Add basic test for login and auth state

* Remove test file

* Change login setup

* Apply suggestions from code review

Co-authored-by: Martin Braquet <[email protected]>

* Change signin structure to use UI

* Fix URL loading

* Spin up backend server as well for E2E

---------

Co-authored-by: Martin Braquet <[email protected]>

Author: n3c777

.github/workflows/ci.yml

@@ -67,11 +67,15 @@ jobs:
           NEXT_PUBLIC_SUPABASE_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_KEY }}
         run: |
           npx nyc --reporter=lcov yarn --cwd=web serve &
+          npx nyc --reporter=lcov yarn --cwd=backend/api dev &
           npx wait-on http://localhost:3000
           npx playwright test tests/e2e
           SERVER_PID=$(fuser -k 3000/tcp)
           echo $SERVER_PID
           kill $SERVER_PID
+          SERVER_PID=$(fuser -k 8088/tcp)
+          echo $SERVER_PID
+          kill $SERVER_PID
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v5

.gitignore

@@ -15,6 +15,7 @@
 
 # Playwright
 /tests/reports/playwright-report
+/tests/e2e/web/.auth/
 
 # next.js
 /.next/

package.json

@@ -24,6 +24,7 @@
     "test:coverage": "yarn workspaces run test --coverage",
     "test:watch": "yarn workspaces run test --watch",
     "test:update": "yarn workspaces run test --updateSnapshot",
+    "test:e2e": "./scripts/e2e.sh",
     "playwright": "playwright test",
     "playwright:ui": "playwright test --ui",
     "playwright:debug": "playwright test --debug",

playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
 
 export default defineConfig({
   testDir: './tests/e2e',
@@ -13,8 +14,9 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'main',
+      use: {
+        ...devices['Desktop Chrome'],      }, 
     },
     // {
     //   name: 'firefox',
@@ -25,4 +27,5 @@ export default defineConfig({
     //   use: { ...devices['Desktop Safari'] },
     // },
   ],
-});
+
+});

scripts/e2e.sh

@@ -10,9 +10,13 @@ export NEXT_PUBLIC_API_URL=localhost:8088
 export NEXT_PUBLIC_FIREBASE_ENV=DEV
 
 npx nyc --reporter=lcov yarn --cwd=web serve &
+npx nyc --reporter=lcov yarn --cwd=backend/api dev &
 npx wait-on http://localhost:3000
 npx playwright test tests/e2e
 SERVER_PID=$(fuser -k 3000/tcp)
 echo $SERVER_PID
 kill $SERVER_PID
 
+SERVER_PID=$(fuser -k 8088/tcp)
+echo $SERVER_PID
+kill $SERVER_PID

tests/e2e/web/.auth/.keep

@@ -0,0 +1,5 @@
+export const config = {
+  BASE_URL: 'http://localhost:3000',
+  DEFAULT_LOGIN: '[email protected]',
+  DEFAULT_PASSWORD: 'defaultPassword',
+};

tests/e2e/web/TESTING_CONFIG.ts

@@ -0,0 +1,24 @@
+import { test as base, Page, expect } from '@playwright/test';
+import { SignInPage } from '../pages/signInPage';
+import { config } from '../TESTING_CONFIG';
+
+export const test = base.extend<{
+  authenticatedPage: Page;
+}>({
+  authenticatedPage: async ({ page }, use) => {
+    const signInPage = new SignInPage(page);
+
+    await page.goto('/signin');
+    await signInPage.fillEmailField(config.DEFAULT_LOGIN);
+    await signInPage.fillPasswprdField(config.DEFAULT_PASSWORD);
+    await signInPage.clickSignInWithEmailButton();
+
+    await page.waitForLoadState('networkidle');
+
+    await page.waitForURL('/');
+
+    expect(page.url()).not.toContain('/signin')
+
+    await use(page);
+  },
+});