@octopusdeploy/design-system-components
Version:
The design systems component library.
169 lines (168 loc) • 7.64 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 ActionableCallout_1 = require("../ActionableCallout");
const normalCalloutTypes = ["info", "success", "warning", "error", "feature"];
(0, vitest_1.describe)("ActionableCallout", () => {
vitest_1.it.each(normalCalloutTypes)("renders %s type callout with title and body", (type) => {
const callout = renderActionableCallout({
type,
title: `${type} title`,
children: `${type} message`,
primaryAction: { label: "Do something", onClick: vitest_1.vi.fn() },
onClose: vitest_1.vi.fn(),
});
callout.shouldShowTitle(`${type} title`);
callout.shouldShowBody(`${type} message`);
});
(0, vitest_1.it)("renders upsell type callout with title and body", () => {
const callout = renderActionableCallout({
type: "upsell",
title: "Upgrade for more",
children: "Get access to advanced features.",
primaryAction: { label: "Upgrade now", onClick: vitest_1.vi.fn() },
secondaryAction: { href: "#", children: "Learn more" },
});
callout.shouldShowTitle("Upgrade for more");
callout.shouldShowBody("Get access to advanced features.");
});
(0, vitest_1.it)("renders primary action as button and calls onClick when clicked", async () => {
const onClick = vitest_1.vi.fn();
const callout = renderActionableCallout({
type: "info",
title: "Title",
children: "Body",
primaryAction: { label: "Primary Action", onClick },
onClose: vitest_1.vi.fn(),
});
callout.shouldHavePrimaryButton("Primary Action");
await callout.clickPrimaryButton("Primary Action");
(0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(1);
});
(0, vitest_1.it)("renders primary action as link with correct href", () => {
const callout = renderActionableCallout({
type: "info",
title: "Title",
children: "Body",
primaryAction: { href: "https://example.com", children: "Learn more" },
onClose: vitest_1.vi.fn(),
});
callout.shouldHavePrimaryLink("Learn more", "https://example.com");
});
(0, vitest_1.it)("renders close button and calls onClose when clicked", async () => {
const onClose = vitest_1.vi.fn();
const callout = renderActionableCallout({
type: "info",
title: "Title",
children: "Body",
primaryAction: { label: "Action", onClick: vitest_1.vi.fn() },
onClose,
});
callout.shouldHaveCloseButton();
await callout.clickCloseButton();
(0, vitest_1.expect)(onClose).toHaveBeenCalledTimes(1);
});
(0, vitest_1.describe)("upsell callout", () => {
(0, vitest_1.it)("renders primary button and secondary link", () => {
const callout = renderActionableCallout({
type: "upsell",
title: "Upgrade",
children: "Body",
primaryAction: { label: "Upgrade now", onClick: vitest_1.vi.fn() },
secondaryAction: { href: "https://example.com", children: "Learn more" },
});
callout.shouldHavePrimaryButton("Upgrade now");
callout.shouldHaveSecondaryLink("Learn more", "https://example.com");
});
(0, vitest_1.it)("does not render close button", () => {
const callout = renderActionableCallout({
type: "upsell",
title: "Upgrade",
children: "Body",
primaryAction: { label: "Upgrade", onClick: vitest_1.vi.fn() },
secondaryAction: { href: "#", children: "Learn more" },
});
callout.shouldNotHaveCloseButton();
});
});
(0, vitest_1.describe)("accessibility", () => {
(0, vitest_1.it)("is accessible with normal callout", async () => {
const callout = renderActionableCallout({
type: "info",
title: "Title",
children: "Body",
primaryAction: { label: "Action", onClick: vitest_1.vi.fn() },
onClose: vitest_1.vi.fn(),
});
await callout.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with link as primary action", async () => {
const callout = renderActionableCallout({
type: "info",
title: "Title",
children: "Body",
primaryAction: { href: "#", children: "Link" },
onClose: vitest_1.vi.fn(),
});
await callout.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with upsell callout", async () => {
const callout = renderActionableCallout({
type: "upsell",
title: "Upgrade",
children: "Body",
primaryAction: { label: "Upgrade", onClick: vitest_1.vi.fn() },
secondaryAction: { href: "#", children: "Learn more" },
});
await callout.shouldBeAccessible();
});
});
});
function renderActionableCallout(props) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(ActionableCallout_1.ActionableCallout, { ...props }) }));
return actionableCalloutInteractions(container, props);
}
function actionableCalloutInteractions(container, props) {
return {
shouldShowTitle: (title) => {
(0, vitest_1.expect)(react_1.screen.getByText(title)).toBeInTheDocument();
},
shouldShowBody: (body) => {
(0, vitest_1.expect)(react_1.screen.getByText(body)).toBeInTheDocument();
},
shouldHavePrimaryButton: (label) => {
testing_library_1.domQueries.getButton(label).assertIsInTheDocument();
},
clickPrimaryButton: async (label) => {
await testing_library_1.domQueries.getButton(label).click();
},
shouldHavePrimaryLink: (label, href) => {
const link = testing_library_1.domQueries.getLink(label, { containerElement: container });
link.assertIsInTheDocument();
link.assertHref(href);
},
shouldHaveSecondaryLink: (label, href) => {
const link = testing_library_1.domQueries.getLink(label, { containerElement: container });
link.assertIsInTheDocument();
link.assertHref(href);
},
shouldHaveCloseButton: () => {
testing_library_1.domQueries.getButton("Close").assertIsInTheDocument();
},
shouldNotHaveCloseButton: () => {
testing_library_1.domQueries.queryButton("Close").assertIsNotInTheDocument();
},
clickCloseButton: async () => {
await testing_library_1.domQueries.getButton("Close").click();
},
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
};
}