Merge pull request #1276 from dacadeorg/test/user-card-component

feat: add test for the user card component

Author: musayann

__mocks__/fixtures/user.ts

@@ -12,8 +12,8 @@ export const mockUser: User = {
   uid: "uuid-uuido-232-dex0232-2331",
   joined: "14 days ago",
   disabled: false,
-  reputation: 0,
-  username: "",
+  reputation: 2,
+  username: "Rouven",
   lastName: "",
   emailVerified: false,
   email: "",

__tests__/components/cards/User.test.tsx

@@ -0,0 +1,59 @@
+import UserCard from "@/components/cards/User";
+import { renderWithRedux } from "@__mocks__/renderWithRedux";
+import { mockUser } from "@__mocks__/fixtures/user";
+import { fireEvent, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(() => ({
+    locale: "en",
+    push: mockPush,
+  })),
+}));
+const teamMembers = [mockUser];
+const handleClick = jest.fn(() => {});
+const mockPush = jest.fn();
+
+describe("User card component", () => {
+  const timestamp = {
+    date: new Date(),
+    text: "",
+  };
+  beforeEach(() => {
+    renderWithRedux(
+      <UserCard user={mockUser} timestamp={timestamp} teamMembers={teamMembers} onClick={handleClick} link="/testlink">
+        <div>test link</div>
+      </UserCard>
+    );
+  });
+  // Mock window.getSelection
+  window.getSelection = jest.fn().mockReturnValue({
+    type: "Caret",
+  });
+  it("Renders the card component", () => {
+    expect(screen.getByTestId("userId")).toBeInTheDocument();
+    expect(screen.getAllByTestId("avatar").length).toEqual(teamMembers.length);
+    const linkElements = screen.getAllByRole("link");
+    linkElements.forEach((element, index) => {
+      if (teamMembers[index]) {
+        const expectedHref = `/profile/${teamMembers[index].username}`;
+        expect(element).toHaveAttribute("href", expectedHref);
+      }
+    });
+  });
+
+  it("Renders the correct tag and currecy when teamMembers is not empty", () => {
+    expect(screen.getByTestId("currencyId")).toBeInTheDocument();
+    expect(screen.getByTestId("tag")).toBeInTheDocument();
+  });
+
+  it("Calls onClick prop when clicked", () => {
+    fireEvent.click(screen.getByTestId("userId"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+  it("Navigates to the correct link when clicked", () => {
+    const element = screen.getByText("test link");
+    fireEvent.click(element);
+    expect(mockPush).toHaveBeenCalledWith("/testlink");
+  });
+});

src/components/cards/User.tsx

@@ -33,6 +33,7 @@ interface UserProps {
   submission?: Submission;
   teamMembers?: User[];
   onClick?: () => void;
+  testId?: string
 }
 
 /**
@@ -51,7 +52,7 @@ interface UserProps {
 }
  * @returns {ReactElement}
  */
-export default function UserCard({ boxLayout, link, bordered, expanded, user, badge = "", timestamp, children, className, teamMembers, onClick }: UserProps): ReactElement {
+export default function UserCard({ boxLayout, link, bordered, expanded, user, badge = "", timestamp, children, className, teamMembers, onClick, testId="userId" }: UserProps): ReactElement {
   const { locale, push } = useRouter();
   const colors = useSelector((state) => state.ui.colors);
 
@@ -77,7 +78,7 @@ export default function UserCard({ boxLayout, link, bordered, expanded, user, ba
     "cursor-pointer": link,
   });
   return (
-    <div className={userCardClassName} onClick={handleClick}>
+    <div data-testid={testId} className={userCardClassName} onClick={handleClick}>
       <div className={`z-10 ${boxLayout ? "relative flex-none" : "absolute top-0 left-0"}`}>
         {teamMembers && teamMembers?.length ? (
           <div className="w-15 h-15 rounded-full bg-gray-800 overflow-hidden grid grid-cols-2 items-between">