55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { fireEvent, screen } from "@testing-library/react";
|
|
import { MainNavigation, SideNavigation, UserMenuPopover } from "@ui/components/NavigationBar";
|
|
import { renderWithProviders } from "../utils/testHelpers";
|
|
|
|
describe("NavigationBar", () => {
|
|
describe("SideNavigation", () => {
|
|
it("renders the side navigation with correct initial state", () => {
|
|
renderWithProviders(<SideNavigation isMobileMenuOpen={false} />);
|
|
|
|
// Check if the logo is present
|
|
expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();
|
|
|
|
// Check if the title is present
|
|
expect(screen.getByText("XTablo Dev")).toBeInTheDocument();
|
|
});
|
|
|
|
it("collapses and expands when the collapse button is clicked", () => {
|
|
renderWithProviders(<SideNavigation isMobileMenuOpen={false} />);
|
|
|
|
// Find and click the collapse button
|
|
const collapseButton = screen.getByRole("button", { name: /collapse/i });
|
|
fireEvent.click(collapseButton);
|
|
|
|
// Check if the navigation is collapsed
|
|
const navigation = screen.getByRole("navigation", {
|
|
name: "Main navigation",
|
|
});
|
|
expect(navigation).toHaveClass("w-16");
|
|
|
|
// Click again to expand
|
|
fireEvent.click(collapseButton);
|
|
expect(navigation).toHaveClass("w-48");
|
|
});
|
|
});
|
|
|
|
describe("MainNavigation", () => {
|
|
it("renders navigation links", () => {
|
|
renderWithProviders(<MainNavigation isCollapsed={false} />);
|
|
|
|
// Check if the main navigation is rendered
|
|
const navigation = screen.getByRole("navigation", { name: "Primary navigation" });
|
|
expect(navigation).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe("UserMenuPopover", () => {
|
|
it("renders the user menu button", () => {
|
|
renderWithProviders(<UserMenuPopover isCollapsed={false} />);
|
|
|
|
// Check if the user menu trigger is present
|
|
const triggerButton = screen.getByRole("button");
|
|
expect(triggerButton).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|