File size: 3,025 Bytes
fd2c364 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { ChatInterfaceWrapper } from "#/components/features/conversation/conversation-main/chat-interface-wrapper";
import { useConversationStore } from "#/stores/conversation-store";
vi.mock("#/components/features/chat/chat-interface", () => ({
ChatInterface: () => <div data-testid="chat-interface" />,
}));
vi.mock("#/components/features/conversation/conversation-overview-panel", () => ({
ConversationOverviewPanel: () => (
<div data-testid="conversation-overview-panel" />
),
}));
vi.mock("#/hooks/use-breakpoint", () => ({
useBreakpoint: () => false,
}));
const mockUseConversationOverviewColumnSpace = vi.fn(() => true);
vi.mock("#/hooks/use-conversation-overview-column-space", () => ({
useConversationOverviewColumnSpace: () =>
mockUseConversationOverviewColumnSpace(),
}));
describe("ChatInterfaceWrapper", () => {
beforeEach(() => {
mockUseConversationOverviewColumnSpace.mockReturnValue(true);
useConversationStore.setState({
isOverviewPanelShown: false,
isOverviewPanelPeeked: false,
isRightPanelShown: false,
});
});
it("renders the chat interface when the right panel is hidden", () => {
render(<ChatInterfaceWrapper isRightPanelShown={false} />);
expect(screen.getByTestId("chat-interface")).toBeInTheDocument();
});
it("renders the chat interface when the right panel is shown", () => {
render(<ChatInterfaceWrapper isRightPanelShown />);
expect(screen.getByTestId("chat-interface")).toBeInTheDocument();
});
it("uses the overview grid layout when space is available", () => {
useConversationStore.setState({ isOverviewPanelShown: true });
render(<ChatInterfaceWrapper isRightPanelShown={false} />);
expect(screen.getByTestId("conversation-overview-column")).toBeInTheDocument();
expect(screen.getByTestId("conversation-overview-panel")).toBeInTheDocument();
});
it("keeps the thread in a height-constrained flex column when overview is shown", () => {
useConversationStore.setState({ isOverviewPanelShown: true });
const { container } = render(
<ChatInterfaceWrapper isRightPanelShown={false} />,
);
const threadColumn = container.querySelector(".overflow-hidden.flex-1");
expect(threadColumn).toBeInTheDocument();
expect(threadColumn).toHaveClass("min-h-0");
});
it("falls back to the centered thread layout when the right column is too narrow", () => {
mockUseConversationOverviewColumnSpace.mockReturnValue(false);
useConversationStore.setState({ isOverviewPanelShown: true });
render(<ChatInterfaceWrapper isRightPanelShown={false} />);
expect(
screen.queryByTestId("conversation-overview-column"),
).not.toBeInTheDocument();
expect(
screen.queryByTestId("conversation-overview-panel"),
).not.toBeInTheDocument();
expect(screen.getByTestId("chat-interface")).toBeInTheDocument();
});
});
|