92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { Layout } from "@ui/components/Layout";
|
|
import { SessionProvider } from "@ui/contexts/SessionContext";
|
|
import { BrowserRouter } from "react-router-dom";
|
|
import { vi } from "vitest";
|
|
|
|
// Mock the SessionContext
|
|
vi.mock("../../contexts/SessionContext", () => ({
|
|
...vi.importActual("../../contexts/SessionContext"),
|
|
SessionProvider: ({ children }: { children: React.ReactNode }) => children,
|
|
useSession: () => ({
|
|
session: {
|
|
user: {
|
|
user_metadata: {
|
|
full_name: "John Doe",
|
|
avatar_url: "https://example.com/avatar.jpg",
|
|
first_name: "John",
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock("../ThemeSwitcher", () => ({
|
|
ThemeSwitcher: () => <div>Theme Switcher</div>,
|
|
}));
|
|
|
|
describe("Layout", () => {
|
|
it("renders the layout with children", () => {
|
|
render(
|
|
<BrowserRouter>
|
|
{/* Mock SessionProvider just passes children through */}
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
</BrowserRouter>
|
|
);
|
|
|
|
// Check if the content is rendered
|
|
expect(screen.getByText("Test Content")).toBeInTheDocument();
|
|
|
|
// Check if the mobile menu button is present
|
|
expect(screen.getByRole("button", { name: /menu/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it.skip("toggles mobile menu when menu button is clicked", () => {
|
|
// Mock viewport width to mobile size
|
|
global.innerWidth = 500; // Mobile width
|
|
global.dispatchEvent(new Event("resize"));
|
|
|
|
render(
|
|
<BrowserRouter>
|
|
<SessionProvider>
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
</SessionProvider>
|
|
</BrowserRouter>
|
|
);
|
|
|
|
// Get the menu button
|
|
const menuButton = screen.getByRole("button", { name: /menu/i });
|
|
|
|
// Verify initial mobile state
|
|
const navigation = screen.getByLabelText("Side Navigation");
|
|
expect(navigation).toHaveClass("-translate-x-full");
|
|
expect(navigation).not.toHaveClass("translate-x-0");
|
|
|
|
// Click the menu button to show
|
|
fireEvent.click(menuButton);
|
|
expect(navigation).toHaveClass("translate-x-0");
|
|
|
|
// Click again to hide
|
|
fireEvent.click(menuButton);
|
|
expect(navigation).toHaveClass("-translate-x-full");
|
|
});
|
|
|
|
it("renders the side navigation", () => {
|
|
render(
|
|
<BrowserRouter>
|
|
<SessionProvider>
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
</SessionProvider>
|
|
</BrowserRouter>
|
|
);
|
|
|
|
// Check if the side navigation is present
|
|
expect(screen.getByRole("navigation")).toBeInTheDocument();
|
|
});
|
|
});
|