@octopusdeploy/design-system-components
Version:
The design systems component library.
71 lines (70 loc) • 3.32 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 Notification_1 = require("../Notification");
(0, vitest_1.describe)("Notification", () => {
(0, vitest_1.it)("is accessible", async () => {
const notification = renderNotification({ type: "info", title: "title", description: "description", onNotificationCallToActionClicked: vitest_1.vi.fn() });
await notification.shouldBeAccessible();
});
(0, vitest_1.it)("shows title and description", () => {
const title = "title";
const description = "description";
const notification = renderNotification({ type: "info", title, description, onNotificationCallToActionClicked: vitest_1.vi.fn() });
notification.shouldShowTitle(title);
notification.shouldShowDescription(description);
});
(0, vitest_1.it)("shows links when provided, and the Call to Action callback is called when the link is clicked", async () => {
const callToActionCallback = vitest_1.vi.fn();
const internalLinkLabel = "Internal Link";
const externalLinkLabel = "External Link";
const refreshLinkLabel = "Refresh Link";
const links = [
{
type: "Internal",
label: internalLinkLabel,
href: "#",
},
{
type: "External",
label: externalLinkLabel,
href: "https://google.com",
},
{
type: "Refresh",
label: refreshLinkLabel,
},
];
const notification = renderNotification({ type: "info", title: "title", description: "description", links, onNotificationCallToActionClicked: callToActionCallback });
await notification.clickLink(internalLinkLabel);
await notification.clickLink(internalLinkLabel);
await notification.clickLink(internalLinkLabel);
(0, vitest_1.expect)(callToActionCallback).toHaveBeenCalledTimes(3);
});
});
function renderNotification(props) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Notification_1.Notification, { ...props }) }));
return notificationInteractions(container);
}
function notificationInteractions(container) {
return {
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
shouldShowTitle: (title) => {
(0, vitest_1.expect)(react_1.screen.getByText(title)).toBeInTheDocument();
},
shouldShowDescription: (description) => {
(0, vitest_1.expect)(react_1.screen.getByText(description)).toBeInTheDocument();
},
clickLink: async (linkLabel) => {
await testing_library_1.domQueries.getLink(linkLabel).click();
},
};
}