@octopusdeploy/design-system-components
Version:
The design systems component library.
60 lines (59 loc) • 3.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const Paragraph_1 = require("../Paragraph");
(0, vitest_1.describe)("Paragraph", () => {
(0, vitest_1.it)("renders its children", () => {
const paragraph = renderParagraph({ children: "Hello world" });
paragraph.shouldShowContent("Hello world");
});
(0, vitest_1.it)("renders a p element", () => {
const paragraph = renderParagraph({});
paragraph.shouldRenderAs("p");
});
(0, vitest_1.it)("removes the browser's default margins", () => {
const paragraph = renderParagraph({});
paragraph.shouldHaveStyle({ margin: "0px" });
});
(0, vitest_1.it)("applies the medium body font by default", () => {
const paragraph = renderParagraph({});
paragraph.shouldHaveStyle({ font: design_system_tokens_1.text.body.regular.medium });
});
vitest_1.it.each([
["large", design_system_tokens_1.text.body.regular.large],
["medium", design_system_tokens_1.text.body.regular.medium],
["small", design_system_tokens_1.text.body.regular.small],
["xSmall", design_system_tokens_1.text.body.regular.xSmall],
])("applies the %s body font token", (size, expectedFont) => {
const paragraph = renderParagraph({ size });
paragraph.shouldHaveStyle({ font: expectedFont });
});
(0, vitest_1.it)("applies the primary text token when color is primary", () => {
const paragraph = renderParagraph({ color: "primary" });
paragraph.shouldHaveStyle({ color: design_system_tokens_1.themeTokens.color.text.primary });
});
(0, vitest_1.it)("applies the secondary text token when color is secondary", () => {
const paragraph = renderParagraph({ color: "secondary" });
paragraph.shouldHaveStyle({ color: design_system_tokens_1.themeTokens.color.text.secondary });
});
});
const contentLabel = "Paragraph content";
function renderParagraph({ children = contentLabel, ...props }) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { ...props, children: children }));
return {
shouldShowContent: (content) => {
testing_library_1.domQueries.getText(content).assertIsInTheDocument();
},
// The content is the Paragraph's direct child, so the queried text node is the `<p>` itself.
shouldRenderAs: (tagName) => {
(0, vitest_1.expect)(testing_library_1.domQueries.getText(contentLabel).innerElement.tagName).toBe(tagName.toUpperCase());
},
shouldHaveStyle: (style) => {
(0, vitest_1.expect)(testing_library_1.domQueries.getText(contentLabel).innerElement).toHaveStyle(style);
},
};
}