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

The design systems component library.

"use strict";
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 vitest_axe_1 = require("vitest-axe");
const Badge_1 = require("../../Badge");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const FormSection_1 = require("../FormSection");
(0, vitest_1.describe)("FormSection", () => {
    (0, vitest_1.it)("renders the title", () => {
        const formSection = renderStaticFormSection({ title: "Project settings" });
        formSection.assertTitleIsRendered("Project settings");
    });
    (0, vitest_1.it)("renders the children in a static section", () => {
        const formSection = renderStaticFormSection({ title: "Project settings", children: "Field content" });
        formSection.assertContentIsRendered("Field content");
    });
    (0, vitest_1.it)("renders the optional marker label", () => {
        const formSection = renderStaticFormSection({ title: "Project settings", marker: "optional" });
        formSection.assertMarkerIsRendered("(optional)");
    });
    (0, vitest_1.it)("renders the required marker label", () => {
        const formSection = renderStaticFormSection({ title: "Project settings", marker: "required" });
        formSection.assertMarkerIsRendered("(required)");
    });
    (0, vitest_1.it)("renders the pre-filled marker label", () => {
        const formSection = renderStaticFormSection({ title: "Project settings", marker: "prefilled" });
        formSection.assertMarkerIsRendered("(pre-filled)");
    });
    (0, vitest_1.it)("renders the badge when one is supplied", () => {
        const badge = (0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: "info", size: "small", label: "Beta" });
        const formSection = renderStaticFormSection({ title: "Project settings", badge });
        formSection.assertBadgeContentIsRendered("Beta");
    });
    (0, vitest_1.it)("renders the children when interactive and open", () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: true, children: "Field content" });
        formSection.assertContentIsRendered("Field content");
    });
    (0, vitest_1.it)("keeps children mounted but not visible when interactive and closed", () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: false, children: "Field content" });
        formSection.assertContentIsRendered("Field content");
        formSection.assertContentIsNotVisible("Field content");
    });
    (0, vitest_1.it)("marks the toggle as collapsed when interactive and closed", () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: false });
        formSection.assertToggleIsCollapsed();
    });
    (0, vitest_1.it)("marks the toggle as expanded when interactive and open", () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: true });
        formSection.assertToggleIsExpanded();
    });
    (0, vitest_1.it)("calls onToggle with the inverted value when the legend is clicked while closed", async () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: false });
        await formSection.toggleLegend();
        formSection.assertOnToggleWasCalledWith(true);
    });
    (0, vitest_1.it)("calls onToggle with the inverted value when the legend is clicked while open", async () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: true });
        await formSection.toggleLegend();
        formSection.assertOnToggleWasCalledWith(false);
    });
    (0, vitest_1.it)("is accessible when static", async () => {
        const formSection = renderStaticFormSection({ title: "Project settings" });
        await formSection.assertHasNoAccessibilityViolations();
    });
    (0, vitest_1.it)("is accessible when interactive and open", async () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: true });
        await formSection.assertHasNoAccessibilityViolations();
    });
    (0, vitest_1.it)("is accessible when interactive and closed", async () => {
        const formSection = renderInteractiveFormSection({ title: "Project settings", isOpen: false });
        await formSection.assertHasNoAccessibilityViolations();
    });
});
function renderStaticFormSection({ title, marker, badge, children = "Section content" }) {
    const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(FormSection_1.FormSection, { title: title, marker: marker, badge: badge, children: children }) }));
    return createFormSectionInteractions(container);
}
function renderInteractiveFormSection({ title, marker, badge, isOpen, children = "Section content" }) {
    const onToggle = vitest_1.vi.fn();
    const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(FormSection_1.FormSection, { isInteractive: true, title: title, marker: marker, badge: badge, isOpen: isOpen, onToggle: onToggle, children: children }) }));
    return {
        ...createFormSectionInteractions(container),
        async toggleLegend() {
            await testing_library_1.domQueries.getButton(title).click();
        },
        assertOnToggleWasCalledWith(value) {
            (0, vitest_1.expect)(onToggle).toHaveBeenCalledWith(value);
        },
        assertToggleIsExpanded() {
            testing_library_1.domQueries.getButton(title).assertIsExpanded();
        },
        assertToggleIsCollapsed() {
            testing_library_1.domQueries.getButton(title).assertIsCollapsed();
        },
    };
}
function createFormSectionInteractions(container) {
    return {
        assertTitleIsRendered(title) {
            testing_library_1.domQueries.getText(title).assertIsInTheDocument();
        },
        assertContentIsRendered(content) {
            testing_library_1.domQueries.getText(content).assertIsInTheDocument();
        },
        assertContentIsNotVisible(content) {
            (0, vitest_1.expect)(testing_library_1.domQueries.getText(content).innerElement).not.toBeVisible();
        },
        assertMarkerIsRendered(markerLabel) {
            testing_library_1.domQueries.getText(markerLabel).assertIsInTheDocument();
        },
        assertBadgeContentIsRendered(content) {
            testing_library_1.domQueries.getText(content).assertIsInTheDocument();
        },
        async assertHasNoAccessibilityViolations() {
            const results = await (0, vitest_axe_1.axe)(container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        },
    };
}