Tests

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }

package.json

@@ -13,7 +13,8 @@
     },
     "scripts": {
         "start": "react-scripts start",
-        "build": "react-scripts build"
+        "build": "react-scripts build",
+        "test": "react-scripts test"
     },
     "eslintConfig": {
         "extends": [
@@ -33,6 +34,18 @@
         ]
     },
     "devDependencies": {
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+        "@babel/core": "^7.24.3",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.24.3",
+        "@babel/preset-react": "^7.24.1",
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "babel-jest": "^29.7.0"
+    },
+    "jest": {
+        "transform": {
+            "^.+\\.jsx?$": "babel-jest"
+        }
     }
 }

src/components/SideDrawer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Drawer, List, ListItem, ListItemText } from "@mui/material";
+import { List, ListItem, ListItemText, SwipeableDrawer } from "@mui/material";
 import ModelSwitch from "./ModelSwitch";
 
 const SideDrawer = ({
@@ -13,7 +13,7 @@ const SideDrawer = ({
     onClearAll,
 }) => {
     return (
-        <Drawer PaperProps={{ sx: { width: 200 } }} open={isOpen} onClose={onToggle} onOpen={onToggle}>
+        <SwipeableDrawer PaperProps={{ sx: { width: 200 } }} open={isOpen} onClose={onToggle} onOpen={onToggle}>
             <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
                 <List style={{ flexGrow: 1, overflowY: "auto" }}>
                     <ListItem button onClick={onNewChat}>
@@ -34,7 +34,7 @@ const SideDrawer = ({
                     <ListItemText primary="Clear All" />
                 </ListItem>
             </div>
-        </Drawer>
+        </SwipeableDrawer>
     );
 };
 

src/components/__tests__/AppHeader.test.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import AppHeader from "../AppHeader";
+
+describe("AppHeader Component", () => {
+    const mockOnToggle = jest.fn();
+    const mockOnSignOut = jest.fn();
+    const mockOnOpenAuthModal = jest.fn();
+
+    it("renders without crashing", () => {
+        render(
+            <AppHeader
+                isAuthenticated={true}
+                userEmail="test@example.com"
+                onSignOut={mockOnSignOut}
+                onOpenAuthModal={mockOnOpenAuthModal}
+                onToggle={mockOnToggle}
+            />
+        );
+    });
+
+    // it("displays user avatar when authenticated", () => {
+    //     const { container } = render(
+    //         <AppHeader
+    //             isAuthenticated={true}
+    //             userEmail="test@example.com"
+    //             onSignOut={mockOnSignOut}
+    //             onOpenAuthModal={mockOnOpenAuthModal}
+    //             onToggle={mockOnToggle}
+    //         />
+    //     );
+    //     const avatar = container.querySelector('img[alt="User Avatar"]'); // Find the avatar by querying the container
+    //     expect(avatar).toBeInTheDocument();
+    // });
+
+    it("calls onSignOut when 'Sign Out' is clicked", () => {
+        const { container, getByText } = render(
+            <AppHeader
+                isAuthenticated={true}
+                userEmail="test@example.com"
+                onSignOut={mockOnSignOut}
+                onOpenAuthModal={mockOnOpenAuthModal}
+                onToggle={mockOnToggle}
+            />
+        );
+        const avatar = container.querySelector('img[alt="User Avatar"]'); // Find the avatar by querying the container
+        fireEvent.click(avatar); // Open user menu
+        const signOutButton = getByText("Sign Out");
+        fireEvent.click(signOutButton);
+        expect(mockOnSignOut).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onOpenAuthModal when 'Sign In' is clicked", () => {
+        const { getByText } = render(
+            <AppHeader
+                isAuthenticated={false}
+                userEmail=""
+                onSignOut={mockOnSignOut}
+                onOpenAuthModal={mockOnOpenAuthModal}
+                onToggle={mockOnToggle}
+            />
+        );
+        const signInButton = getByText(/Sign In/i); // Using regular expression
+        fireEvent.click(signInButton);
+        expect(mockOnOpenAuthModal).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onToggle when the menu icon is clicked", () => {
+        const { getByLabelText } = render(
+            <AppHeader
+                isAuthenticated={true}
+                userEmail="test@example.com"
+                onSignOut={mockOnSignOut}
+                onOpenAuthModal={mockOnOpenAuthModal}
+                onToggle={mockOnToggle}
+            />
+        );
+        const menuIcon = getByLabelText("open drawer");
+        fireEvent.click(menuIcon);
+        expect(mockOnToggle).toHaveBeenCalledTimes(1);
+    });
+});

src/components/__tests__/FileSelector.test.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import FileSelector from "../FileSelector";
+import "@testing-library/jest-dom/extend-expect";
+
+describe("FileSelector Component", () => {
+    it("renders without crashing", () => {
+        render(<FileSelector />);
+    });
+
+    // it("calls onFileSelect callback when a file is selected", () => {
+    //     const onFileSelectMock = jest.fn();
+    //     const { getByLabelText } = render(<FileSelector onFileSelect={onFileSelectMock} />);
+    //     const fileInput = getByLabelText("Upload PDF, Word, Excel or image");
+
+    //     fireEvent.change(fileInput, { target: { files: [new File([""], "test.png", { type: "image/png" })] } });
+
+    //     expect(onFileSelectMock).toHaveBeenCalledTimes(1);
+    //     expect(onFileSelectMock).toHaveBeenCalledWith(expect.any(File));
+    // });
+
+    // it("displays a circle icon when a file is selected", () => {
+    //     const { getByTestId, getByLabelText } = render(<FileSelector />);
+    //     const fileInput = getByLabelText("Upload PDF, Word, Excel or image");
+
+    //     fireEvent.change(fileInput, { target: { files: [new File([""], "test.png", { type: "image/png" })] } });
+
+    //     const circleIcon = getByTestId("circle-icon");
+    //     expect(circleIcon).toBeInTheDocument();
+    // });
+});

src/components/__tests__/ModelSwitch.test.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import ModelSwitch from "../ModelSwitch";
+import "@testing-library/jest-dom/extend-expect";
+
+describe("ModelSwitch Component", () => {
+    it("renders with default props", () => {
+        const { getByLabelText } = render(<ModelSwitch model="gemini" />);
+        const switchElement = getByLabelText("Gemini Pro");
+
+        expect(switchElement).toBeInTheDocument();
+    });
+
+    it("changes model on switch toggle", () => {
+        const onModelChangeMock = jest.fn();
+        const { getByLabelText } = render(<ModelSwitch model="gemini" onModelChange={onModelChangeMock} />);
+        const switchElement = getByLabelText("Gemini Pro");
+
+        fireEvent.click(switchElement);
+
+        expect(onModelChangeMock).toHaveBeenCalledWith("claude");
+    });
+
+    it("displays correct label based on model prop", () => {
+        const { getByLabelText, rerender } = render(<ModelSwitch model="gemini" />);
+        let switchElement = getByLabelText("Gemini Pro");
+
+        expect(switchElement).toBeInTheDocument();
+
+        rerender(<ModelSwitch model="claude" />);
+
+        switchElement = getByLabelText("Claude Haiku");
+
+        expect(switchElement).toBeInTheDocument();
+    });
+});

src/components/__tests__/SideDrawer.test.js

@@ -0,0 +1,100 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import SideDrawer from "../SideDrawer";
+
+describe("SideDrawer Component", () => {
+    const mockOnToggle = jest.fn();
+    const mockOnNewChat = jest.fn();
+    const mockOnHistorySelection = jest.fn();
+    const mockOnModelChange = jest.fn();
+    const mockOnClearAll = jest.fn();
+
+    const storedChatHistories = [
+        { summary: "Chat History 1" },
+        { summary: "Chat History 2" },
+        { summary: "Chat History 3" },
+    ];
+
+    it("renders without crashing", () => {
+        render(
+            <SideDrawer
+                isOpen={true}
+                onToggle={mockOnToggle}
+                onNewChat={mockOnNewChat}
+                storedChatHistories={storedChatHistories}
+                onHistorySelection={mockOnHistorySelection}
+                model="gemini"
+                onModelChange={mockOnModelChange}
+                onClearAll={mockOnClearAll}
+            />
+        );
+    });
+
+    it("calls onNewChat when 'New Chat' item is clicked", () => {
+        const { getByText } = render(
+            <SideDrawer
+                isOpen={true}
+                onToggle={mockOnToggle}
+                onNewChat={mockOnNewChat}
+                storedChatHistories={storedChatHistories}
+                onHistorySelection={mockOnHistorySelection}
+                model="gemini"
+                onModelChange={mockOnModelChange}
+                onClearAll={mockOnClearAll}
+            />
+        );
+        fireEvent.click(getByText("New Chat"));
+        expect(mockOnNewChat).toHaveBeenCalled();
+    });
+
+    it("calls onHistorySelection with correct index when a chat history item is clicked", () => {
+        const { getByText } = render(
+            <SideDrawer
+                isOpen={true}
+                onToggle={mockOnToggle}
+                onNewChat={mockOnNewChat}
+                storedChatHistories={storedChatHistories}
+                onHistorySelection={mockOnHistorySelection}
+                model="gemini"
+                onModelChange={mockOnModelChange}
+                onClearAll={mockOnClearAll}
+            />
+        );
+        fireEvent.click(getByText("Chat History 2"));
+        expect(mockOnHistorySelection).toHaveBeenCalledWith(1);
+    });
+
+    // it("calls onModelChange when ModelSwitch is toggled", () => {
+    //     const { getByLabelText } = render(
+    //         <SideDrawer
+    //             isOpen={true}
+    //             onToggle={mockOnToggle}
+    //             onNewChat={mockOnNewChat}
+    //             storedChatHistories={storedChatHistories}
+    //             onHistorySelection={mockOnHistorySelection}
+    //             model="gemini"
+    //             onModelChange={mockOnModelChange}
+    //             onClearAll={mockOnClearAll}
+    //         />
+    //     );
+    //     fireEvent.click(getByLabelText("Claude Haiku"));
+    //     expect(mockOnModelChange).toHaveBeenCalledWith("claude");
+    // });
+
+    it("calls onClearAll when 'Clear All' item is clicked", () => {
+        const { getByText } = render(
+            <SideDrawer
+                isOpen={true}
+                onToggle={mockOnToggle}
+                onNewChat={mockOnNewChat}
+                storedChatHistories={storedChatHistories}
+                onHistorySelection={mockOnHistorySelection}
+                model="gemini"
+                onModelChange={mockOnModelChange}
+                onClearAll={mockOnClearAll}
+            />
+        );
+        fireEvent.click(getByText("Clear All"));
+        expect(mockOnClearAll).toHaveBeenCalled();
+    });
+});