68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
|
import { describe, it, expect, vi } from "vitest";
|
||
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
||
|
|
import { MemoryRouter } from "react-router";
|
||
|
|
import { Bell, User } from "lucide-react";
|
||
|
|
import {
|
||
|
|
SettingsDesktopNav,
|
||
|
|
SettingsMobileGridNav,
|
||
|
|
SettingsMobileSectionPill,
|
||
|
|
type SettingsGridSection,
|
||
|
|
} from "../SettingsNavigation";
|
||
|
|
|
||
|
|
const sections: readonly SettingsGridSection[] = [
|
||
|
|
{ id: "profile", label: "Profile", icon: User, subtitle: "Name, avatar" },
|
||
|
|
{ id: "notifications", label: "Notifications", icon: Bell, subtitle: "Email & Discord" },
|
||
|
|
];
|
||
|
|
|
||
|
|
describe("SettingsNavigation link mode", () => {
|
||
|
|
it("renders desktop nav entries as anchors built from buildHref", () => {
|
||
|
|
render(
|
||
|
|
<MemoryRouter>
|
||
|
|
<SettingsDesktopNav
|
||
|
|
sections={sections}
|
||
|
|
activeSection="profile"
|
||
|
|
buildHref={(id) => `/settings/${id}`}
|
||
|
|
/>
|
||
|
|
</MemoryRouter>
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByRole("link", { name: "Profile" })).toHaveAttribute("href", "/settings/profile");
|
||
|
|
expect(screen.getByRole("link", { name: "Notifications" })).toHaveAttribute(
|
||
|
|
"href",
|
||
|
|
"/settings/notifications"
|
||
|
|
);
|
||
|
|
expect(screen.getByRole("link", { name: "Profile" })).toHaveAttribute("aria-current", "page");
|
||
|
|
});
|
||
|
|
|
||
|
|
it("renders the mobile grid as anchors and the back pill as an anchor", () => {
|
||
|
|
render(
|
||
|
|
<MemoryRouter>
|
||
|
|
<SettingsMobileGridNav sections={sections} buildHref={(id) => `/settings/${id}`} />
|
||
|
|
<SettingsMobileSectionPill backHref="/settings" />
|
||
|
|
</MemoryRouter>
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByRole("link", { name: /Profile/i })).toHaveAttribute("href", "/settings/profile");
|
||
|
|
expect(screen.getByRole("link", { name: /back to all settings/i })).toHaveAttribute(
|
||
|
|
"href",
|
||
|
|
"/settings"
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("SettingsNavigation button mode (league settings)", () => {
|
||
|
|
it("still fires onSectionChange when no buildHref is provided", () => {
|
||
|
|
const onSectionChange = vi.fn();
|
||
|
|
render(
|
||
|
|
<SettingsDesktopNav
|
||
|
|
sections={sections}
|
||
|
|
activeSection="profile"
|
||
|
|
onSectionChange={onSectionChange}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.click(screen.getByRole("button", { name: "Notifications" }));
|
||
|
|
expect(onSectionChange).toHaveBeenCalledWith("notifications");
|
||
|
|
});
|
||
|
|
});
|