Add e2e testing

.github/workflows/ci.yml

@@ -38,6 +38,6 @@ jobs:
           node-version: '18.x'
           cache: 'npm'
       - run: npm install
-      - run: npm run test
       - run: npm run lint
+      - run: npm run test
 

ui/.eslintrc

@@ -16,7 +16,12 @@
     "prettier",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["react", "react-hooks", "@typescript-eslint", "import"],
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "import"
+  ],
   "env": {
     "browser": true,
     "es6": true
@@ -39,7 +44,8 @@
           "**/*.stories.*",
           "**/.storybook/**/*.*",
           "**/.jest-canvas-mock/**/*.*",
-          "**/*.d.ts"
+          "**/*.d.ts",
+          "**/*.spec.*"
         ],
         "peerDependencies": true
       }

ui/.gitignore

@@ -22,3 +22,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# playwright
+/playwright-report
+/test-results

ui/package.json

@@ -8,6 +8,8 @@
     "docker": "vite --host",
     "preview": "vite preview",
     "test": "vitest",
+    "test:e2e": "playwright test ./src/__tests__/e2e",
+    "test:e2e:debug": "playwright test ./src/__tests__/e2e --debug",
     "coverage": "vitest run --coverage",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
@@ -28,6 +30,7 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.37.1",
     "@storybook/addon-essentials": "^7.1.1",
     "@storybook/addon-interactions": "^7.1.1",
     "@storybook/addon-links": "^7.1.1",
@@ -56,6 +59,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^21.1.1",
+    "playwright": "^1.37.1",
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
     "storybook": "^7.1.1",

ui/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  timeout: 5000,
+  testDir: 'src/__tests__',
+
+  reporter: 'html',
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: [
+    {
+      command: 'cd ../api && npm run dev',
+      port: 4000,
+      timeout: 120 * 1000
+    },
+    {
+      command: 'npm run dev',
+      port: 5173,
+      timeout: 120 * 1000
+    }
+  ],
+  use: {
+    baseURL: 'http://localhost:5173'
+  }
+});

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

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+// Test Landing Page and Nav Bar
+test('Landing page', async ({ page }) => {
+  // Check that the page title is correct
+  await expect(page).toHaveTitle('Portfolio');
+  // Check that the page header is correct
+  await expect(page.locator('h1')).toHaveText('Welcome to my Portfolio');
+  // Check that the page has a nav bar
+  await expect(page.getByTestId('navbar')).toBeVisible();
+  // Check that the nav bar has the correct links
+  await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Admin' })).toBeVisible();
+});
+
+// Test Dashboard Page
+test('Dashboard page', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  // Check that component with test id aboutme-card is visible
+  await expect(page.getByTestId('aboutme-card')).toBeVisible();
+});
+
+// Test Login Page
+test('Admin page', async ({ page }) => {
+  await page.goto('/login');
+
+  // Check that the page header is correct
+  await expect(page.locator('h1')).toHaveText('Login Panel');
+});

ui/src/components/cards/AboutMeCard.tsx

@@ -21,7 +21,7 @@ const AboutMeCard = (props: AboutMeCardProps) => {
   const { t } = useTranslation();
 
   return (
-    <Wrapper>
+    <Wrapper data-testid="aboutme-card">
       <ImageWrapper src={avatarCard} data-testid="aboutImg" />
       <InfoWrapper>
         <InfoSection>

ui/src/components/layout/__tests__/HeaderTest.test.tsx

@@ -25,7 +25,7 @@ vi.mock('react-i18next', () => ({
 test('check exact three links', () => {
   render(
     <MemoryRouter>
-      <Header />
+      <Header user={undefined} logout={() => {}} />
     </MemoryRouter>
   );
   expect(screen.getAllByRole('link').length).toEqual(3);

ui/src/components/layout/header.tsx

@@ -34,7 +34,7 @@ const Header = ({ user, logout }: HeaderProps) => {
   const [isVisible, toggle] = useToggle(false);
 
   return (
-    <Wrapper>
+    <Wrapper data-testid="navbar">
       <Link to={home.link}>
         <LinkButton>{t(home.title)}</LinkButton>
       </Link>

ui/src/locales/en-us.json

@@ -4,7 +4,7 @@
         "description": "Personal Portfolio Webpage"
     },
     "app": {
-        "title": "Welcome to my Portfolio Webpage"
+        "title": "Welcome to my Portfolio Webpagesss"
     },
     "landing": {
         "title": "Welcome to my Portfolio"

ui/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 import { defineConfig, loadEnv } from 'vite';
 import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 const vitestConfig: VitestUserConfigInterface = {
   test: {
@@ -10,11 +10,18 @@ const vitestConfig: VitestUserConfigInterface = {
     },
     setupFiles: ['src/setupTest.ts'],
     environment: 'jsdom',
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/cypress/**',
+      '**/.{idea,git,cache,output,temp}/**',
+      './src/__tests__/e2e/**'
+    ]
   }
 };
 
 export default ({ mode }) => {
-  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   return defineConfig({
     test: vitestConfig.test,
@@ -24,9 +31,8 @@ export default ({ mode }) => {
         // string shorthand: http://localhost:5173/auth -> http://localhost:4000/auth
         '/auth': process.env.VITE_PROXY_HOST,
         // string shorthand: http://localhost:5173/v1 -> http://localhost:4000/v1
-        '/v1': process.env.VITE_PROXY_HOST,
-      },
-    },
+        '/v1': process.env.VITE_PROXY_HOST
+      }
+    }
   });
-}
-
+};