@octopusdeploy/design-system-components
Version:
The design systems component library.
93 lines (92 loc) • 4.07 kB
JavaScript
"use strict";
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 Breadcrumbs_1 = require("../Breadcrumbs");
(0, vitest_1.describe)("Breadcrumbs", () => {
const breadcrumb1 = {
label: "Test 01",
pageUrl: "/1",
};
const breadcrumb2 = {
label: "Test 02",
pageUrl: "/2",
};
(0, vitest_1.it)("is accessible", async () => {
const breadcrumbs = renderBreadcrumbs({ items: [breadcrumb1, breadcrumb2] });
await breadcrumbs.shouldBeAccessible();
});
(0, vitest_1.it)("renders breadcrumb items with separator", () => {
const breadcrumbs = renderBreadcrumbs({ items: [breadcrumb1, breadcrumb2] });
breadcrumbs.shouldHaveBreadcrumbs([
{
type: "breadcrumb",
label: breadcrumb1.label,
href: breadcrumb1.pageUrl,
},
{
type: "separator",
},
{
type: "breadcrumb",
label: breadcrumb2.label,
href: breadcrumb2.pageUrl,
},
]);
});
(0, vitest_1.it)("does not render separator when there is only one breadcrumb in the list", () => {
const breadcrumbs = renderBreadcrumbs({ items: [breadcrumb1] });
breadcrumbs.shouldHaveBreadcrumbs([
{
type: "breadcrumb",
label: breadcrumb1.label,
href: breadcrumb1.pageUrl,
},
]);
});
(0, vitest_1.it)("shows back icon when the showBackIcon prop is true", () => {
const breadcrumbs = renderBreadcrumbs({ items: [breadcrumb1], showBackIcon: true });
breadcrumbs.shouldShowBackIcon();
});
(0, vitest_1.it)("does not show back icon when showBackIcon prop is not truthy", () => {
const breadcrumbs = renderBreadcrumbs({ items: [breadcrumb1] });
breadcrumbs.shouldNotShowBackIcon();
});
});
function renderBreadcrumbs({ items, showBackIcon }) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: items, showBackIcon: showBackIcon }) }));
return getBreadcrumbsInteractions(container);
}
function getBreadcrumbsInteractions(container) {
return {
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
shouldHaveBreadcrumbs: (expectedListItems) => {
const listItems = testing_library_1.domQueries.getList(undefined).getListItems();
listItems.forEach((domListItem, index) => {
const expectedListItem = expectedListItems[index];
if (expectedListItem.type === "breadcrumb") {
const breadcrumb = testing_library_1.domQueries.getLink(expectedListItem.label, { containerElement: domListItem });
breadcrumb.assertIsInTheDocument();
breadcrumb.assertHref(expectedListItem.href);
}
else {
(0, vitest_1.expect)((0, react_1.within)(domListItem).getByRole("separator")).toBeInTheDocument();
}
});
(0, vitest_1.expect)(listItems.length).toBe(expectedListItems.length);
},
shouldShowBackIcon: () => {
(0, vitest_1.expect)(testing_library_1.domQueries.getLink("go back").innerElement).toBeInTheDocument();
},
shouldNotShowBackIcon: () => {
testing_library_1.domQueries.queryLink("go back").assertIsNotInTheDocument();
},
};
}