@octopusdeploy/design-system-components/dist/src/components/Callout/__testing__/Callout.spec.js

The design systems component library.

"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 Callout_1 = require("../Callout");
const Callout_constants_1 = require("../Callout.constants");
const calloutContent_1 = require("../calloutContent");
(0, vitest_1.describe)("Callout", () => {
    vitest_1.it.each(Callout_constants_1.calloutMessageStates.filter((s) => s !== "upsell"))("renders the title and content for the %s message state", (messageState) => {
        const callout = renderCallout({ messageState, title: "Callout title", content: (0, calloutContent_1.calloutContent) `Callout body` });
        callout.shouldShowText("Callout title");
        callout.shouldShowText("Callout body");
    });
    (0, vitest_1.it)("renders the title and content for the upsell message state", () => {
        const callout = renderCallout({ messageState: "upsell", title: "Callout title", content: (0, calloutContent_1.calloutContent) `Callout body`, actions: { primary: { label: "Upgrade", onClick: vitest_1.vi.fn() } } });
        callout.shouldShowText("Callout title");
        callout.shouldShowText("Callout body");
    });
    (0, vitest_1.it)("hides the title when hideTitle is set", () => {
        const callout = renderCallout({ messageState: "information", title: "Hidden title", hideTitle: true, content: (0, calloutContent_1.calloutContent) `Body` });
        callout.shouldNotShowText("Hidden title");
        callout.shouldShowText("Body");
    });
    (0, vitest_1.it)("renders a link within the content with its href", () => {
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `See the ${calloutContent_1.calloutContent.link("docs link", "/docs")} for more.` });
        callout.shouldShowLink("docs link", "/docs");
    });
    (0, vitest_1.it)("renders bold and inline-code content", () => {
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `This is ${calloutContent_1.calloutContent.bold("bold")} and ${calloutContent_1.calloutContent.code("code")}.` });
        callout.shouldShowText("bold");
        callout.shouldShowText("code");
    });
    (0, vitest_1.it)("renders plain string content", () => {
        const callout = renderCallout({ messageState: "information", title: "Title", content: "A plain string body" });
        callout.shouldShowText("A plain string body");
    });
    (0, vitest_1.it)("renders plain string content in an outlined callout", () => {
        const callout = renderCallout({ messageState: "warning", type: "outlined", title: "Title", content: "An outlined string body" });
        callout.shouldShowText("An outlined string body");
    });
    (0, vitest_1.it)("renders the primary action as a button and calls onClick when clicked", async () => {
        const onClick = vitest_1.vi.fn();
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `Body`, actions: { primary: { label: "Do it", onClick } } });
        await callout.clickButton("Do it");
        (0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(1);
    });
    (0, vitest_1.it)("renders a secondary link action with its href", () => {
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `Body`, actions: { link: { isExternal: true, label: "Secondary", href: "https://example.com" } } });
        callout.shouldShowLink("Secondary", "https://example.com");
    });
    (0, vitest_1.it)("renders a dismiss button and calls onClose when clicked", async () => {
        const onClose = vitest_1.vi.fn();
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `Body`, canClose: true, onClose });
        await callout.clickDismiss();
        (0, vitest_1.expect)(onClose).toHaveBeenCalledTimes(1);
    });
    (0, vitest_1.it)("does not render a dismiss button when the callout is not closable", () => {
        const callout = renderCallout({ messageState: "information", title: "Title", content: (0, calloutContent_1.calloutContent) `Body` });
        callout.shouldNotHaveDismissButton();
    });
    (0, vitest_1.it)("renders an outlined callout", () => {
        const callout = renderCallout({ messageState: "warning", type: "outlined", title: "Outlined title", content: (0, calloutContent_1.calloutContent) `Outlined body` });
        callout.shouldShowText("Outlined title");
        callout.shouldShowText("Outlined body");
    });
    (0, vitest_1.it)("is accessible", async () => {
        const callout = renderCallout({
            messageState: "information",
            title: "Title",
            content: (0, calloutContent_1.calloutContent) `Body with a ${calloutContent_1.calloutContent.link("link", "/docs")}.`,
            actions: { primary: { label: "Do it", onClick: vitest_1.vi.fn() } },
            canClose: true,
            onClose: vitest_1.vi.fn(),
        });
        await callout.shouldBeAccessible();
    });
});
function renderCallout(props) {
    const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Callout_1.Callout, { ...props }) }));
    return getInteractions(container);
}
function getInteractions(container) {
    return {
        shouldShowText: (text) => testing_library_1.domQueries.getText(text, { containerElement: container }).assertIsInTheDocument(),
        shouldNotShowText: (text) => testing_library_1.domQueries.queryText(text, { containerElement: container }).assertIsNotInTheDocument(),
        shouldShowLink: (label, href) => {
            const link = testing_library_1.domQueries.getLink(label, { containerElement: container });
            link.assertIsInTheDocument();
            link.assertHref(href);
        },
        clickButton: (label) => testing_library_1.domQueries.getButton(label).click(),
        clickDismiss: () => testing_library_1.domQueries.getButton("Dismiss callout").click(),
        shouldNotHaveDismissButton: () => testing_library_1.domQueries.queryButton("Dismiss callout").assertIsNotInTheDocument(),
        shouldBeAccessible: async () => {
            const results = await (0, vitest_axe_1.axe)(container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        },
    };
}