73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
import "@testing-library/jest-dom/vitest";
|
|
import { render } from "@testing-library/react";
|
|
import { MemoryRouter } from "react-router";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import { buildSettingsHubVM } from "@hivegrid/view-models";
|
|
import { SettingsHubShell } from "./SettingsHubShell";
|
|
|
|
const labels: Record<string, string> = {
|
|
"settings.hubs.account.title": "Mein Konto",
|
|
"settings.hubs.team.title": "Team & Zugriff",
|
|
"settings.hubs.workspace.title": "Workspace",
|
|
"settings.hubs.billing.title": "Abrechnung",
|
|
"settings.hubs.integrations.title": "Erweiterungen",
|
|
"settings.hubs.compliance.title": "Compliance & Protokolle",
|
|
"customerPortal.admin.title": "Kundenportal",
|
|
"settings.hubs.subtitle": "Interim-UI",
|
|
"settings.hubs.tab": "Übersicht",
|
|
};
|
|
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({ t: (key: string) => labels[key] ?? key }),
|
|
}));
|
|
|
|
const hubs = [
|
|
["account", "settings.hubs.account.title"],
|
|
["team", "settings.hubs.team.title"],
|
|
["workspace", "settings.hubs.workspace.title"],
|
|
["billing", "settings.hubs.billing.title"],
|
|
["integrations", "settings.hubs.integrations.title"],
|
|
["compliance", "settings.hubs.compliance.title"],
|
|
["customerPortal", "customerPortal.admin.title"],
|
|
] as const;
|
|
|
|
describe("AK-SET-01 settings hubs interim visual baseline", () => {
|
|
it("renders all seven compact hub headers and their permanent tab bar", () => {
|
|
const { container } = render(
|
|
<MemoryRouter>
|
|
<main data-ui-id="ui.settings.hubs.interim.visualBaseline">
|
|
{hubs.map(([hubId, titleKey]) => (
|
|
<SettingsHubShell
|
|
key={hubId}
|
|
vm={buildSettingsHubVM({
|
|
hubId,
|
|
titleKey,
|
|
subtitleKey: "settings.hubs.subtitle",
|
|
tabs: [{ id: "overview", labelKey: "settings.hubs.tab", href: `/acme/settings/${hubId}` }],
|
|
currentPath: `/acme/settings/${hubId}`,
|
|
})}
|
|
>
|
|
<div data-ui-id={`ui.settings.hub.${hubId}.fixture`}>Fixture</div>
|
|
</SettingsHubShell>
|
|
))}
|
|
</main>
|
|
</MemoryRouter>
|
|
);
|
|
|
|
for (const [hubId, titleKey] of hubs) {
|
|
expect(container.querySelector(`[data-ui-id="ui.settings.hub.${hubId}"]`)).toBeInTheDocument();
|
|
expect(container).toHaveTextContent(labels[titleKey]);
|
|
expect(container.querySelector(`[data-ui-id="ui.settings.hub.${hubId}.tab.overview"]`)).toBeInTheDocument();
|
|
}
|
|
|
|
// The fixed 208px rail uses these labels; keeping them compact prevents
|
|
// the truncation regression without touching SidebarIconsLayout itself.
|
|
expect(hubs.map(([, titleKey]) => labels[titleKey].length)).toEqual([10, 14, 9, 10, 13, 23, 12]);
|
|
|
|
const stableMarkup = container.innerHTML.replace(/<svg\b[^>]*>[\s\S]*?<\/svg>/gu, '<svg data-visual-icon="true"></svg>');
|
|
expect(stableMarkup).toMatchSnapshot();
|
|
});
|
|
});
|