File size: 3,969 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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { RightPanelToggle } from "#/components/features/conversation/right-panel-toggle";
import { useConversationStore } from "#/stores/conversation-store";
const CONVERSATION_ID = "conv-abc123";
const { mockNavigate, breakpointIsMobile } = vi.hoisted(() => ({
mockNavigate: vi.fn(),
breakpointIsMobile: { value: false },
}));
vi.mock("react-router", async (importOriginal) => {
const actual = await importOriginal<typeof import("react-router")>();
return {
...actual,
useNavigate: () => mockNavigate,
};
});
vi.mock("#/hooks/use-breakpoint", () => ({
useBreakpoint: () => breakpointIsMobile.value,
}));
vi.mock("#/hooks/use-conversation-id", () => ({
useOptionalConversationId: () => ({ conversationId: "test-conversation-id" }),
useConversationId: () => ({ conversationId: CONVERSATION_ID }),
}));
vi.mock("#/hooks/use-is-archived-conversation", () => ({
useIsArchivedConversation: () => false,
}));
describe("RightPanelToggle", () => {
beforeEach(() => {
localStorage.clear();
mockNavigate.mockClear();
breakpointIsMobile.value = false;
useConversationStore.setState({
selectedTab: "files",
isRightPanelShown: true,
hasRightPanelToggled: true,
});
});
it("should render the toggle button", () => {
render(<RightPanelToggle />);
expect(screen.getByTestId("right-panel-toggle")).toBeInTheDocument();
});
it("should hide the panel when clicked while panel is open", async () => {
const user = userEvent.setup();
render(<RightPanelToggle />);
const button = screen.getByTestId("right-panel-toggle");
await user.click(button);
const storeState = useConversationStore.getState();
expect(storeState.hasRightPanelToggled).toBe(false);
expect(storeState.isRightPanelShown).toBe(false);
const storedState = JSON.parse(
localStorage.getItem(`conversation-state-${CONVERSATION_ID}`)!,
);
expect(storedState.rightPanelShown).toBe(false);
});
it("should show the panel when clicked while panel is hidden", async () => {
const user = userEvent.setup();
useConversationStore.setState({
isRightPanelShown: false,
hasRightPanelToggled: false,
});
render(<RightPanelToggle />);
const button = screen.getByTestId("right-panel-toggle");
await user.click(button);
const storeState = useConversationStore.getState();
expect(storeState.hasRightPanelToggled).toBe(true);
expect(storeState.isRightPanelShown).toBe(true);
const storedState = JSON.parse(
localStorage.getItem(`conversation-state-${CONVERSATION_ID}`)!,
);
expect(storedState.rightPanelShown).toBe(true);
});
it("should have aria-pressed attribute reflecting panel state on desktop", () => {
const { unmount } = render(<RightPanelToggle />);
expect(screen.getByTestId("right-panel-toggle")).toHaveAttribute(
"aria-pressed",
"true",
);
unmount();
useConversationStore.setState({ isRightPanelShown: false });
render(<RightPanelToggle />);
expect(screen.getByTestId("right-panel-toggle")).toHaveAttribute(
"aria-pressed",
"false",
);
});
it("navigates to the full-screen panel route on mobile", async () => {
breakpointIsMobile.value = true;
const user = userEvent.setup();
useConversationStore.setState({
isRightPanelShown: false,
hasRightPanelToggled: false,
});
render(<RightPanelToggle />);
await user.click(screen.getByTestId("right-panel-toggle"));
expect(mockNavigate).toHaveBeenCalledWith(
`/conversations/${CONVERSATION_ID}/panel`,
);
const storeState = useConversationStore.getState();
expect(storeState.hasRightPanelToggled).toBe(true);
expect(storeState.isRightPanelShown).toBe(true);
});
});
|