@octopusdeploy/design-system-components
Version:
The design systems component library.
121 lines (120 loc) • 5.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const AreaNavList_1 = require("../AreaNavList");
(0, vitest_1.describe)("AreaNavList", () => {
const listGroups = [
{
heading: "Project",
items: [{ label: "Dashboard", href: "/dashboard" }],
},
];
(0, vitest_1.it)("is accessible", async () => {
const areaNavList = renderNavigationList(listGroups);
await areaNavList.shouldBeAccessible();
});
(0, vitest_1.it)("renders group heading correctly", () => {
const areaNavList = renderNavigationList(listGroups);
areaNavList.shouldShowGroupHeading("Project");
});
(0, vitest_1.it)("renders navigation links correctly", () => {
const areaNavList = renderNavigationList(listGroups);
areaNavList.shouldShowNavigationLink("Dashboard", "/dashboard");
});
(0, vitest_1.describe)("isVisible", () => {
(0, vitest_1.it)("hides links when isVisible is false", () => {
const listItems = [
{
heading: "Project",
items: [
{ label: "Dashboard", href: "/dashboard", isVisible: true },
{ label: "Hidden Link", href: "/hidden", isVisible: false },
],
},
];
const areaNavList = renderNavigationList(listItems);
areaNavList.shouldShowNavigationLink("Dashboard", "/dashboard");
areaNavList.shouldNotShowNavigationLink("Hidden Link");
});
(0, vitest_1.it)("shows links when isVisible is true", () => {
const listItems = [
{
heading: "Project",
items: [{ label: "Dashboard", href: "/dashboard", isVisible: true }],
},
];
const areaNavList = renderNavigationList(listItems);
areaNavList.shouldShowNavigationLink("Dashboard", "/dashboard");
});
(0, vitest_1.it)("shows links by default when isVisible is not specified", () => {
const listItems = [
{
heading: "Project",
items: [{ label: "Dashboard", href: "/dashboard" }],
},
];
const areaNavList = renderNavigationList(listItems);
areaNavList.shouldShowNavigationLink("Dashboard", "/dashboard");
});
(0, vitest_1.it)("hides entire group when all items have isVisible false", () => {
const listItems = [
{
heading: "Hidden Group",
items: [
{ label: "Hidden Link 1", href: "/hidden1", isVisible: false },
{ label: "Hidden Link 2", href: "/hidden2", isVisible: false },
],
},
];
const areaNavList = renderNavigationList(listItems);
areaNavList.shouldNotShowGroupHeading("Hidden Group");
areaNavList.shouldNotShowNavigationLink("Hidden Link 1");
areaNavList.shouldNotShowNavigationLink("Hidden Link 2");
});
(0, vitest_1.it)("shows group with only visible items when some items are hidden", () => {
const listItems = [
{
heading: "Mixed Group",
items: [
{ label: "Visible Link", href: "/visible", isVisible: true },
{ label: "Hidden Link", href: "/hidden", isVisible: false },
],
},
];
const areaNavList = renderNavigationList(listItems);
areaNavList.shouldShowGroupHeading("Mixed Group");
areaNavList.shouldShowNavigationLink("Visible Link", "/visible");
areaNavList.shouldNotShowNavigationLink("Hidden Link");
});
});
});
function renderNavigationList(listItems) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(AreaNavList_1.AreaNavList, { listItems: listItems }) }));
return navigationListInteraction(container);
}
function navigationListInteraction(container) {
return {
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
shouldShowGroupHeading: (heading) => {
testing_library_1.domQueries.getText(heading).assertIsInTheDocument();
},
shouldNotShowGroupHeading: (heading) => {
testing_library_1.domQueries.queryText(heading).assertIsNotInTheDocument();
},
shouldShowNavigationLink: (label, href) => {
testing_library_1.domQueries.getLink(label).assertIsInTheDocument();
testing_library_1.domQueries.getLink(label).assertHref(href);
},
shouldNotShowNavigationLink: (label) => {
testing_library_1.domQueries.queryLink(label).assertIsNotInTheDocument();
},
};
}