@octopusdeploy/design-system-components/dist/src/components/Form/Checkbox/__testing__/CheckboxGroup.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 TestDesignSystemProvider_1 = require("../../../TestDesignSystemProvider");
const Checkbox_1 = require("../Checkbox");
const CheckboxGroup_1 = require("../CheckboxGroup");
(0, vitest_1.describe)("CheckboxGroup", () => {
    (0, vitest_1.describe)("basic functionality", () => {
        (0, vitest_1.it)("renders the group", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            checkboxGroup.assertIsInTheDocument();
        });
        (0, vitest_1.it)("renders the label", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            checkboxGroup.assertHasText("Test Label");
        });
        (0, vitest_1.it)("renders checkbox options", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            checkboxGroup.assertHasCheckboxes(["Option 1", "Option 2"]);
        });
    });
    (0, vitest_1.describe)("selection and interaction", () => {
        (0, vitest_1.it)("shows the correct selected values", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option2"],
            });
            checkboxGroup.assertCheckboxSelected("Option 2");
            checkboxGroup.assertCheckboxNotSelected("Option 1");
        });
        (0, vitest_1.it)("shows multiple selected values", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1", "option2"],
            });
            checkboxGroup.assertCheckboxSelected("Option 1");
            checkboxGroup.assertCheckboxSelected("Option 2");
        });
        (0, vitest_1.it)("calls onChange when checkbox is clicked", async () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            await checkboxGroup.clickCheckbox("Option 2");
            checkboxGroup.assertOnChangeCalledWithValue(["option1", "option2"]);
        });
        (0, vitest_1.it)("calls onChange when checkbox is unchecked", async () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1", "option2"],
            });
            await checkboxGroup.clickCheckbox("Option 1");
            checkboxGroup.assertOnChangeCalledWithValue(["option2"]);
        });
        (0, vitest_1.it)("works with boolean values", async () => {
            const checkboxGroup = renderCheckboxGroupWithBooleans({
                label: "Boolean Test",
                value: [true],
            });
            await checkboxGroup.clickCheckbox("No");
            checkboxGroup.assertOnChangeCalledWithValue([true, false]);
        });
        (0, vitest_1.it)("shows correct selected boolean values", () => {
            const checkboxGroup = renderCheckboxGroupWithBooleans({
                label: "Boolean Test",
                value: [false],
            });
            checkboxGroup.assertCheckboxSelected("No");
            checkboxGroup.assertCheckboxNotSelected("Yes");
        });
        (0, vitest_1.it)("displays boolean values correctly", () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Boolean Test", value: [true], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: true, label: "Yes", name: "boolean-test" }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: false, label: "No", name: "boolean-test" })] }) }));
            const yesInput = react_1.screen.getByLabelText("Yes");
            const noInput = react_1.screen.getByLabelText("No");
            (0, vitest_1.expect)(yesInput).toBeChecked();
            (0, vitest_1.expect)(noInput).not.toBeChecked();
        });
    });
    (0, vitest_1.describe)("required and optional markers", () => {
        (0, vitest_1.it)("shows optional marker when hasOptionalMarker is true", () => {
            renderCheckboxGroup({
                label: "Test Label",
                hasOptionalMarker: true,
                value: ["option1"],
            });
            // The optional marker is part of the legend text content
            const legendWithOptional = react_1.screen.getByText((content, element) => {
                return element?.textContent === "Test Label (optional)";
            });
            (0, vitest_1.expect)(legendWithOptional).toBeInTheDocument();
        });
        (0, vitest_1.it)("shows required marker when hasRequiredMarker is true", () => {
            renderCheckboxGroup({
                label: "Test Label",
                hasRequiredMarker: true,
                value: ["option1"],
            });
            // The required marker is part of the legend text content
            const legendWithRequired = react_1.screen.getByText((content, element) => {
                return element?.textContent === "Test Label (required)";
            });
            (0, vitest_1.expect)(legendWithRequired).toBeInTheDocument();
        });
    });
    (0, vitest_1.describe)("error handling", () => {
        (0, vitest_1.it)("displays error message", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                validationMessage: "This field is required",
                value: ["option1"],
            });
            checkboxGroup.assertHasError("This field is required");
        });
        (0, vitest_1.it)("hides error message after user interaction", async () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                validationMessage: "This field is required",
                value: ["option1"],
            });
            checkboxGroup.assertHasError("This field is required");
            await checkboxGroup.clickCheckbox("Option 2");
            checkboxGroup.assertHasNoError();
        });
    });
    (0, vitest_1.describe)("disabled state", () => {
        (0, vitest_1.it)("disables the entire group when disabled is true", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                disabled: true,
                value: ["option1"],
            });
            checkboxGroup.assertIsDisabled();
        });
        (0, vitest_1.it)("prevents onChange when disabled", async () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                disabled: true,
                value: ["option1"],
            });
            await checkboxGroup.clickCheckbox("Option 2");
            checkboxGroup.assertOnChangeNotCalled();
        });
    });
    (0, vitest_1.describe)("hidden content", () => {
        (0, vitest_1.it)("hides label when hideLabel is true", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                hideLabel: true,
                value: ["option1"],
            });
            checkboxGroup.assertLabelIsHidden("Test Label");
        });
        (0, vitest_1.it)("hides description when hideDescription is true", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                description: "Test description",
                hideDescription: true,
                value: ["option1"],
            });
            checkboxGroup.assertDescriptionIsHidden("Test description");
        });
    });
    (0, vitest_1.describe)("default markers", () => {
        (0, vitest_1.it)("shows default marker on checkbox when hasDefaultMarker is true", () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Test Label", value: ["option1"], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test", hasDefaultMarker: true }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test" })] }) }));
            (0, vitest_1.expect)(react_1.screen.getByText("(Default)")).toBeInTheDocument();
        });
        (0, vitest_1.it)("does not show default marker when hasDefaultMarker is false", () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Test Label", value: ["option1"], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test", hasDefaultMarker: false }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test" })] }) }));
            (0, vitest_1.expect)(react_1.screen.queryByText("(Default)")).not.toBeInTheDocument();
        });
    });
    (0, vitest_1.describe)("indeterminate state", () => {
        (0, vitest_1.it)("shows indeterminate state when isIndeterminate is true", () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Test Label", value: [], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test", isIndeterminate: true }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test" })] }) }));
            const option1 = testing_library_1.domQueries.getCheckbox("Option 1");
            const input = react_1.screen.getByRole("checkbox", { name: "Option 1" });
            // eslint-disable-next-line jest-dom/prefer-checked
            (0, vitest_1.expect)(input).toHaveAttribute("aria-checked", "mixed");
        });
    });
    (0, vitest_1.describe)("accessibility", () => {
        (0, vitest_1.it)("is accessible", async () => {
            const { container } = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            const results = await (0, vitest_axe_1.axe)(container.container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("is accessible with error", async () => {
            const { container } = renderCheckboxGroup({
                label: "Test Label",
                validationMessage: "This field is required",
                value: ["option1"],
            });
            const results = await (0, vitest_axe_1.axe)(container.container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("is accessible when disabled", async () => {
            const { container } = renderCheckboxGroup({
                label: "Test Label",
                disabled: true,
                value: ["option1"],
            });
            const results = await (0, vitest_axe_1.axe)(container.container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("is accessible with descriptions on checkboxes", async () => {
            const onChange = vitest_1.vi.fn();
            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Test Label", value: ["option1"], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test", description: "First option description" }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test", description: "Second option description" })] }) }));
            const results = await (0, vitest_axe_1.axe)(container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("has proper group role", () => {
            const checkboxGroup = renderCheckboxGroup({
                label: "Test Label",
                value: ["option1"],
            });
            checkboxGroup.assertHasGroupRole();
        });
        (0, vitest_1.it)("has proper label associations for individual checkboxes", () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { label: "Test Label", value: ["option1"], onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test" }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test" })] }) }));
            const option1Input = react_1.screen.getByLabelText("Option 1");
            const option2Input = react_1.screen.getByLabelText("Option 2");
            (0, vitest_1.expect)(option1Input).toBeInTheDocument();
            (0, vitest_1.expect)(option2Input).toBeInTheDocument();
        });
    });
});
function renderCheckboxGroup(options) {
    const onChange = vitest_1.vi.fn();
    const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { ...options, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option1", label: "Option 1", name: "test" }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: "option2", label: "Option 2", name: "test" })] }) }));
    return getCheckboxGroupInteractions(result, options.label || "", onChange);
}
function renderCheckboxGroupWithBooleans(options) {
    const onChange = vitest_1.vi.fn();
    const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(CheckboxGroup_1.CheckboxGroup, { ...options, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: true, label: "Yes", name: "boolean-test" }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: false, label: "No", name: "boolean-test" })] }) }));
    return getCheckboxGroupInteractions(result, options.label || "", onChange);
}
function getCheckboxGroupInteractions(result, label, onChange) {
    const interactions = {
        clickCheckbox: async (checkboxLabel) => {
            const checkbox = testing_library_1.domQueries.getCheckbox(checkboxLabel);
            await checkbox.click();
        },
        assertIsInTheDocument: () => {
            // For multiple checkboxes, check that the group (fieldset) is in the document
            // For single checkboxes, check that the checkbox is in the document
            const groupElement = react_1.screen.queryByRole("group");
            if (groupElement) {
                (0, vitest_1.expect)(groupElement).toBeInTheDocument();
            }
            else {
                // For single checkboxes, check that the checkbox itself is in the document
                (0, vitest_1.expect)(react_1.screen.getByRole("checkbox")).toBeInTheDocument();
            }
        },
        assertHasText: (text) => {
            (0, vitest_1.expect)(react_1.screen.getByText(text)).toBeInTheDocument();
        },
        assertDoesNotHaveText: (text) => {
            (0, vitest_1.expect)(react_1.screen.queryByText(text)).not.toBeInTheDocument();
        },
        assertHasCheckboxes: (checkboxLabels) => {
            checkboxLabels.forEach((labelText) => {
                (0, vitest_1.expect)(react_1.screen.getByLabelText(labelText)).toBeInTheDocument();
            });
        },
        assertCheckboxSelected: (checkboxLabel) => {
            const checkbox = testing_library_1.domQueries.getCheckbox(checkboxLabel);
            (0, vitest_1.expect)(checkbox.isChecked).toBe(true);
        },
        assertCheckboxNotSelected: (checkboxLabel) => {
            const checkbox = testing_library_1.domQueries.getCheckbox(checkboxLabel);
            (0, vitest_1.expect)(checkbox.isChecked).toBe(false);
        },
        assertOnChangeCalledWithValue: (value) => {
            (0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
        },
        assertOnChangeNotCalled: () => {
            (0, vitest_1.expect)(onChange).not.toHaveBeenCalled();
        },
        assertHasError: (errorText) => {
            (0, vitest_1.expect)(react_1.screen.getByText(errorText)).toBeInTheDocument();
        },
        assertHasNoError: () => {
            (0, vitest_1.expect)(react_1.screen.queryByLabelText("Error")).not.toBeInTheDocument();
        },
        assertIsDisabled: () => {
            const groupElement = react_1.screen.queryByRole("group");
            if (groupElement) {
                (0, vitest_1.expect)(groupElement).toBeDisabled();
            }
            else {
                const checkbox = react_1.screen.getByRole("checkbox");
                (0, vitest_1.expect)(checkbox).toBeDisabled();
            }
        },
        assertLabelIsHidden: (labelText) => {
            const legend = react_1.screen.getByText(labelText);
            (0, vitest_1.expect)(legend).toHaveStyle({ clip: vitest_1.expect.stringMatching(/rect\(0.*0.*0.*0\)/) });
        },
        assertDescriptionIsHidden: (descriptionText) => {
            const description = react_1.screen.getByText(descriptionText);
            (0, vitest_1.expect)(description).toHaveStyle({ clip: vitest_1.expect.stringMatching(/rect\(0.*0.*0.*0\)/) });
        },
        assertHasGroupRole: () => {
            (0, vitest_1.expect)(react_1.screen.getByRole("group")).toBeInTheDocument();
        },
        container: result,
    };
    return interactions;
}