Merge pull request #14 from jerseysu/unit-test-onboard

test(__tests__): onboarding the unit test

Author: jerseysu

.github/workflows/playwright.yml

@@ -18,10 +18,12 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run lint
+      - name: Run Unit Test
+        run: npm run test:ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
-        run: npx playwright test
+        run: npm run test:e2e
       - uses: actions/upload-artifact@v4
         if: always()
         with:

.gitignore

@@ -12,3 +12,4 @@ build/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+coverage/

package-lock.json

@@ -9,7 +9,6 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.14.10",
@@ -27,7 +26,8 @@
     "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage",
+    "test:ci": "CI=true react-scripts test  --no-watchAll --coverage",
     "test:e2e": "npx playwright test",
     "lint": "npx eslint .",
     "eject": "react-scripts eject"
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.45.1",
+    "@testing-library/react": "^16.0.0",
     "gh-pages": "^6.1.1",
     "typescript-eslint": "^7.16.0"
   }

package.json

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom'
+import Login from '../pages/Login';
+import { BrowserRouter } from 'react-router-dom'
+
+it('renders login page', () => {
+    render(<Login />, { wrapper: BrowserRouter });
+
+    const emailInputBox = screen.getByTestId('email');
+    const passwordInputBox = screen.getByTestId('password');
+
+    expect(screen.getByText(/Register/i)).toBeInTheDocument();
+    expect(emailInputBox).toBeInTheDocument();
+    expect(passwordInputBox).toBeInTheDocument();
+});
+

src/__tests__/login.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom'
+import LoginSuccess from '../pages/LoginSuccess';
+import { BrowserRouter } from 'react-router-dom'
+
+it('renders welcome message', () => {
+    render(<LoginSuccess />, { wrapper: BrowserRouter });
+    expect(screen.getByText(/LoginSuccess/i)).toBeInTheDocument();
+    expect(screen.getByAltText(/Jersey/i)).toBeInTheDocument();
+    expect(screen.getByRole('img')).toBeInTheDocument();
+});
+

src/__tests__/loginSuccess.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom'
+import Register from '../pages/Register';
+import { BrowserRouter } from 'react-router-dom'
+
+it('renders register page', () => {
+    render(<Register />, { wrapper: BrowserRouter });
+
+    const emailInputBox = screen.getByTestId('email');
+    const passwordInputBox = screen.getByTestId('password');
+    const userInputBox = screen.getByTestId('name');
+    expect(screen.getByText(/Login/i)).toBeInTheDocument();
+    expect(emailInputBox).toBeInTheDocument();
+    expect(passwordInputBox).toBeInTheDocument();
+    expect(userInputBox).toBeInTheDocument();
+});
+