test(<ChatPage/>: add render test using providers

frontend/app/chat/[chatId]/__tests__/page.test.tsx

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  BrainConfigContextMock,
+  BrainConfigProviderMock,
+} from "@/lib/context/BrainConfigProvider/mocks/BrainConfigProviderMock";
+import {
+  BrainContextMock,
+  BrainProviderMock,
+} from "@/lib/context/BrainProvider/mocks/BrainProviderMock";
+import {
+  ChatContextMock,
+  ChatProviderMock,
+} from "@/lib/context/ChatProvider/mocks/ChatProviderMock";
+import {
+  SupabaseContextMock,
+  SupabaseProviderMock,
+} from "@/lib/context/SupabaseProvider/mocks/SupabaseProviderMock";
+
+import ChatPage from "../page";
+
+vi.mock("@/lib/context/ChatProvider/ChatProvider", () => ({
+  ChatContext: ChatContextMock,
+  ChatProvider: ChatProviderMock,
+}));
+
+vi.mock("@/lib/context/SupabaseProvider/supabase-provider", () => ({
+  SupabaseContext: SupabaseContextMock,
+}));
+
+vi.mock("@/lib/context/BrainProvider/brain-provider", () => ({
+  BrainContext: BrainContextMock,
+}));
+
+vi.mock("@/lib/context/BrainConfigProvider/brain-config-provider", () => ({
+  BrainConfigContext: BrainConfigContextMock,
+}));
+
+describe("Chat page", () => {
+  it("should render chat page correctly", () => {
+    const { getByTestId, getByText } = render(
+      <SupabaseProviderMock>
+        <BrainConfigProviderMock>
+          <BrainProviderMock>
+            <ChatPage />,
+          </BrainProviderMock>
+        </BrainConfigProviderMock>
+      </SupabaseProviderMock>
+    );
+
+    expect(getByTestId("chat-page")).toBeDefined();
+    expect(getByTestId("chat-messages")).toBeDefined();
+    expect(getByTestId("chat-input")).toBeDefined();
+
+    expect(getByText("Chat with your brain")).toBeDefined();
+    expect(
+      getByText("Talk to a language model about your uploaded data")
+    ).toBeDefined();
+  });
+});

frontend/app/chat/[chatId]/components/ChatMessages/hooks/useChatMessages.ts

@@ -12,7 +12,8 @@ export const useChatMessages = () => {
 
   const scrollToBottom = useCallback(() => {
     if (chatListRef.current) {
-      chatListRef.current.scrollTo({
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      chatListRef.current.scrollTo?.({
         top: chatListRef.current.scrollHeight,
         behavior: "smooth",
       });

frontend/app/chat/[chatId]/components/ChatMessages/index.tsx

@@ -14,6 +14,7 @@ export const ChatMessages = (): JSX.Element => {
     <Card
       className="p-5 max-w-3xl w-full flex flex-col mb-8 overflow-y-auto scrollbar"
       ref={chatListRef}
+      data-testid="chat-messages"
     >
       <div className="flex-1">
         {history.length === 0 ? (

frontend/app/chat/[chatId]/page.tsx

@@ -1,14 +1,13 @@
-/* eslint-disable */
 "use client";
 
 import PageHeading from "@/lib/components/ui/PageHeading";
+import { ChatProvider } from "@/lib/context/ChatProvider";
 
-import { ChatProvider } from "../../../lib/context/ChatProvider";
 import { ChatInput, ChatMessages } from "./components";
 
-export default function ChatPage() {
+const ChatPage = (): JSX.Element => {
   return (
-    <main className="flex flex-col w-full pt-10">
+    <main className="flex flex-col w-full pt-10" data-testid="chat-page">
       <section className="flex flex-col flex-1 items-center w-full h-full min-h-[70vh]">
         <PageHeading
           title="Chat with your brain"
@@ -25,4 +24,6 @@ export default function ChatPage() {
       </section>
     </main>
   );
-}
+};
+
+export default ChatPage;

frontend/lib/tests/renderWithMockContexts.tsx

@@ -1,17 +0,0 @@
-import { render } from "@testing-library/react";
-import { BrainConfigProviderMock } from "../context/BrainConfigProvider/mocks/BrainConfigProviderMock";
-import { BrainProviderMock } from "../context/BrainProvider/mocks/BrainProviderMock";
-import { ChatProviderMock } from "../context/ChatProvider/mocks/ChatProviderMock";
-import { SupabaseProviderMock } from "../context/SupabaseProvider/mocks/SupabaseProviderMock";
-
-export const renderWithMockContexts = (component: JSX.Element) => {
-  return render(
-    <SupabaseProviderMock>
-      <BrainConfigProviderMock>
-        <ChatProviderMock>
-          <BrainProviderMock>{component}</BrainProviderMock>
-        </ChatProviderMock>
-      </BrainConfigProviderMock>
-    </SupabaseProviderMock>
-  );
-};