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

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const Logo_1 = require("../../Logo");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const StepCard_1 = require("../StepCard");
const testLogo = (0, jsx_runtime_1.jsx)(Logo_1.ThirdPartyLogo, { url: "https://cdn.svglogos.dev/logos/octopus-deploy.svg", size: design_system_tokens_1.space[40], isSquare: true });
(0, vitest_1.describe)("StepCard", () => {
    (0, vitest_1.describe)("required props", () => {
        (0, vitest_1.it)("renders with heading and logo", () => {
            const { assertHasText } = renderStepCard({ heading: "Test Heading", logo: testLogo });
            assertHasText("Test Heading");
        });
    });
    (0, vitest_1.describe)("optional props", () => {
        (0, vitest_1.it)("renders with subHeading", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                subHeading: "Test SubHeading",
                logo: testLogo,
            });
            assertHasText("Test SubHeading");
        });
        (0, vitest_1.it)("renders with chip label", () => {
            const { assertHasText } = renderStepCard({ heading: "Test Heading", chipLabel: "New", logo: testLogo });
            assertHasText("New");
        });
        (0, vitest_1.it)("renders with description", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                description: "Test description text",
                logo: testLogo,
            });
            assertHasText("Test description text");
        });
        (0, vitest_1.it)("renders with description as ReactNode", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                description: (0, jsx_runtime_1.jsx)("span", { children: "Custom description" }),
                logo: testLogo,
            });
            assertHasText("Custom description");
        });
    });
    (0, vitest_1.describe)("dotpoints", () => {
        (0, vitest_1.it)("renders all dotpoints when count is 2 or less", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                dotpoints: ["Feature 1", "Feature 2"],
                logo: testLogo,
            });
            assertHasText("Feature 1");
            assertHasText("Feature 2");
        });
        (0, vitest_1.it)("renders all dotpoints when truncateDotpoints is false", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                dotpoints: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
                truncateDotpoints: false,
                logo: testLogo,
            });
            assertHasText("Feature 1");
            assertHasText("Feature 2");
            assertHasText("Feature 3");
            assertHasText("Feature 4");
        });
        (0, vitest_1.it)("truncates dotpoints to 2 when more than 2 and truncateDotpoints is true", () => {
            const { assertHasText, assertMissingText } = renderStepCard({
                heading: "Test Heading",
                dotpoints: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
                truncateDotpoints: true,
                logo: testLogo,
            });
            assertHasText("Feature 1");
            assertHasText("Feature 2");
            assertMissingText("Feature 3");
            assertMissingText("Feature 4");
            assertHasText("+ 2 more");
        });
    });
    (0, vitest_1.describe)("actions", () => {
        (0, vitest_1.describe)("primary action", () => {
            (0, vitest_1.it)("renders primary action button with onClick", async () => {
                const user = user_event_1.default.setup();
                const handleClick = vitest_1.vi.fn();
                const { getButton } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    primaryAction: { label: "Add Step", onClick: handleClick },
                });
                const button = getButton("Add Step");
                button.assertIsInTheDocument();
                await user.click(button.innerElement);
                (0, vitest_1.expect)(handleClick).toHaveBeenCalledTimes(1);
            });
            (0, vitest_1.it)("renders primary action button with href", () => {
                const { getLink } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    primaryAction: { label: "Add Step", href: "/test-route" },
                });
                const link = getLink("Add Step");
                link.assertIsInTheDocument();
                link.assertHref("/test-route");
            });
            (0, vitest_1.it)("renders primary action button with external href", () => {
                const { getLink } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    primaryAction: { label: "Add Step", href: "https://example.com", external: true },
                });
                const link = getLink("Add Step");
                link.assertIsInTheDocument();
                link.assertHref("https://example.com");
            });
            (0, vitest_1.it)("calls onClick when provided with href", async () => {
                const user = user_event_1.default.setup();
                const handleClick = vitest_1.vi.fn();
                const { getLink } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    primaryAction: { label: "Add Step", href: "/test-route", onClick: handleClick },
                });
                const link = getLink("Add Step");
                await user.click(link.innerElement);
                (0, vitest_1.expect)(handleClick).toHaveBeenCalled();
            });
        });
        (0, vitest_1.describe)("secondary action", () => {
            (0, vitest_1.it)("renders secondary action button with onClick", async () => {
                const user = user_event_1.default.setup();
                const handleClick = vitest_1.vi.fn();
                const { getButton } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    secondaryAction: { label: "More Info", onClick: handleClick },
                });
                const button = getButton("More Info");
                button.assertIsInTheDocument();
                await user.click(button.innerElement);
                (0, vitest_1.expect)(handleClick).toHaveBeenCalledTimes(1);
            });
            (0, vitest_1.it)("renders secondary action button with href", () => {
                const { getLink } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    secondaryAction: { label: "More Info", href: "/info" },
                });
                const link = getLink("More Info");
                link.assertIsInTheDocument();
                link.assertHref("/info");
            });
        });
        (0, vitest_1.describe)("both actions", () => {
            (0, vitest_1.it)("renders both primary and secondary actions", () => {
                const { getButton } = renderStepCard({
                    heading: "Test Heading",
                    logo: testLogo,
                    primaryAction: { label: "Add Step", onClick: vitest_1.vi.fn(() => { }) },
                    secondaryAction: { label: "More Info", onClick: vitest_1.vi.fn(() => { }) },
                });
                getButton("Add Step").assertIsInTheDocument();
                getButton("More Info").assertIsInTheDocument();
            });
        });
    });
    (0, vitest_1.describe)("disabled state", () => {
        (0, vitest_1.it)("disables primary action button when card is disabled", () => {
            const { getButton } = renderStepCard({
                heading: "Test Heading",
                logo: testLogo,
                disabled: true,
                primaryAction: { label: "Add Step", onClick: vitest_1.vi.fn(() => { }) },
            });
            getButton("Add Step").assertIsDisabled();
        });
        (0, vitest_1.it)("enables primary action button when card is not disabled", () => {
            const { getButton } = renderStepCard({
                heading: "Test Heading",
                logo: testLogo,
                disabled: false,
                primaryAction: { label: "Add Step", onClick: vitest_1.vi.fn(() => { }) },
            });
            getButton("Add Step").assertIsEnabled();
        });
        (0, vitest_1.it)("still displays card content when disabled", () => {
            const { assertHasText } = renderStepCard({
                heading: "Deploy to Kubernetes",
                subHeading: "By Octopus Deploy",
                logo: testLogo,
                disabled: true,
            });
            assertHasText("Deploy to Kubernetes");
            assertHasText("By Octopus Deploy");
        });
    });
    (0, vitest_1.describe)("chip variants", () => {
        (0, vitest_1.it)("renders chip with primary type by default", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                logo: testLogo,
                chipLabel: "Primary",
            });
            assertHasText("Primary");
        });
        (0, vitest_1.it)("renders chip with info type", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                logo: testLogo,
                chipLabel: "Info",
                chipType: "info",
            });
            assertHasText("Info");
        });
        (0, vitest_1.it)("renders chip with success type", () => {
            const { assertHasText } = renderStepCard({
                heading: "Test Heading",
                logo: testLogo,
                chipLabel: "Success",
                chipType: "success",
            });
            assertHasText("Success");
        });
    });
    (0, vitest_1.describe)("complete card", () => {
        (0, vitest_1.it)("renders card with all props", () => {
            const handlePrimaryClick = vitest_1.vi.fn();
            const handleSecondaryClick = vitest_1.vi.fn();
            const { assertHasText, getButton } = renderStepCard({
                heading: "Deploy to Kubernetes",
                subHeading: "By Octopus Deploy",
                logo: testLogo,
                chipLabel: "Recommended",
                chipType: "success",
                description: "Deploy containers to Kubernetes clusters",
                dotpoints: ["Feature 1", "Feature 2", "Feature 3"],
                truncateDotpoints: true,
                primaryAction: { label: "Add Step", onClick: handlePrimaryClick },
                secondaryAction: { label: "More Info", onClick: handleSecondaryClick },
            });
            assertHasText("Deploy to Kubernetes");
            assertHasText("By Octopus Deploy");
            assertHasText("Recommended");
            assertHasText("Deploy containers to Kubernetes clusters");
            assertHasText("Feature 1");
            assertHasText("Feature 2");
            assertHasText("+ 1 more");
            getButton("Add Step").assertIsInTheDocument();
            getButton("More Info").assertIsInTheDocument();
        });
    });
});
function renderStepCard(props) {
    (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(StepCard_1.StepCard, { ...props }) }));
    return {
        assertHasText: (text) => {
            testing_library_1.domQueries.getText(text).assertIsInTheDocument();
        },
        assertMissingText: (text) => {
            testing_library_1.domQueries.queryText(text).assertIsNotInTheDocument();
        },
        getButton: (name) => testing_library_1.domQueries.getButton(name),
        getLink: (name) => testing_library_1.domQueries.getLink(name),
    };
}