added test cases for viewprofile page

.github/workflows/node.js.yml

@@ -33,3 +33,4 @@ jobs:
     - name: Run Eslint
       run: npm run lint
     - run: npm run build --if-present
+      working-directory: frontend

frontend/__test__/hooks/useUser.test.ts

@@ -30,6 +30,10 @@ vi.mock('react-router-dom', () => ({
   MemoryRouter: ({ children }) => children,
 }));
 
+// Mock window.alert to prevent "Not implemented" error
+vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+
 describe('useLogin Hook', () => {
   const setAuth = vi.fn();
   const setAppLoading = vi.fn();

frontend/__test__/pages/LoginPage.test.tsx

@@ -33,7 +33,7 @@ describe("Login Page renders corriquely", () => {
     render(<LoginPage />, { wrapper: BrowserRouter });
 
     const emailInput = await screen.findByPlaceholderText(
-      "Email or phone number"
+      "Email address"
     );
     const passwordInput = await screen.findByPlaceholderText(
       "Enter your password"
@@ -46,7 +46,7 @@ describe("Login Page renders corriquely", () => {
   it("이메일 및 비밀번호 필드의 값을 업데이트해야 합니다", async () => {
     render(<LoginPage />, { wrapper: BrowserRouter });
 
-    const emailInput = screen.getByPlaceholderText("Email or phone number");
+    const emailInput = screen.getByPlaceholderText("Email address");
     const passwordInput = screen.getByPlaceholderText("Enter your password");
 
     fireEvent.change(emailInput, { target: { value: "[email protected]" } });
@@ -55,6 +55,4 @@ describe("Login Page renders corriquely", () => {
     expect(emailInput).toHaveProperty("value", "[email protected]");
     expect(passwordInput).toHaveProperty("value", "password123");
   });
-
-
 });

frontend/__test__/pages/ViewProfile.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
+import { fireEvent, render, renderHook, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import ViewProfile from "../../src/pages/ViewProfile";
+import useGetDriver from "../../src/hooks/driver-hooks/useGetDriver";
+import useAuth from "../../src/hooks/context-hooks/useAuth";
+
+// Mock the hooks
+vi.mock("../../src/hooks/driver-hooks/useGetDriver");
+vi.mock("../../src/hooks/context-hooks/useAuth");
+
+// Mock useGetDriver to return loading state
+
+// Mock useAuth to return an admin user
+vi.mocked(useAuth).mockReturnValue({
+  auth: { isAdmin: true },
+});
+
+const sampleDriver = {
+  date_of_birth: "2000-05-20",
+  email: "[email protected]",
+  id: "123",
+  driver_type: "Student",
+  first_name: "Yoshinori",
+  last_name: "Kanemoto",
+  is_driver_registered: false,
+  license_expiration_date: "11/12/24",
+  license_number: "123",
+  middle_name: "Perfas",
+  sex: "Male",
+  user_id: "123",
+};
+
+describe("ViewProfile Component", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    (useGetDriver as Mock).mockReturnValue({
+      loading: false,
+      driver: sampleDriver,
+    });
+
+    vi.mocked(useAuth).mockReturnValue({
+      auth: { isAdmin: true },
+    });
+  });
+
+  it("should be loading when there is no driver yet", () => {
+    vi.mocked(useGetDriver).mockReturnValue({
+      driver: {},
+      loading: true,
+    });
+
+    renderHook(() => useGetDriver("123"));
+
+    render(<ViewProfile />, { wrapper: BrowserRouter });
+
+    expect(useGetDriver).toReturnWith({
+      loading: true,
+      driver: {},
+    });
+    expect(screen.getByTestId("loading-component")).toBeDefined();
+  });
+
+  it("should initially render profile information correctly", () => {
+    // Render the component
+    render(<ViewProfile />, { wrapper: BrowserRouter });
+
+    renderHook(() => useGetDriver("123"));
+
+    expect(screen.getByTestId("profile-lastname")).toBeDefined();
+    expect(screen.getByText("Kanemoto")).toBeDefined();
+
+    expect(useGetDriver).toHaveBeenCalledWith("123");
+    expect(useGetDriver).toReturnWith({
+      loading: false,
+      driver: {
+        date_of_birth: "2000-05-20",
+        email: "[email protected]",
+        id: "123",
+        driver_type: "Student",
+        first_name: "Yoshinori",
+        last_name: "Kanemoto",
+        is_driver_registered: false,
+        license_expiration_date: "11/12/24",
+        license_number: "123",
+        middle_name: "Perfas",
+        sex: "Male",
+        user_id: "123",
+      },
+    });
+  });
+
+  it("should render the vehicle list correctly", () => {
+    render(<ViewProfile />, { wrapper: BrowserRouter });
+    const vehichleListButton = screen.getByTestId("vehicle-button")
+
+    fireEvent.click(vehichleListButton)
+    expect(screen.getByTestId("vehichlelist")).toBeDefined()
+  })
+});

frontend/src/components/AdminViewProfileComponent/Profile.tsx

@@ -4,20 +4,7 @@ import useEditDriver from "../../hooks/driver-hooks/useEditDriver";
 
 const Profile = ({ driver }: { driver: DriverWithVandC }) => {
   const [isEditing, setIsEditing] = useState(false); // Track edit mode
-  const [formData, setFormData] = useState<DriverWithVandC>({
-    id: driver.id,
-    last_name: driver.last_name,
-    first_name: driver.first_name,
-    middle_name: driver.middle_name,
-    sex: driver.sex,
-    date_of_birth: driver.date_of_birth,
-    driver_type: driver.driver_type,
-    email: driver.email,
-    license_number: driver.license_number,
-    license_expiration_date: driver.license_expiration_date,
-  });
-
-  console.log(driver);
+  const [formData, setFormData] = useState<DriverWithVandC>(driver);
 
   const { editDriver } = useEditDriver();
 
@@ -42,7 +29,9 @@ const Profile = ({ driver }: { driver: DriverWithVandC }) => {
           <form className="lg:space-y-8 md:space-y-10 sm:space-y-12 space-y-14">
             <div className="flex space-x-1">
               <div className="flex-1">
-                <h1 className="text-white font-syke-light lg:text-lg md:text-md sm:text-sm text-xs">
+                <h1 className="text-white font-syke-light lg:text-lg md:text-md sm:text-sm text-xs"
+
+                data-testid="profile-lastname">
                   Last Name:
                 </h1>
                 {isEditing ? (

frontend/src/components/AdminViewProfileComponent/VehicleList.tsx

@@ -3,14 +3,15 @@ import { DriverWithVandC } from "../../types/datatypes";
 
 const VehicleList = ({ driver }: { driver: DriverWithVandC }) => {
   return (
-    <div className="flex flex-col items-center justify-center w-full">
+    <div
+      className="flex flex-col items-center justify-center w-full"
+      data-testid="vehichlelist"
+    >
       <div className="w-full md:h-[25rem] h-full bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 overflow-y-auto scrollbar">
-        {driver.cars!.map((car) => (
-          <CarListCard
-            key={car.id || "placeholder-license"}
-            car={car}
-          />
-        ))}
+        {
+          driver.cars?.map((car) => (
+            <CarListCard key={car.id || "placeholder-license"} car={car} />
+          ))}
       </div>
     </div>
   );

frontend/src/components/Loading.tsx

@@ -2,15 +2,13 @@ import { Spinner } from "react-activity";
 
 const Loading = ({ loading }: { loading: boolean }) => {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-hoverbutton">
-      <Spinner
-        size={50}
-        color="#008000"
-        animating={loading}
-      />
+    <div
+      data-testid="loading-component"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-hoverbutton"
+    >
+      <Spinner size={50} color="#008000" animating={loading} />
     </div>
   );
 };
 
-
 export default Loading;

frontend/src/context/AuthContext.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, useState } from "react";
+import { createContext, PropsWithChildren, useState } from "react";
 import { AuthContextType } from "../types/user.types";
 
 const AuthContext = createContext({});
 
-export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+export const AuthProvider = ({ children }: PropsWithChildren) => {
   const [auth, setAuth] = useState<AuthContextType>();
 
   return (

frontend/src/pages/ViewProfile.tsx

@@ -53,7 +53,9 @@ const ViewProfile = () => {
                     activeSection === "vehicle"
                       ? "text-textgreen"
                       : "text-white hover:text-textgreen"
-                  }`}>
+                  }`}
+                  data-testid="vehicle-button"
+                  >
                   Vehicles
                 </button>