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

The design systems component library.

"use strict";
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 react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const Stack_1 = require("../Stack");
(0, vitest_1.describe)("Stack", () => {
    (0, vitest_1.it)("renders all of its children", () => {
        const stack = renderStack({
            children: [(0, jsx_runtime_1.jsx)("span", { children: "First" }, "1"), (0, jsx_runtime_1.jsx)("span", { children: "Second" }, "2"), (0, jsx_runtime_1.jsx)("span", { children: "Third" }, "3")],
        });
        stack.shouldShowContent("First");
        stack.shouldShowContent("Second");
        stack.shouldShowContent("Third");
    });
    (0, vitest_1.it)("renders a div by default", () => {
        const stack = renderStack({});
        stack.shouldRenderAs("div");
    });
    (0, vitest_1.it)("renders the element from the as prop", () => {
        const stack = renderStack({ as: "ul", children: (0, jsx_runtime_1.jsx)("li", { children: "List item" }) });
        stack.shouldRenderWithRole("list");
    });
    (0, vitest_1.it)("flows vertically by default", () => {
        const stack = renderStack({});
        stack.shouldHaveStyle({ flexDirection: "column" });
    });
    (0, vitest_1.it)("flows horizontally when direction is horizontal", () => {
        const stack = renderStack({ direction: "horizontal" });
        stack.shouldHaveStyle({ flexDirection: "row" });
    });
    (0, vitest_1.it)("applies the gap from the matching space token", () => {
        const stack = renderStack({ gap: "small" });
        stack.shouldHaveStyle({ gap: design_system_tokens_1.space[16] });
    });
    (0, vitest_1.it)("stretches items along the cross axis by default", () => {
        const stack = renderStack({});
        stack.shouldHaveStyle({ alignItems: "stretch" });
    });
    (0, vitest_1.it)("maps align to align-items", () => {
        const stack = renderStack({ align: "center" });
        stack.shouldHaveStyle({ alignItems: "center" });
    });
    (0, vitest_1.it)("justifies content to the start by default", () => {
        const stack = renderStack({});
        stack.shouldHaveStyle({ justifyContent: "flex-start" });
    });
    (0, vitest_1.it)("maps justify to justify-content", () => {
        const stack = renderStack({ justify: "space-between" });
        stack.shouldHaveStyle({ justifyContent: "space-between" });
    });
    (0, vitest_1.it)("does not wrap by default", () => {
        const stack = renderStack({});
        stack.shouldHaveStyle({ flexWrap: "nowrap" });
    });
    (0, vitest_1.it)("applies padding to all sides from the matching space token", () => {
        const stack = renderStack({ padding: "medium" });
        stack.shouldHaveStyle({ padding: design_system_tokens_1.space[24] });
    });
    (0, vitest_1.it)("applies block padding from the matching space token", () => {
        const stack = renderStack({ paddingBlock: "medium" });
        stack.shouldHaveStyle({ paddingBlock: design_system_tokens_1.space[24] });
    });
    (0, vitest_1.it)("applies inline padding from the matching space token", () => {
        const stack = renderStack({ paddingInline: "small" });
        stack.shouldHaveStyle({ paddingInline: design_system_tokens_1.space[16] });
    });
    (0, vitest_1.it)("lets paddingBlock override padding on the block axis", () => {
        const stack = renderStack({ padding: "medium", paddingBlock: "xSmall" });
        stack.shouldHaveStyle({ paddingBlock: design_system_tokens_1.space[8] });
    });
    (0, vitest_1.it)("lets paddingInline override padding on the inline axis", () => {
        const stack = renderStack({ padding: "medium", paddingInline: "xSmall" });
        stack.shouldHaveStyle({ paddingInline: design_system_tokens_1.space[8] });
    });
});
(0, vitest_1.describe)("StackItem", () => {
    (0, vitest_1.it)("renders its children", () => {
        const item = renderStackItem({ children: "Item content" });
        item.shouldShowContent("Item content");
    });
    (0, vitest_1.it)("renders a div by default", () => {
        const item = renderStackItem({});
        item.shouldRenderAs("div");
    });
    (0, vitest_1.it)("renders the element from the as prop", () => {
        const item = renderStackItem({ as: "li" });
        item.shouldRenderAs("li");
    });
    (0, vitest_1.it)("grows to fill space when grow is true", () => {
        const item = renderStackItem({ grow: true });
        item.shouldHaveStyle({ flexGrow: "1" });
    });
    (0, vitest_1.it)("does not grow when grow is false", () => {
        const item = renderStackItem({ grow: false });
        item.shouldHaveStyle({ flexGrow: "0" });
    });
    (0, vitest_1.it)("shrinks when shrink is true", () => {
        const item = renderStackItem({ shrink: true });
        item.shouldHaveStyle({ flexShrink: "1" });
    });
    (0, vitest_1.it)("can be prevented from shrinking", () => {
        const item = renderStackItem({ shrink: false });
        item.shouldHaveStyle({ flexShrink: "0" });
    });
});
// Rendering text directly as the only child means the queried text node *is* the Stack /
// StackItem element, so style assertions read the component's own styles without any DOM
// traversal.
const contentLabel = "Stack content";
// Only the required props are defaulted here, so each test exercises the component's own
// defaults for everything it doesn't explicitly override.
const defaultStackProps = {
    gap: "none",
    children: contentLabel,
};
const defaultStackItemProps = {
    grow: false,
    shrink: true,
    children: contentLabel,
};
function renderStack(overrides) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(Stack_1.Stack, { ...defaultStackProps, ...overrides }));
    return {
        shouldShowContent: (text) => {
            (0, vitest_1.expect)(react_1.screen.getByText(text)).toBeInTheDocument();
        },
        shouldRenderWithRole: (role) => {
            (0, vitest_1.expect)(react_1.screen.getByRole(role)).toBeInTheDocument();
        },
        // The content is the Stack's direct child, so the queried text node is the container itself.
        shouldRenderAs: (tagName) => {
            (0, vitest_1.expect)(react_1.screen.getByText(contentLabel).tagName).toBe(tagName.toUpperCase());
        },
        shouldHaveStyle: (style) => {
            (0, vitest_1.expect)(react_1.screen.getByText(contentLabel)).toHaveStyle(style);
        },
    };
}
function renderStackItem(overrides) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(Stack_1.StackItem, { ...defaultStackItemProps, ...overrides }));
    return {
        shouldShowContent: (text) => {
            (0, vitest_1.expect)(react_1.screen.getByText(text)).toBeInTheDocument();
        },
        // The content is the item's direct child, so the queried text node is the item itself.
        shouldRenderAs: (tagName) => {
            (0, vitest_1.expect)(react_1.screen.getByText(contentLabel).tagName).toBe(tagName.toUpperCase());
        },
        shouldHaveStyle: (style) => {
            (0, vitest_1.expect)(react_1.screen.getByText(contentLabel)).toHaveStyle(style);
        },
    };
}