static/frontend/src/components/layout/Layout.test.ts

/**
 * 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("");
    });
  });
});