art feed view

__tests__/components/shared/WavesMessagesWrapper.test.tsx

@@ -0,0 +1,143 @@
+import WavesMessagesWrapper from "@/components/shared/WavesMessagesWrapper";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+let mockBreakpoint = "LG";
+let mockWaveId: string | null = null;
+
+const mockChildMounted = jest.fn();
+const mockCloseRightSidebar = jest.fn();
+const mockRouterReplace = jest.fn();
+const mockUseQuery = jest.fn();
+
+jest.mock("react-use", () => ({
+  createBreakpoint: () => () => mockBreakpoint,
+}));
+
+jest.mock("next/navigation", () => ({
+  usePathname: () => "/waves",
+  useRouter: () => ({ replace: mockRouterReplace }),
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+jest.mock("@/helpers/navigation.helpers", () => ({
+  getActiveWaveIdFromUrl: () => mockWaveId,
+}));
+
+jest.mock("@tanstack/react-query", () => ({
+  keepPreviousData: (value: unknown) => value,
+  useQuery: (options: unknown) => mockUseQuery(options),
+}));
+
+jest.mock("@/hooks/useSidebarState", () => ({
+  useSidebarState: () => ({
+    closeRightSidebar: mockCloseRightSidebar,
+    isRightSidebarOpen: false,
+  }),
+}));
+
+jest.mock("@/hooks/useCreateModalState", () => ({
+  __esModule: true,
+  default: () => ({
+    close: jest.fn(),
+    isWaveModalOpen: false,
+  }),
+}));
+
+jest.mock("@/hooks/useClosingDropId", () => ({
+  useClosingDropId: () => ({
+    beginClosingDrop: jest.fn(),
+    effectiveDropId: undefined,
+  }),
+}));
+
+jest.mock("@/components/auth/Auth", () => ({
+  useAuth: () => ({ connectedProfile: null }),
+}));
+
+jest.mock("@/components/brain/my-stream/layout/LayoutContext", () => ({
+  useLayout: () => ({ contentContainerStyle: {} }),
+}));
+
+jest.mock("@/contexts/wave/WaveChatScrollContext", () => ({
+  WaveChatScrollProvider: ({
+    children,
+  }: {
+    readonly children: React.ReactNode;
+  }) => <>{children}</>,
+}));
+
+jest.mock("@/components/brain/left-sidebar/web/WebLeftSidebar", () => ({
+  __esModule: true,
+  default: () => <div data-testid="left-sidebar" />,
+}));
+
+jest.mock("@/components/brain/right-sidebar/BrainRightSidebar", () => ({
+  __esModule: true,
+  SidebarTab: { ABOUT: "ABOUT" },
+  default: () => <div data-testid="right-sidebar" />,
+}));
+
+jest.mock("@/components/brain/BrainDesktopDrop", () => ({
+  __esModule: true,
+  default: () => <div data-testid="drop-overlay" />,
+}));
+
+jest.mock("@/components/waves/create-wave/CreateWaveModal", () => ({
+  __esModule: true,
+  default: () => <div data-testid="create-wave-modal" />,
+}));
+
+function MainContentProbe() {
+  mockChildMounted();
+  return <div data-testid="main-content">Main content</div>;
+}
+
+function renderWrapper() {
+  return render(
+    <WavesMessagesWrapper>
+      <MainContentProbe />
+    </WavesMessagesWrapper>
+  );
+}
+
+describe("WavesMessagesWrapper", () => {
+  beforeEach(() => {
+    mockBreakpoint = "LG";
+    mockWaveId = null;
+    jest.clearAllMocks();
+    mockUseQuery.mockReturnValue({ data: undefined, error: null });
+  });
+
+  it("renders no-wave main content on desktop", () => {
+    mockBreakpoint = "LG";
+    mockWaveId = null;
+
+    renderWrapper();
+
+    expect(screen.getByTestId("main-content")).toBeInTheDocument();
+    expect(mockChildMounted).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not mount no-wave main content on small screens", () => {
+    mockBreakpoint = "S";
+    mockWaveId = null;
+
+    renderWrapper();
+
+    expect(screen.queryByTestId("main-content")).not.toBeInTheDocument();
+    expect(screen.getByTestId("left-sidebar")).toBeInTheDocument();
+    expect(mockChildMounted).not.toHaveBeenCalled();
+  });
+
+  it("renders selected wave main content on small screens", () => {
+    mockBreakpoint = "S";
+    mockWaveId = "wave-1";
+
+    renderWrapper();
+
+    expect(screen.getByTestId("main-content")).toBeInTheDocument();
+    expect(screen.queryByTestId("left-sidebar")).not.toBeInTheDocument();
+    expect(mockChildMounted).toHaveBeenCalledTimes(1);
+  });
+});

__tests__/components/waves/WavesLayout.test.tsx

@@ -4,9 +4,6 @@ import React from "react";
 
 const mockUseAuthenticatedContent = jest.fn();
 const mockUseDeviceInfo = jest.fn();
-const mockGetActiveWaveIdFromUrl = jest.fn();
-const mockUsePathname = jest.fn();
-const mockUseSearchParams = jest.fn();
 
 jest.mock("../../../hooks/useAuthenticatedContent", () => ({
   useAuthenticatedContent: () => mockUseAuthenticatedContent(),
@@ -17,16 +14,6 @@ jest.mock("../../../hooks/useDeviceInfo", () => ({
   default: () => mockUseDeviceInfo(),
 }));
 
-jest.mock("next/navigation", () => ({
-  usePathname: () => mockUsePathname(),
-  useSearchParams: () => mockUseSearchParams(),
-}));
-
-jest.mock("../../../helpers/navigation.helpers", () => ({
-  getActiveWaveIdFromUrl: (...args: unknown[]) =>
-    mockGetActiveWaveIdFromUrl(...args),
-}));
-
 jest.mock("@/components/waves/WavesDesktop", () => ({
   __esModule: true,
   default: ({
@@ -57,51 +44,20 @@ jest.mock("@/components/common/ConnectWallet", () => ({
   default: () => <div data-testid="connect-wallet">Connect Wallet</div>,
 }));
 
-jest.mock("@/components/header/user/HeaderUserConnect", () => ({
-  __esModule: true,
-  default: ({ label }: { readonly label?: string }) => (
-    <button type="button">{label ?? "Connect Wallet"}</button>
-  ),
-}));
-
 jest.mock("@/components/user/utils/set-up-profile/UserSetUpProfileCta", () => ({
   __esModule: true,
   default: () => <div data-testid="setup-profile">Set up profile</div>,
 }));
 
-jest.mock("@/components/waves/WaveScreenMessage", () => ({
-  __esModule: true,
-  default: ({
-    action,
-    description,
-    title,
-  }: {
-    readonly action?: React.ReactNode;
-    readonly description?: string;
-    readonly title: string;
-  }) => (
-    <div data-testid="wave-screen-message">
-      <h1>{title}</h1>
-      {description ? <p>{description}</p> : null}
-      {action}
-    </div>
-  ),
-}));
-
 describe("WavesLayout", () => {
   beforeEach(() => {
     mockUseAuthenticatedContent.mockReturnValue({
       contentState: "not-authenticated",
     });
     mockUseDeviceInfo.mockReturnValue({ isApp: false, isMobileDevice: false });
-    mockUsePathname.mockReturnValue("/waves/test-wave");
-    mockUseSearchParams.mockReturnValue(new URLSearchParams("wave=test-wave"));
-    mockGetActiveWaveIdFromUrl.mockReturnValue(null);
   });
 
   it("renders the selected wave content for logged-out users", () => {
-    mockGetActiveWaveIdFromUrl.mockReturnValue("test-wave");
-
     render(
       <WavesLayout>
         <div data-testid="wave-content">Real wave content</div>
@@ -110,32 +66,19 @@ describe("WavesLayout", () => {
 
     expect(screen.getByTestId("wave-content")).toBeInTheDocument();
     expect(screen.getByTestId("waves-desktop")).toHaveAttribute(
-      "data-allow-drop-overlay",
-      "false"
+      "data-show-left-sidebar",
+      "true"
     );
-    expect(screen.getByTestId("waves-desktop")).toHaveAttribute(
-      "data-allow-right-sidebar",
-      "false"
-    );
-    expect(screen.queryByTestId("wave-screen-message")).not.toBeInTheDocument();
   });
 
-  it("keeps the select-wave prompt when no wave is selected", () => {
+  it("renders the default waves content for logged-out web users when no wave is selected", () => {
     render(
       <WavesLayout>
         <div data-testid="wave-content">Real wave content</div>
       </WavesLayout>
     );
 
-    expect(screen.getByText("Select a Wave")).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        "Connect your wallet to access waves and join the conversation."
-      )
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Connect Wallet" })
-    ).toBeInTheDocument();
-    expect(screen.queryByTestId("wave-content")).not.toBeInTheDocument();
+    expect(screen.getByTestId("wave-content")).toBeInTheDocument();
+    expect(screen.queryByTestId("connect-wallet")).not.toBeInTheDocument();
   });
 });