@octopusdeploy/design-system-components
Version:
The design systems component library.
90 lines (89 loc) • 5.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
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 routing_1 = require("../../../routing");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const Level1PageHeader_1 = require("../Level1PageHeader");
(0, vitest_1.describe)("ProjectHeaderPrimary", () => {
(0, vitest_1.it)("is accessible", async () => {
const component = renderHeaderPrimary({
breadcrumbs: [{ label: "nav up", pageUrl: "/test" }],
title: "title",
});
await component.shouldBeAccessible();
});
(0, vitest_1.it)("renders back button with correct href if backButtonHref prop is defined", () => {
const component = renderHeaderPrimary({ breadcrumbs: [{ label: "back", pageUrl: "/test" }] });
component.shouldShowBackLinkWithCorrectHref("back", "/test");
component.shouldShowBackLinkWithCorrectContent("back");
});
(0, vitest_1.it)("renders title", () => {
const component = renderHeaderPrimary({ title: "mock header" });
component.shouldShowTitle("mock header");
});
(0, vitest_1.it)("renders primaryAction if the prop is defined", () => {
const component = renderHeaderPrimary({ primaryAction: { type: "navigate", label: "primary", path: "/1" } });
component.shouldShowPageActionButton("primary");
});
(0, vitest_1.it)("renders actions if prop is defined", () => {
const component = renderHeaderPrimary({ actions: [{ type: "navigate", label: "secondary", path: "/1", buttonType: "secondary" }] });
component.shouldShowPageActionButton("secondary");
});
(0, vitest_1.it)("renders overflow menu button if overflowActions prop is defined", () => {
const overflowMenuItems = [{ type: "internal-link", label: "Import Projects", path: "/1" }];
const component = renderHeaderPrimary({ overflowActions: overflowMenuItems });
component.shouldShowOverflowButton("overflow menu button");
});
(0, vitest_1.it)("renders the badge if titleBadge is defined", () => {
const badgeLabel = "label";
const badge = {
label: badgeLabel,
icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.RocketIcon, { size: 20 }),
variant: "feature",
};
const component = renderHeaderPrimary({ titleBadge: badge });
component.shouldShowBadge(badgeLabel);
});
(0, vitest_1.it)("renders titleAccessory if titleAccessory is defined", () => {
const component = renderHeaderPrimary({ titleAccessory: (0, jsx_runtime_1.jsx)("span", { children: "accessory content" }) });
component.shouldShowTitleAccessory("accessory content");
});
});
function renderHeaderPrimary({ breadcrumbs, title = "test", primaryAction, actions, overflowActions, titleBadge, titleAccessory }) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(routing_1.PageTitleProvider, { children: (0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Level1PageHeader_1.Level1PageHeader, { breadcrumbs: breadcrumbs, title: title, primaryAction: primaryAction, actions: actions, overflowActions: overflowActions, titleBadge: titleBadge, titleAccessory: titleAccessory }) }) }));
return getHeaderPrimaryInteractions(container);
}
function getHeaderPrimaryInteractions(container) {
return {
shouldShowBackLinkWithCorrectHref: (label, href) => {
testing_library_1.domQueries.getLink(`go back ${label}`).assertHref(href);
},
shouldShowBackLinkWithCorrectContent: (label) => {
(0, vitest_1.expect)(testing_library_1.domQueries.getLink(`go back ${label}`).innerElement).toBeInTheDocument();
},
shouldShowTitle: (title) => {
(0, vitest_1.expect)(react_1.screen.getByText(title)).toBeInTheDocument();
},
shouldShowPageActionButton: (accessibleName) => {
testing_library_1.domQueries.getLink(accessibleName).assertIsInTheDocument();
},
shouldShowOverflowButton: (accessibleName) => {
testing_library_1.domQueries.getButton(accessibleName).assertIsInTheDocument();
},
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
shouldShowBadge: (badgeLabel) => {
(0, vitest_1.expect)(react_1.screen.getByText(badgeLabel)).toBeInTheDocument();
},
shouldShowTitleAccessory: (text) => {
testing_library_1.domQueries.getText(text).assertIsInTheDocument();
},
};
}