Add e2e testing

.github/workflows/ci.yml

@@ -37,7 +37,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: npx playwright install --with-deps
+      - 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: playwright-report/
+          retention-days: 30
 

package.json

@@ -1,46 +1,43 @@
 {
-    "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",
+    "start": "run-p start:*",
+    "start:api": "cd ./api && npm start",
+    "start:ui": "echo \"...available at ./ui/public\"",
+    "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/playwright.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   timeout: 5000,
   testDir: 'src/__tests__',
 
-  reporter: 'html',
+  reporter: 'list',
   /* Configure projects for major browsers */
   projects: [
     {

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