Add e2e testing

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
 
     env:
       MONGODB_URI: mongodb://localhost:27017/
+      MONGODB_DB_MAIN: portfolio_db_test
+      VITE_PROXY_HOST: http://localhost:4000
 
     services:
       mongodb:
@@ -37,7 +39,18 @@ jobs:
         with:
           node-version: '18.x'
           cache: 'npm'
-      - run: npm install
-      - run: npm run lint
-      - run: npm run test
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: cd ui && npx playwright install --with-deps chromium
+      - name: Run Lint
+        run: npm run lint
+      - name: Run Tests
+        run: npm run test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ui/playwright-report/
+          retention-days: 30
 

api/src/config/connection/connection.ts

@@ -32,7 +32,7 @@ db.on('error', (error: any) => {
 });
 
 db.on('connected', () => {
-  Logger.info('[MongoDB] connected');
+  Logger.info(`[MongoDB] connected at ${MONGO_URI}`);
 });
 
 db.once('open', () => {

api/src/config/env/index.ts

@@ -34,7 +34,7 @@ const test: IConfig = {
   port: process.env.PORT || 3000,
   database: {
     MONGODB_URI: process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/',
-    MONGODB_DB_MAIN: `${process.env.MONGODB_DB_MAIN || 'example_db'}_testing`
+    MONGODB_DB_MAIN: process.env.MONGODB_DB_MAIN || 'example_db'
   },
   secret: process.env.SECRET || 'secret'
 };

package.json

@@ -1,46 +1,46 @@
 {
-    "name": "portfolio-app",
-    "version": "0.0.1",
-    "description": "Personal portfolio app.",
-    "author": "Lucas Fernandez",
-    "license": "ISC",
-    "private": true,
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/lucferbux/Taller-Containerization"
-    },
-    "homepage": "https://github.com/lucferbux/Taller-Containerization#readme",
-    "bugs": {
-      "url": "https://github.com/lucferbux/Taller-Containerization/issues"
-    },
-    "engines": {
-      "node": ">=12.0.0"
-    },
-    "scripts": {
-      "build": "run-p -l build:*",
-      "build:api": "cd ./api && npm run build",
-      "build:ui": "cd ./ui && npm run build",
-      "dev": "run-p -l dev:*",
-      "dev:api": "cd ./api && npm run start:dev",
-      "dev:ui": "cd ./ui && npm run start:dev",
-      "format": "prettier --write \"api/**/*.ts\" \"ui/**/*.ts\" \"ui/**/*.tsx\"",
-      "make": "make",
-      "postinstall": "run-p postinstall:*",
-      "postinstall:api": "cd ./api && npm install",
-      "postinstall:ui": "cd ./ui && npm install",
-      "start": "run-p start:*",
-      "start:api": "cd ./api && npm start",
-      "start:ui": "cd ./ui && npm start",
-      "test": "run-s test:api test:ui",
-      "test:api": "cd ./api && npm run test",
-      "test:ui": "cd ./ui && npm run test",
-      "lint": "run-s lint:api lint:ui",
-      "lint:api": "cd ./api && npm run lint",
-      "lint:ui": "cd ./ui && npm run lint"
-    },
-    "dependencies": {
-      "npm-run-all": "^4.1.5",
-      "prettier": "^2.2.1"
-    }
+  "name": "portfolio-app",
+  "version": "0.0.1",
+  "description": "Personal portfolio app.",
+  "author": "Lucas Fernandez",
+  "license": "ISC",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lucferbux/Taller-Containerization"
+  },
+  "homepage": "https://github.com/lucferbux/Taller-Containerization#readme",
+  "bugs": {
+    "url": "https://github.com/lucferbux/Taller-Containerization/issues"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "scripts": {
+    "build": "run-p -l build:*",
+    "build:api": "cd ./api && npm run build",
+    "build:ui": "cd ./ui && npm run build",
+    "dev": "run-p -l dev:*",
+    "dev:api": "cd ./api && npm run dev",
+    "dev:ui": "cd ./ui && npm run dev",
+    "format": "prettier --write \"api/**/*.ts\" \"ui/**/*.ts\" \"ui/**/*.tsx\"",
+    "make": "make",
+    "postinstall": "run-p postinstall:*",
+    "postinstall:api": "cd ./api && npm install",
+    "postinstall:ui": "cd ./ui && npm install",
+    "start": "run-p start:*",
+    "start:api": "cd ./api && npm start",
+    "start:ui": "echo \"...available at ./ui/public\"",
+    "test": "NODE_ENV=test run-s test:api test:ui test:e2e",
+    "test:api": "cd ./api && npm run test",
+    "test:ui": "cd ./ui && npm run test",
+    "test:e2e": "cd ./ui && npm run test:e2e",
+    "lint": "run-s lint:api lint:ui",
+    "lint:api": "cd ./api && npm run lint",
+    "lint:ui": "cd ./ui && npm run lint"
+  },
+  "dependencies": {
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.2.1"
   }
-  
+}

ui/.env

@@ -5,4 +5,4 @@ VITE_API_URI=
 VITE_PROXY_HOST=
 VITE_SENTRY_API=
 
-SECRET=
+SECRET=

ui/package.json

@@ -17,6 +17,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@sentry/react": "^7.45.0",
+    "@sentry/tracing": "^7.45.0",
     "i18next": "^19.9.2",
     "i18next-browser-languagedetector": "^6.0.1",
     "jwt-decode": "^3.1.2",

ui/playwright.config.ts

@@ -4,7 +4,10 @@ export default defineConfig({
   timeout: 5000,
   testDir: 'src/__tests__',
 
-  reporter: 'html',
+  reporter: [
+    ['github'],
+    ['html']
+  ],
   /* Configure projects for major browsers */
   projects: [
     {
@@ -16,7 +19,8 @@ export default defineConfig({
     {
       command: 'cd ../api && npm run dev',
       port: 4000,
-      timeout: 120 * 1000
+      timeout: 120 * 1000,
+      stdout: 'pipe',
     },
     {
       command: 'npm run dev',

ui/src/__tests__/e2e/UserFlow.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test';
 
 // Test Landing Page and Nav Bar
 test('Landing page', async ({ page }) => {
+  await page.goto('/');
   // Check that the page title is correct
   await expect(page).toHaveTitle('Portfolio');
   // Check that the page header is correct

ui/src/hooks/useAuth.ts

@@ -4,5 +4,9 @@ import AuthContext from '../context/AuthContext';
 export default function useAuth() {
   const context = useContext(AuthContext);
 
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
   return context;
 }