test(<ChatsList />): add unit tests (#498)

frontend/app/chat/components/ChatsList/__tests__/ChatList.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ChatsList } from "../index";
+
+const setOpenMock = vi.fn(() => ({}));
+
+vi.mock("../hooks/useChatsList", () => ({
+  useChatsList: () => ({
+    open: false,
+    setOpen: () => setOpenMock(),
+  }),
+}));
+
+vi.mock("@/lib/context/ChatsProvider/hooks/useChatsContext", () => ({
+  useChatsContext: () => ({
+    allChats: [
+      { chat_id: 1, name: "Chat 1" },
+      { chat_id: 2, name: "Chat 2" },
+    ],
+    deleteChat: vi.fn(),
+  }),
+}));
+
+vi.mock("@/lib/hooks", async () => {
+  const actual = await vi.importActual<typeof import("@/lib/hooks")>(
+    "@/lib/hooks"
+  );
+
+  return {
+    ...actual,
+    useAxios: () => ({
+      axiosInstance: vi.fn(),
+    }),
+  };
+});
+
+describe("ChatsList", () => {
+  it("should render correctly", () => {
+    const { getByTestId } = render(<ChatsList />);
+    const chatsList = getByTestId("chats-list");
+    expect(chatsList).toBeDefined();
+
+    const newChatButton = getByTestId("new-chat-button");
+    expect(newChatButton).toBeDefined();
+
+    const toggleButton = getByTestId("chats-list-toggle");
+    expect(toggleButton).toBeDefined();
+  });
+
+  it("renders the chats list with correct number of items", () => {
+    render(<ChatsList />);
+    const chatItems = screen.getAllByTestId("chats-list-item");
+    expect(chatItems).toHaveLength(2);
+  });
+
+  it("toggles the open state when the button is clicked", () => {
+    render(<ChatsList />);
+    const toggleButton = screen.getByTestId("chats-list-toggle");
+    fireEvent.click(toggleButton);
+
+    expect(setOpenMock).toHaveBeenCalledTimes(1);
+  });
+});

frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx

@@ -53,6 +53,7 @@ export const ChatsListItem = ({
           ? "bg-gray-100 dark:bg-gray-800 text-primary dark:text-white"
           : ""
       )}
+      data-testid="chats-list-item"
     >
       <Link
         className="flex flex-col flex-1 min-w-0 p-4"

frontend/app/chat/components/ChatsList/components/NewChatButton.tsx

@@ -4,6 +4,7 @@ import { BsPlusSquare } from "react-icons/bs";
 export const NewChatButton = (): JSX.Element => (
   <Link
     href="/chat"
+    data-testid="new-chat-button"
     className="px-4 py-2 mx-4 my-1 border border-primary bg-white dark:bg-black hover:text-white hover:bg-primary shadow-lg rounded-lg flex items-center justify-center top-1 z-20"
   >
     <BsPlusSquare className="h-6 w-6 mr-2" /> New Chat

frontend/app/chat/components/ChatsList/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 "use client";
-import useChatsContext from "@/lib/context/ChatsProvider/hooks/useChatsContext";
+import { useChatsContext } from "@/lib/context/ChatsProvider/hooks/useChatsContext";
 import { cn } from "@/lib/utils";
 import { MotionConfig, motion } from "framer-motion";
 import { MdChevronRight } from "react-icons/md";
@@ -37,10 +37,14 @@ export const ChatsList = (): JSX.Element => {
               : "10px 10px 16px rgba(0, 0, 0, 0.5)",
           }}
           className={cn("overflow-hidden flex flex-col flex-1")}
+          data-testid="chats-list"
         >
           <div className="flex flex-col flex-1">
             <NewChatButton />
-            <div className="flex-1 overflow-auto scrollbar h-full">
+            <div
+              data-testid="chats-list-items"
+              className="flex-1 overflow-auto scrollbar h-full"
+            >
               {allChats.map((chat) => (
                 <ChatsListItem
                   key={chat.chat_id}
@@ -57,6 +61,7 @@ export const ChatsList = (): JSX.Element => {
             setOpen(!open);
           }}
           className="absolute left-full top-16 text-3xl bg-black dark:bg-white text-white dark:text-black rounded-r-full p-3 pl-1"
+          data-testid="chats-list-toggle"
         >
           <motion.div
             whileTap={{ scale: 0.9 }}

frontend/lib/context/ChatsProvider/hooks/useChatsContext.tsx

@@ -3,7 +3,7 @@ import { useContext } from "react";
 
 import { ChatsContext } from "../chats-provider";
 
-const useChatsContext = () => {
+export const useChatsContext = () => {
   const context = useContext(ChatsContext);
 
   if (context === undefined) {
@@ -12,5 +12,3 @@ const useChatsContext = () => {
 
   return context;
 };
-
-export default useChatsContext;