@octopusdeploy/design-system-components/dist/src/components/Card/__testing__/Card.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_icons_1 = require("@octopusdeploy/design-system-icons");
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 Card_1 = require("../Card");
(0, vitest_1.describe)("DetailedCard", () => {
    (0, vitest_1.it)("renders title and description, and radio input by default", () => {
        const card = renderDetailedCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            value: "kubernetes",
        });
        card.assertHasText("Deploy to Kubernetes");
        card.assertHasText("Deploy containers to a Kubernetes cluster");
        card.assertHasRadio("Deploy to Kubernetes");
    });
    (0, vitest_1.it)("renders a checkbox input when multi-select", () => {
        const card = renderDetailedCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            value: "kubernetes",
            isMultiSelect: true,
        });
        card.assertHasCheckbox("Deploy to Kubernetes");
    });
    (0, vitest_1.it)("calls onChange with the card value when selected", async () => {
        const onChange = vitest_1.vi.fn();
        const card = renderDetailedCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            value: "kubernetes",
            onChange,
        });
        await card.toggleRadio("Deploy to Kubernetes");
        (0, vitest_1.expect)(onChange).toHaveBeenCalledWith("kubernetes");
    });
    (0, vitest_1.it)("renders the radio as checked when checked prop is true", () => {
        const card = renderDetailedCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            value: "kubernetes",
            checked: true,
        });
        card.assertRadioIsSelected("Deploy to Kubernetes");
    });
    (0, vitest_1.it)("disables the input when disabled is true", () => {
        const card = renderDetailedCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            value: "kubernetes",
            disabled: true,
        });
        card.assertRadioIsDisabled("Deploy to Kubernetes");
    });
    (0, vitest_1.describe)("adornments", () => {
        (0, vitest_1.it)("renders an icon adornment", () => {
            const card = renderDetailedCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                value: "kubernetes",
                adornment: (0, jsx_runtime_1.jsx)(design_system_icons_1.CloudIcon, { title: "Cloud", size: "font-size" }),
            });
            card.assertHasImage("Cloud");
        });
        (0, vitest_1.it)("renders a tag adornment", () => {
            const card = renderDetailedCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                value: "kubernetes",
                adornment: { label: "Beta" },
            });
            card.assertHasText("Beta");
        });
        (0, vitest_1.it)("renders a badge adornment", () => {
            const card = renderDetailedCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                value: "kubernetes",
                adornment: { variant: "info", label: "Recommended" },
            });
            card.assertHasText("Recommended");
        });
    });
});
(0, vitest_1.describe)("CompactCard", () => {
    (0, vitest_1.it)("renders title, and radio input by default", () => {
        const card = renderCompactCard({
            title: "Kubernetes",
            value: "kubernetes",
        });
        card.assertHasText("Kubernetes");
        card.assertHasRadio("Kubernetes");
    });
    (0, vitest_1.it)("renders a checkbox input when multi-select", () => {
        const card = renderCompactCard({
            title: "Kubernetes",
            value: "kubernetes",
            isMultiSelect: true,
        });
        card.assertHasCheckbox("Kubernetes");
    });
    (0, vitest_1.it)("calls onChange with the card value when toggled", async () => {
        const onChange = vitest_1.vi.fn();
        const card = renderCompactCard({
            title: "Kubernetes",
            value: "kubernetes",
            isMultiSelect: true,
            onChange,
        });
        await card.toggleCheckbox("Kubernetes");
        (0, vitest_1.expect)(onChange).toHaveBeenCalledWith("kubernetes");
    });
    (0, vitest_1.it)("renders the checkbox as checked when checked prop is true", () => {
        const card = renderCompactCard({
            title: "Kubernetes",
            value: "kubernetes",
            isMultiSelect: true,
            checked: true,
        });
        card.assertCheckboxIsChecked("Kubernetes");
    });
    (0, vitest_1.it)("disables the input when disabled is true", () => {
        const card = renderCompactCard({
            title: "Kubernetes",
            value: "kubernetes",
            isMultiSelect: true,
            disabled: true,
        });
        card.assertCheckboxIsDisabled("Kubernetes");
    });
    (0, vitest_1.describe)("adornments", () => {
        (0, vitest_1.it)("renders an icon adornment", () => {
            const card = renderCompactCard({
                title: "Kubernetes",
                value: "kubernetes",
                adornment: (0, jsx_runtime_1.jsx)(design_system_icons_1.CloudIcon, { title: "Cloud", size: "font-size" }),
            });
            card.assertHasImage("Cloud");
        });
    });
});
(0, vitest_1.describe)("ActionCard", () => {
    (0, vitest_1.it)("renders title, subtitle, and description", () => {
        const card = renderActionCard({
            title: "Deploy to Kubernetes",
            subtitle: "By Octopus Deploy",
            description: "Deploy containers to a Kubernetes cluster",
        });
        card.assertHasText("Deploy to Kubernetes");
        card.assertHasText("By Octopus Deploy");
        card.assertHasText("Deploy containers to a Kubernetes cluster");
    });
    (0, vitest_1.it)("calls primary action onClick when the primary action is clicked", async () => {
        const onClick = vitest_1.vi.fn();
        const card = renderActionCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            primaryAction: { label: "Add step", onClick },
        });
        await card.clickButton("Add step");
        (0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(1);
    });
    (0, vitest_1.it)("calls secondary action onClick when the secondary action is a button", async () => {
        const onClick = vitest_1.vi.fn();
        const card = renderActionCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            secondaryAction: { label: "More info", onClick },
        });
        await card.clickButton("More info");
        (0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(1);
    });
    (0, vitest_1.it)("renders a link when the secondary action has an href", () => {
        const card = renderActionCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            secondaryAction: { label: "Documentation", href: "/docs/kubernetes" },
        });
        card.assertLinkHasHref("Documentation", "/docs/kubernetes");
    });
    (0, vitest_1.it)("disables both action buttons when the card is disabled", () => {
        const card = renderActionCard({
            title: "Deploy to Kubernetes",
            description: "Deploy containers to a Kubernetes cluster",
            primaryAction: { label: "Add step", onClick: vitest_1.vi.fn() },
            secondaryAction: { label: "More info", onClick: vitest_1.vi.fn() },
            disabled: true,
        });
        card.assertButtonIsDisabled("Add step");
        card.assertButtonIsDisabled("More info");
    });
    (0, vitest_1.describe)("adornments", () => {
        (0, vitest_1.it)("renders the leading icon adornment", () => {
            const card = renderActionCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                adornments: {
                    leadingAdornment: (0, jsx_runtime_1.jsx)(design_system_icons_1.CloudIcon, { title: "Cloud", size: "font-size" }),
                },
            });
            card.assertHasImage("Cloud");
        });
        (0, vitest_1.it)("renders a trailing tag adornment alongside the leading icon", () => {
            const card = renderActionCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                adornments: {
                    leadingAdornment: (0, jsx_runtime_1.jsx)(design_system_icons_1.CloudIcon, { title: "Cloud", size: "font-size" }),
                    trailingAdornment: { label: "Beta" },
                },
            });
            card.assertHasImage("Cloud");
            card.assertHasText("Beta");
        });
        (0, vitest_1.it)("renders a trailing badge adornment alongside the leading icon", () => {
            const card = renderActionCard({
                title: "Deploy to Kubernetes",
                description: "Deploy containers to a Kubernetes cluster",
                adornments: {
                    leadingAdornment: (0, jsx_runtime_1.jsx)(design_system_icons_1.CloudIcon, { title: "Cloud", size: "font-size" }),
                    trailingAdornment: { variant: "info", label: "Recommended" },
                },
            });
            card.assertHasImage("Cloud");
            card.assertHasText("Recommended");
        });
    });
});
function renderDetailedCard(props) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Card_1.DetailedCard, { checked: false, onChange: () => { }, isMultiSelect: false, groupName: "test-group", ...props }) }));
    return createOptionCardInteractions();
}
function renderCompactCard(props) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Card_1.CompactCard, { checked: false, onChange: () => { }, isMultiSelect: false, groupName: "test-group", ...props }) }));
    return createOptionCardInteractions();
}
function renderActionCard(props) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Card_1.ActionCard, { ...props }) }));
    return {
        assertHasText(text) {
            testing_library_1.domQueries.getText(text).assertIsInTheDocument();
        },
        assertHasImage(name) {
            testing_library_1.domQueries.getImage(name).assertIsInTheDocument();
        },
        async clickButton(name) {
            await testing_library_1.domQueries.getButton(name).click();
        },
        assertButtonIsDisabled(name) {
            testing_library_1.domQueries.getButton(name).assertIsDisabled();
        },
        assertLinkHasHref(name, href) {
            testing_library_1.domQueries.getLink(name).assertHref(href);
        },
    };
}
function createOptionCardInteractions() {
    return {
        assertHasText(text) {
            testing_library_1.domQueries.getText(text).assertIsInTheDocument();
        },
        assertHasImage(name) {
            testing_library_1.domQueries.getImage(name).assertIsInTheDocument();
        },
        assertHasRadio(name) {
            testing_library_1.domQueries.getRadioButton(name).assertIsInTheDocument();
        },
        assertHasCheckbox(name) {
            testing_library_1.domQueries.getCheckbox(name).assertIsInTheDocument();
        },
        async toggleRadio(name) {
            await testing_library_1.domQueries.getRadioButton(name).click();
        },
        async toggleCheckbox(name) {
            await testing_library_1.domQueries.getCheckbox(name).toggle();
        },
        assertRadioIsSelected(name) {
            testing_library_1.domQueries.getRadioButton(name).assertIsSelected();
        },
        assertCheckboxIsChecked(name) {
            (0, vitest_1.expect)(testing_library_1.domQueries.getCheckbox(name).isChecked).toBe(true);
        },
        assertRadioIsDisabled(name) {
            testing_library_1.domQueries.getRadioButton(name).assertIsDisabled();
        },
        assertCheckboxIsDisabled(name) {
            testing_library_1.domQueries.getCheckbox(name).assertIsDisabled();
        },
    };
}