@octopusdeploy/design-system-components
Version:
The design systems component library.
69 lines (68 loc) • 4.05 kB
JavaScript
;
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 TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const literalContent_1 = require("../literalContent");
const literalNodes_1 = require("../literalNodes");
const renderLiteral_1 = require("../renderLiteral");
const defaultOptions = { code: "default", link: "default" };
(0, vitest_1.describe)("renderLiteral", () => {
(0, vitest_1.it)("renders plain string content", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `Just some text`);
rendered.shouldShowText("Just some text");
});
(0, vitest_1.it)("renders an internal link with its href", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `See the ${(0, literalNodes_1.link)("docs", "/docs")} for more.`);
rendered.shouldShowLink("docs", "/docs");
});
(0, vitest_1.it)("renders an internal link that opens in a new tab", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `Open ${(0, literalNodes_1.link)("docs", "/docs", true)}.`);
rendered.shouldShowLinkOpeningInNewWindow("docs");
});
(0, vitest_1.it)("renders an external link with its href", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `Visit ${(0, literalNodes_1.externalLink)("our site", "https://octopus.com")}.`);
rendered.shouldShowLink("our site", "https://octopus.com");
});
(0, vitest_1.it)("renders bold content", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `This is ${(0, literalNodes_1.bold)("important")}.`);
rendered.shouldShowText("important");
});
(0, vitest_1.it)("renders inline code content", () => {
const rendered = renderContent((0, literalContent_1.literalContent) `Set ${(0, literalNodes_1.code)("isVisible")} to true.`);
rendered.shouldShowText("isVisible");
});
(0, vitest_1.it)("renders nested content arrays", () => {
const nested = (0, literalContent_1.literalContent) `a nested ${(0, literalNodes_1.link)("link", "/nested")}`;
const rendered = renderContent((0, literalContent_1.literalContent) `Outer with ${nested}.`);
rendered.shouldShowText("Outer with");
rendered.shouldShowLink("link", "/nested");
});
const axisOptions = [
{ code: "high-contrast", link: "high-contrast" },
{ code: "default", link: "high-contrast" },
{ code: "default", link: "default" },
];
vitest_1.it.each(axisOptions)("renders links and code for options %o", (options) => {
const rendered = renderContent((0, literalContent_1.literalContent) `Read ${(0, literalNodes_1.link)("docs", "/docs")} and set ${(0, literalNodes_1.code)("flag")}.`, options);
rendered.shouldShowLink("docs", "/docs");
rendered.shouldShowText("flag");
});
});
function renderContent(content, options = defaultOptions) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: wrap((0, renderLiteral_1.renderLiteral)(content, options)) }));
return {
shouldShowText: (value) => testing_library_1.domQueries.getText(value, { containerElement: container }).assertIsInTheDocument(),
shouldShowLink: (label, href) => {
const found = testing_library_1.domQueries.getLink(label, { containerElement: container });
found.assertIsInTheDocument();
found.assertHref(href);
},
shouldShowLinkOpeningInNewWindow: (label) => testing_library_1.domQueries.getLink(label, { containerElement: container }).assertWillOpenInNewWindow(),
};
}
function wrap(element) {
return (0, jsx_runtime_1.jsx)("p", { children: element });
}