Feat/user page test cases

__tests__/UsersPage.test.js

@@ -0,0 +1,115 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import UsersPage from "../src/app/(app)/users/page";
+import { useUserActions } from "@/hooks/user";
+import { useAuth } from "@/hooks/auth";
+import React from "react";
+
+// Mock hooks
+jest.mock("@/hooks/user");
+jest.mock("@/hooks/auth");
+
+const mockUsers = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "[email protected]",
+    roles: [{ name: "Admin" }],
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "[email protected]",
+    roles: [{ name: "User" }],
+  },
+];
+
+const mockRoles = [
+  { id: 1, name: "Admin" },
+  { id: 2, name: "User" },
+];
+
+describe("UsersPage Component", () => {
+  let mockFetchUsers, mockFetchRoles, mockUpdateUserRoles, mockDeleteUser;
+
+  beforeEach(() => {
+    mockFetchUsers = jest
+      .fn()
+      .mockResolvedValue({ data: mockUsers, last_page: 1 });
+    mockFetchRoles = jest.fn().mockResolvedValue(mockRoles);
+    mockUpdateUserRoles = jest.fn().mockResolvedValue({});
+    mockDeleteUser = jest.fn().mockResolvedValue({});
+
+    useUserActions.mockReturnValue({
+      fetchUsers: mockFetchUsers,
+      fetchRoles: mockFetchRoles,
+      updateUserRoles: mockUpdateUserRoles,
+      deleteUser: mockDeleteUser,
+    });
+
+    useAuth.mockReturnValue({ user: { id: 3, name: "Admin User" } });
+  });
+
+  test("renders user list and roles dropdown correctly", async () => {
+    render(<UsersPage />);
+
+    // Check loading state
+    expect(screen.getByTestId("loading-users")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(mockFetchUsers).toHaveBeenCalledTimes(1);
+      expect(screen.queryByTestId("loading-users")).not.toBeInTheDocument();
+    });
+
+    // Verify user data
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
+
+    // Verify role selects
+    expect(screen.getByTestId("role-select-1")).toBeInTheDocument();
+    expect(screen.getByTestId("role-select-2")).toBeInTheDocument();
+  });
+
+  test("updates user role and refreshes data", async () => {
+    render(<UsersPage />);
+
+    await waitFor(() => expect(mockFetchUsers).toHaveBeenCalledTimes(1));
+
+    const roleSelect = await screen.findByTestId("role-select-2");
+    fireEvent.change(roleSelect, { target: { value: "Admin" } });
+
+    await waitFor(() => {
+      expect(mockUpdateUserRoles).toHaveBeenCalledWith(2, ["Admin"]);
+      expect(mockFetchUsers).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  test("deletes a user after confirmation", async () => {
+    render(<UsersPage />);
+
+    await waitFor(() => expect(mockFetchUsers).toHaveBeenCalledTimes(1));
+
+    const deleteButton = await screen.findByTestId("delete-user-2");
+    fireEvent.click(deleteButton);
+
+    const confirmButton = await screen.findByText("Confirm");
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(mockDeleteUser).toHaveBeenCalledWith(2);
+      expect(mockFetchUsers).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  test("handles pagination with Next button", async () => {
+    mockFetchUsers.mockResolvedValueOnce({ data: mockUsers, last_page: 2 });
+
+    render(<UsersPage />);
+
+    await waitFor(() => expect(mockFetchUsers).toHaveBeenCalledTimes(1));
+
+    const nextButton = await screen.findByTestId("pagination-next");
+    fireEvent.click(nextButton);
+
+    await waitFor(() => expect(mockFetchUsers).toHaveBeenCalledWith(2));
+  });
+});

src/app/(app)/users/page.js

@@ -83,25 +83,15 @@ const UsersPage = () => {
     setUserToDelete(null);
   };
 
-  const handleSearchChange = (value) => {
-    setSearchQuery(value);
-  };
-
-  const handlePageChange = (newPage) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage);
-    }
-  };
-
-  if (loading) return <p>Loading users...</p>;
+  if (loading) return <p data-testid="loading-users">Loading users...</p>;
 
   return (
     <div className="py-12">
       <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <h1 className="text-2xl font-bold mb-6">Manage Users</h1>
         <SearchBar
           searchQuery={searchQuery}
-          onSearchChange={handleSearchChange}
+          onSearchChange={(value) => setSearchQuery(value)}
         />
         <div className="overflow-x-auto mt-4">
           <table className="min-w-full table-auto border rounded-lg overflow-hidden">
@@ -114,73 +104,67 @@ const UsersPage = () => {
               </tr>
             </thead>
             <tbody>
-              {filteredUsers.length > 0 ? (
-                filteredUsers.map((user) => (
-                  <tr key={user.id} className="odd:bg-gray-50 even:bg-white">
-                    <td className="p-4 text-gray-700 truncate max-w-xs">
-                      {user.name}
-                    </td>
-                    <td className="p-4 text-gray-700 truncate max-w-xs">
-                      {user.email}
-                    </td>
-                    <td className="p-4 text-center">
-                      <select
-                        value={user?.roles?.[0]?.name || ""}
-                        onChange={(e) =>
-                          handleRoleChange(user.id, e.target.value)
+              {filteredUsers.map((user) => (
+                <tr key={user.id} className="odd:bg-gray-50 even:bg-white">
+                  <td className="p-4 text-gray-700 truncate max-w-xs">
+                    {user.name}
+                  </td>
+                  <td className="p-4 text-gray-700 truncate max-w-xs">
+                    {user.email}
+                  </td>
+                  <td className="p-4 text-center">
+                    <select
+                      data-testid={`role-select-${user.id}`}
+                      value={user?.roles?.[0]?.name || ""}
+                      onChange={(e) =>
+                        handleRoleChange(user.id, e.target.value)
+                      }
+                      className="w-32 p-2 border rounded"
+                    >
+                      <option value="">Select Role</option>
+                      {roles.map((role) => (
+                        <option key={role.id} value={role.name}>
+                          {role.name}
+                        </option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className="p-4 text-center">
+                    <Button
+                      data-testid={`delete-user-${user.id}`}
+                      onClick={() => {
+                        if (user.id !== currentUser.id) {
+                          setUserToDelete(user.id);
+                          setIsPopupOpen(true);
                         }
-                        className="w-32 p-2 border rounded"
-                      >
-                        <option value="">Select Role</option>
-                        {roles.map((role) => (
-                          <option key={role.id} value={role.name}>
-                            {role.name}
-                          </option>
-                        ))}
-                      </select>
-                    </td>
-                    <td className="p-4 text-center">
-                      <Button
-                        onClick={() => {
-                          if (user.id !== currentUser.id) {
-                            setUserToDelete(user.id);
-                            setIsPopupOpen(true);
-                          }
-                        }}
-                        disabled={user.id === currentUser.id}
-                        className="bg-red-500 hover:bg-red-600"
-                      >
-                        Delete
-                      </Button>
-                    </td>
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td colSpan="4" className="p-4 text-center">
-                    No users found.
+                      }}
+                      disabled={user.id === currentUser.id}
+                      className="bg-red-500 hover:bg-red-600"
+                    >
+                      Delete
+                    </Button>
                   </td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
 
         <div className="flex justify-between mt-6">
           <Button
-            onClick={() => handlePageChange(currentPage - 1)}
+            data-testid="pagination-previous"
+            onClick={() => setCurrentPage(currentPage - 1)}
             disabled={currentPage === 1}
-            className="px-4 py-2 bg-gray-300 rounded"
           >
             Previous
           </Button>
           <span>
             Page {currentPage} of {totalPages}
           </span>
           <Button
-            onClick={() => handlePageChange(currentPage + 1)}
+            data-testid="pagination-next"
+            onClick={() => setCurrentPage(currentPage + 1)}
             disabled={currentPage === totalPages}
-            className="px-4 py-2 bg-gray-300 rounded"
           >
             Next
           </Button>
@@ -190,10 +174,7 @@ const UsersPage = () => {
           isOpen={isPopupOpen}
           message="Are you sure you want to delete this user?"
           onConfirm={handleConfirmDelete}
-          onCancel={() => {
-            setIsPopupOpen(false);
-            setUserToDelete(null);
-          }}
+          onCancel={() => setIsPopupOpen(false)}
         />
       </div>
     </div>