Add test for new GenerativeAIToggle component

components/Search/GenerativeAIToggle.test.tsx

@@ -0,0 +1,117 @@
+import {
+  SearchProvider,
+  defaultState as defaultSearchState,
+} from "@/context/search-context";
+import { render, screen } from "@testing-library/react";
+
+import GenerativeAIToggle from "./GenerativeAIToggle";
+import React from "react";
+import { UserContext } from "@/context/user-context";
+import { UserContext as UserContextType } from "@/types/context/user";
+import mockRouter from "next-router-mock";
+import userEvent from "@testing-library/user-event";
+
+const defaultUser = {
+  user: {
+    email: "[email protected]",
+    isLoggedIn: true,
+    isReadingRoom: false,
+    name: "Ace Frehley",
+    sub: "xyz123",
+  },
+};
+
+const withUserProvider = (
+  Component: React.ReactNode,
+  user: UserContextType = defaultUser
+) => {
+  return <UserContext.Provider value={user}>{Component}</UserContext.Provider>;
+};
+
+const withSearchProvider = (
+  Component: React.ReactNode,
+  initialState = defaultSearchState
+) => {
+  return (
+    <SearchProvider initialState={initialState}>{Component}</SearchProvider>
+  );
+};
+
+describe("GenerativeAIToggle", () => {
+  it("renders the generative AI toggle UI and toggles state for a logged in user", async () => {
+    const user = userEvent.setup();
+    render(
+      withUserProvider(
+        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />)
+      )
+    );
+
+    const label = screen.getByLabelText("Use Generative AI");
+    const checkbox = screen.getByRole("checkbox");
+
+    expect(label).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it("renders the generative AI tooltip", () => {
+    render(withSearchProvider(<GenerativeAIToggle isSearchActive={true} />));
+    // Target the svg icon itself
+    const tooltip = screen.getByText("Information Circle");
+
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it("renders the generative AI dialog for a non-logged in user", async () => {
+    const user = userEvent.setup();
+    const nonLoggedInUser = {
+      user: {
+        ...defaultUser.user,
+        isLoggedIn: false,
+      },
+    };
+
+    render(
+      withUserProvider(
+        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />),
+        nonLoggedInUser
+      )
+    );
+
+    const checkbox = screen.getByRole("checkbox");
+    await user.click(checkbox);
+
+    const generativeAIDialog = screen.queryByText(
+      "You must be logged in with a Northwestern NetID to use the Generative AI search feature."
+    );
+    const cancelButton = screen.getByText("Cancel");
+
+    expect(generativeAIDialog).toBeInTheDocument();
+    expect(screen.getByText("Login")).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+
+    await user.click(cancelButton);
+
+    expect(generativeAIDialog).not.toBeInTheDocument();
+  });
+
+  it("renders a toggled generative ai state when a query param is set", () => {
+    const activeSearchState = {
+      ...defaultSearchState,
+      isGenerativeAI: true,
+    };
+
+    mockRouter.setCurrentUrl("/search?ai=true");
+    render(
+      withSearchProvider(
+        <GenerativeAIToggle isSearchActive={true} />,
+        activeSearchState
+      )
+    );
+
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+});

components/Search/GenerativeAIToggle.tsx

@@ -31,7 +31,7 @@ const TooltipContent = styled(Tooltip.Content, {
 function GenerativeAITooltip() {
   return (
     <Tooltip.Provider delayDuration={20}>
-      <Tooltip.Root>
+      <Tooltip.Root data-testid="tooltip">
         <TooltipTrigger>
           <IconInfo />
         </TooltipTrigger>

components/Search/newFile.tsx

@@ -0,0 +1,73 @@
+import {
+  defaultUser,
+  withSearchProvider,
+  withUserProvider,
+} from "./GenerativeAIToggle.test";
+import { render, screen } from "@testing-library/react";
+
+import GenerativeAIToggle from "./GenerativeAIToggle";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+
+describe("GenerativeAIToggle", () => {
+  it("renders the generative AI toggle UI and toggles state for a logged in user", async () => {
+    const user = userEvent.setup();
+    render(
+      withUserProvider(
+        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />)
+      )
+    );
+
+    const label = screen.getByLabelText("Use Generative AI");
+    const checkbox = screen.getByRole("checkbox");
+
+    expect(label).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it("renders the generative AI tooltip", () => {
+    render(withSearchProvider(<GenerativeAIToggle isSearchActive={true} />));
+    // Target the svg icon itself
+    const tooltip = screen.getByText("Information Circle");
+
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it("renders the generative AI dialog for a non-logged in user", async () => {
+    const user = userEvent.setup();
+    const nonLoggedInUser = {
+      user: {
+        ...defaultUser.user,
+        isLoggedIn: false,
+      },
+    };
+
+    render(
+      withUserProvider(
+        withSearchProvider(<GenerativeAIToggle isSearchActive={true} />),
+        nonLoggedInUser
+      )
+    );
+
+    const checkbox = screen.getByRole("checkbox");
+    await user.click(checkbox);
+
+    const generativeAIDialog = screen.getByText(
+      "You must be logged in with a Northwestern NetID to use the Generative AI search feature."
+    );
+    const cancelButton = screen.getByText("Cancel");
+
+    expect(generativeAIDialog).toBeInTheDocument();
+    expect(screen.getByText("Login")).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+
+    user.click(cancelButton);
+
+    expect;
+  });
+
+  it("renders a toggled generative ai state when a query param is set", () => {});
+});

context/search-context.tsx

@@ -81,4 +81,4 @@ function useSearchState() {
   return context;
 }
 
-export { SearchProvider, useSearchState };
+export { SearchProvider, defaultState, useSearchState };