diff --git a/ui/components/ui/sidebar/navigation-mode-toggle.tsx b/ui/components/sidebar/navigation-mode-toggle.tsx similarity index 100% rename from ui/components/ui/sidebar/navigation-mode-toggle.tsx rename to ui/components/sidebar/navigation-mode-toggle.tsx diff --git a/ui/components/ui/sidebar/menu.test.tsx b/ui/components/ui/sidebar/menu.test.tsx index 19322ce640..62be707418 100644 --- a/ui/components/ui/sidebar/menu.test.tsx +++ b/ui/components/ui/sidebar/menu.test.tsx @@ -1,13 +1,29 @@ import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"; +import { + afterEach, + beforeAll, + beforeEach, + describe, + expect, + it, + vi, +} from "vitest"; import { SIDEBAR_NAVIGATION_MODE } from "@/hooks/use-sidebar"; -const { openLaunchScanModalMock, pathnameValue, pushMock } = vi.hoisted(() => ({ +const { + openLaunchScanModalMock, + pathnameValue, + pushMock, + navigationModeValue, + setNavigationModeMock, +} = vi.hoisted(() => ({ openLaunchScanModalMock: vi.fn(), pathnameValue: { current: "/findings" }, pushMock: vi.fn(), + navigationModeValue: { current: "browse" }, + setNavigationModeMock: vi.fn(), })); vi.mock("next/navigation", () => ({ @@ -44,16 +60,38 @@ vi.mock("@/store", () => ({ ) => selector({ openLaunchScanModal: openLaunchScanModalMock }), })); +vi.mock("@/hooks/use-sidebar", async (importActual) => { + const actual = await importActual(); + return { + ...actual, + useSidebar: ( + selector: (state: { + navigationMode: string; + setNavigationMode: (mode: string) => void; + }) => unknown, + ) => + selector({ + navigationMode: navigationModeValue.current, + setNavigationMode: setNavigationModeMock, + }), + }; +}); + let MenuComponent: typeof import("./menu").Menu; -let SidebarNavigationModeToggleComponent: typeof import("./navigation-mode-toggle").SidebarNavigationModeToggle; +let SidebarNavigationModeToggleComponent: typeof import("@/components/sidebar/navigation-mode-toggle").SidebarNavigationModeToggle; beforeAll(async () => { MenuComponent = (await import("./menu")).Menu; SidebarNavigationModeToggleComponent = ( - await import("./navigation-mode-toggle") + await import("@/components/sidebar/navigation-mode-toggle") ).SidebarNavigationModeToggle; }); +afterEach(() => { + vi.unstubAllEnvs(); + navigationModeValue.current = "browse"; +}); + describe("Menu", () => { it("links scan to the scans page with the modal open", () => { pathnameValue.current = "/findings"; @@ -100,6 +138,30 @@ describe("Menu", () => { launchScanLink.querySelector('svg[viewBox="0 0 432.08 396.77"]'), ).toBeInTheDocument(); }); + + it("swaps to the Lighthouse chat sidebar in cloud CHAT mode", () => { + pathnameValue.current = "/lighthouse"; + vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true"); + navigationModeValue.current = SIDEBAR_NAVIGATION_MODE.CHAT; + + render(); + + expect(screen.getByTestId("lighthouse-chat-sidebar")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Chat" })).toBeInTheDocument(); + }); + + it("keeps the navigation menu in cloud BROWSE mode", () => { + pathnameValue.current = "/findings"; + vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true"); + navigationModeValue.current = SIDEBAR_NAVIGATION_MODE.BROWSE; + + render(); + + expect( + screen.queryByTestId("lighthouse-chat-sidebar"), + ).not.toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Home" })).toBeInTheDocument(); + }); }); describe("SidebarNavigationModeToggle", () => { diff --git a/ui/components/ui/sidebar/menu.tsx b/ui/components/ui/sidebar/menu.tsx index ad40c889d0..454e0932a2 100644 --- a/ui/components/ui/sidebar/menu.tsx +++ b/ui/components/ui/sidebar/menu.tsx @@ -12,10 +12,10 @@ import { TooltipContent, TooltipTrigger, } from "@/components/shadcn/tooltip"; +import { SidebarNavigationModeToggle } from "@/components/sidebar/navigation-mode-toggle"; import { ScrollArea } from "@/components/ui/scroll-area/scroll-area"; import { CollapsibleMenu } from "@/components/ui/sidebar/collapsible-menu"; import { MenuItem } from "@/components/ui/sidebar/menu-item"; -import { SidebarNavigationModeToggle } from "@/components/ui/sidebar/navigation-mode-toggle"; import { useAuth } from "@/hooks"; import { useRuntimeConfig } from "@/hooks/use-runtime-config"; import { SIDEBAR_NAVIGATION_MODE, useSidebar } from "@/hooks/use-sidebar";