Spaces:
Paused
Paused
File size: 5,526 Bytes
a5784e9 | 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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | /**
* Layout Component Tests
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
// Mock the contexts module
vi.mock("@/contexts", () => ({
useTheme: vi.fn(),
}));
// Import after mock
import { useTheme } from "@/contexts";
describe("Layout Logic", () => {
beforeEach(() => {
vi.clearAllMocks();
});
describe("Theme Context", () => {
it("provides dark theme", () => {
vi.mocked(useTheme).mockReturnValue({
theme: "dark",
toggleTheme: vi.fn(),
});
const { theme } = useTheme();
expect(theme).toBe("dark");
});
it("provides light theme", () => {
vi.mocked(useTheme).mockReturnValue({
theme: "light",
toggleTheme: vi.fn(),
});
const { theme } = useTheme();
expect(theme).toBe("light");
});
it("toggleTheme is callable", () => {
const mockToggle = vi.fn();
vi.mocked(useTheme).mockReturnValue({
theme: "dark",
toggleTheme: mockToggle,
});
const { toggleTheme } = useTheme();
toggleTheme();
expect(mockToggle).toHaveBeenCalled();
});
});
describe("Sidebar State Management", () => {
it("initializes left sidebar as open", () => {
const leftSidebarOpen = true;
expect(leftSidebarOpen).toBe(true);
});
it("toggles left sidebar closed", () => {
let leftSidebarOpen = true;
leftSidebarOpen = !leftSidebarOpen;
expect(leftSidebarOpen).toBe(false);
});
it("toggles left sidebar open", () => {
let leftSidebarOpen = false;
leftSidebarOpen = !leftSidebarOpen;
expect(leftSidebarOpen).toBe(true);
});
it("initializes right sidebar as open", () => {
const rightSidebarOpen = true;
expect(rightSidebarOpen).toBe(true);
});
it("toggles right sidebar independently", () => {
const leftSidebarOpen = true;
let rightSidebarOpen = true;
rightSidebarOpen = !rightSidebarOpen;
expect(leftSidebarOpen).toBe(true);
expect(rightSidebarOpen).toBe(false);
});
});
describe("Main View State", () => {
it("initializes with chat view", () => {
const mainView: "chat" | "settings" = "chat";
expect(mainView).toBe("chat");
});
it("switches to settings view", () => {
let mainView: "chat" | "settings" = "chat";
mainView = "settings";
expect(mainView).toBe("settings");
});
it("switches back to chat view", () => {
let mainView: "chat" | "settings" = "settings";
mainView = "chat";
expect(mainView).toBe("chat");
});
});
describe("Conditional Rendering Logic", () => {
it("shows left sidebar only in chat view", () => {
const mainView: string = "chat";
const showLeftSidebar = mainView === "chat";
expect(showLeftSidebar).toBe(true);
});
it("hides left sidebar in settings view", () => {
const mainView: string = "settings";
const showLeftSidebar = mainView === "chat";
expect(showLeftSidebar).toBe(false);
});
it("shows right sidebar only in chat view", () => {
const mainView: string = "chat";
const showRightSidebar = mainView === "chat";
expect(showRightSidebar).toBe(true);
});
it("hides toggle buttons in settings view", () => {
const mainView: string = "settings";
const showToggleButtons = mainView === "chat";
expect(showToggleButtons).toBe(false);
});
});
describe("Aria Labels", () => {
it("generates left sidebar toggle label when open", () => {
const leftSidebarOpen = true;
const label = leftSidebarOpen ? "隐藏设置面板" : "显示设置面板";
expect(label).toBe("隐藏设置面板");
});
it("generates left sidebar toggle label when closed", () => {
const leftSidebarOpen = false;
const label = leftSidebarOpen ? "隐藏设置面板" : "显示设置面板";
expect(label).toBe("显示设置面板");
});
it("generates right sidebar toggle label when open", () => {
const rightSidebarOpen = true;
const label = rightSidebarOpen ? "隐藏日志面板" : "显示日志面板";
expect(label).toBe("隐藏日志面板");
});
it("generates theme toggle label for dark mode", () => {
const theme: string = "dark";
const label = theme === "dark" ? "切换到亮色模式" : "切换到暗色模式";
expect(label).toBe("切换到亮色模式");
});
it("generates theme toggle label for light mode", () => {
const theme: string = "light";
const label = theme === "dark" ? "切换到亮色模式" : "切换到暗色模式";
expect(label).toBe("切换到暗色模式");
});
});
describe("CSS Class Logic", () => {
it("applies collapsed class when sidebar is closed", () => {
const leftSidebarOpen = false;
const className = !leftSidebarOpen ? "collapsed" : "";
expect(className).toBe("collapsed");
});
it("does not apply collapsed class when sidebar is open", () => {
const leftSidebarOpen = true;
const className = !leftSidebarOpen ? "collapsed" : "";
expect(className).toBe("");
});
it("applies active class to current view tab", () => {
const mainView: string = "chat";
const chatTabActive = mainView === "chat" ? "active" : "";
const settingsTabActive = mainView === "settings" ? "active" : "";
expect(chatTabActive).toBe("active");
expect(settingsTabActive).toBe("");
});
});
});
|