@octopusdeploy/design-system-components
Version:
The design systems component library.
107 lines (106 loc) • 5.81 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 routing_1 = require("../../../routing");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const HeaderPrimary_1 = require("../HeaderPrimary");
(0, vitest_1.describe)("HeaderPrimary", () => {
(0, vitest_1.it)("is accessible", async () => {
const href = "test.com";
const accessibleName = "project";
const component = renderHeaderPrimary({
breadcrumbs: [{ label: "nav up", pageUrl: "/test" }],
logo: { href, accessibleName },
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 logo if logo prop is defined", () => {
const href = "test.com";
const accessibleName = "project";
const component = renderHeaderPrimary({ logo: { href, accessibleName } });
component.shouldShowLogoWithCorrectAttributes(href, accessibleName);
});
(0, vitest_1.it)("renders title", () => {
const component = renderHeaderPrimary({ title: "mock header" });
component.shouldShowTitle("mock header");
});
(0, vitest_1.it)("renders title icon if titleIcon prop is defined", () => {
const component = renderHeaderPrimary({
titleIcon: ((0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("title", { children: "test svg" }) })),
});
component.shouldShowTitleIcon("test svg");
});
(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 given badge if titleBadges prop is defined", () => {
const component = renderHeaderPrimary({
titleBadges: [
{ variant: "neutral", label: "badge1" },
{ status: "disabled", showLabel: true },
],
});
component.shouldShowTitleBadges(["badge1", "Disabled"]);
});
});
function renderHeaderPrimary({ breadcrumbs, logo, title = "test", titleIcon, titleBadges, primaryAction, actions, overflowActions, screenSize = 812 }) {
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)(HeaderPrimary_1.HeaderPrimary, { breadcrumbs: breadcrumbs, logo: logo, title: title, titleIcon: titleIcon, titleBadges: titleBadges, primaryAction: primaryAction, actions: actions, overflowActions: overflowActions }) }) }));
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();
},
shouldShowLogoWithCorrectAttributes: (src, accessibleName) => {
(0, vitest_1.expect)(react_1.screen.getByRole("img", { name: accessibleName })).toHaveAttribute("src", src);
},
shouldShowTitle: (title) => {
(0, vitest_1.expect)(react_1.screen.getByText(title)).toBeInTheDocument();
},
shouldShowTitleIcon: (svgTitle) => {
(0, vitest_1.expect)(react_1.screen.getByTitle(svgTitle)).toBeInTheDocument();
},
shouldNotShowTitleIcon: (svgTitle) => {
(0, vitest_1.expect)(react_1.screen.queryByTitle(svgTitle)).not.toBeInTheDocument();
},
shouldShowTitleBadges: (badgeLabels) => {
badgeLabels.forEach((label) => {
(0, vitest_1.expect)(react_1.screen.getByText(label)).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();
},
};
}