@octopusdeploy/design-system-components/dist/src/components/Form/RadioGroup/__testing__/RadioButtonNew.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 RadioButtonNew_1 = require("../RadioButtonNew");
const RadioGroupNew_1 = require("../RadioGroupNew");
(0, vitest_1.describe)("RadioButtonNew", () => {
    (0, vitest_1.describe)("basic functionality", () => {
        (0, vitest_1.it)("renders the radio button", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
            });
            radioButton.assertIsInTheDocument();
        });
        (0, vitest_1.it)("renders the label", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
            });
            radioButton.assertHasLabel("Test Label");
        });
        (0, vitest_1.it)("renders the description", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                description: "This is a test description",
            });
            radioButton.assertHasText("This is a test description");
        });
        (0, vitest_1.it)("has correct input attributes", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
            });
            radioButton.assertHasName("test");
            radioButton.assertHasValue("test-value");
        });
        (0, vitest_1.it)("calls onChange when clicked", async () => {
            const radioButton = renderRadioButtonWithContext({
                value: "test-value",
                label: "Test Label",
                name: "test",
            }, {
                value: "other-value",
                onChange: vitest_1.vi.fn(),
                disabled: false,
                groupId: "test-group",
            });
            await radioButton.click();
            radioButton.assertOnChangeCalledWithValue("test-value");
        });
    });
    (0, vitest_1.describe)("checked state", () => {
        (0, vitest_1.it)("is selected when context value matches", () => {
            const radioButton = renderRadioButtonWithContext({
                value: "test-value",
                label: "Test Label",
                name: "test",
            }, {
                value: "test-value",
                onChange: vitest_1.vi.fn(),
                disabled: false,
                groupId: "test-group",
            });
            radioButton.assertIsSelected();
        });
        (0, vitest_1.it)("is not selected when context value does not match", () => {
            const radioButton = renderRadioButtonWithContext({
                value: "test-value",
                label: "Test Label",
                name: "test",
            }, {
                value: "other-value",
                onChange: vitest_1.vi.fn(),
                disabled: false,
                groupId: "test-group",
            });
            radioButton.assertIsNotSelected();
        });
    });
    (0, vitest_1.describe)("disabled state", () => {
        (0, vitest_1.it)("is disabled when disabled prop is true", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                disabled: true,
            });
            radioButton.assertIsDisabled();
        });
        (0, vitest_1.it)("is disabled when context disabled is true", () => {
            const radioButton = renderRadioButtonWithContext({
                value: "test-value",
                label: "Test Label",
                name: "test",
            }, {
                value: "other-value",
                onChange: vitest_1.vi.fn(),
                disabled: true,
                groupId: "test-group",
            });
            radioButton.assertIsDisabled();
        });
        (0, vitest_1.it)("is disabled when both prop and context disabled are true", () => {
            const radioButton = renderRadioButtonWithContext({
                value: "test-value",
                label: "Test Label",
                name: "test",
                disabled: true,
            }, {
                value: "other-value",
                onChange: vitest_1.vi.fn(),
                disabled: true,
                groupId: "test-group",
            });
            radioButton.assertIsDisabled();
        });
    });
    (0, vitest_1.describe)("default marker", () => {
        (0, vitest_1.it)("shows default marker when hasDefaultMarker is true", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                hasDefaultMarker: true,
            });
            radioButton.assertHasText("(Default)");
        });
        (0, vitest_1.it)("does not show default marker when hasDefaultMarker is false", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                hasDefaultMarker: false,
            });
            radioButton.assertDoesNotHaveText("(Default)");
        });
    });
    (0, vitest_1.describe)("autoFocus", () => {
        (0, vitest_1.it)("focuses input when autoFocus is true", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                autoFocus: true,
            });
            radioButton.assertHasFocus();
        });
        (0, vitest_1.it)("does not focus input when autoFocus is false", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                autoFocus: false,
            });
            radioButton.assertDoesNotHaveFocus();
        });
    });
    (0, vitest_1.describe)("boolean values", () => {
        (0, vitest_1.it)("works with boolean values", () => {
            const radioButton = renderRadioButtonWithContext({
                value: true,
                label: "Yes",
                name: "boolean-test",
            }, {
                value: true,
                onChange: vitest_1.vi.fn(),
                disabled: false,
                groupId: "test-group",
            });
            radioButton.assertIsSelected();
            radioButton.assertHasValue("true");
        });
        (0, vitest_1.it)("calls onChange with boolean value", async () => {
            const radioButton = renderRadioButtonWithContext({
                value: false,
                label: "No",
                name: "boolean-test",
            }, {
                value: true,
                onChange: vitest_1.vi.fn(),
                disabled: false,
                groupId: "test-group",
            });
            await radioButton.click();
            radioButton.assertOnChangeCalledWithValue(false);
        });
    });
    (0, vitest_1.describe)("within RadioGroupNew context", () => {
        (0, vitest_1.it)("works properly within RadioGroupNew", async () => {
            const onChange = vitest_1.vi.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsxs)(RadioGroupNew_1.RadioGroupNew, { label: "Test Group", value: "option1", onChange: onChange, children: [(0, jsx_runtime_1.jsx)(RadioButtonNew_1.RadioButtonNew, { value: "option1", label: "Option 1", name: "test-group" }), (0, jsx_runtime_1.jsx)(RadioButtonNew_1.RadioButtonNew, { value: "option2", label: "Option 2", name: "test-group" })] }) }));
            const option1 = testing_library_1.domQueries.getRadioButton("Option 1");
            const option2 = testing_library_1.domQueries.getRadioButton("Option 2");
            option1.assertIsSelected();
            option2.assertIsNotSelected();
            await option2.click();
            (0, vitest_1.expect)(onChange).toHaveBeenCalledWith("option2");
        });
    });
    (0, vitest_1.describe)("accessibility", () => {
        (0, vitest_1.it)("is accessible", async () => {
            const { container } = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
            });
            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 } = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                disabled: true,
            });
            const results = await (0, vitest_axe_1.axe)(container.container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("is accessible with description", async () => {
            const { container } = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
                description: "This is a description",
            });
            const results = await (0, vitest_axe_1.axe)(container.container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        });
        (0, vitest_1.it)("has proper label association", () => {
            const radioButton = renderRadioButton({
                value: "test-value",
                label: "Test Label",
                name: "test",
            });
            radioButton.assertHasLabel("Test Label");
            radioButton.assertHasProperLabelAssociation();
        });
    });
});
function renderRadioButton(options) {
    const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(RadioButtonNew_1.RadioButtonNew, { ...options }) }));
    return getRadioButtonInteractions(result, options.label);
}
function renderRadioButtonWithContext(options, contextValue) {
    const onChange = contextValue.onChange || vitest_1.vi.fn();
    const fullContextValue = { ...contextValue, onChange };
    const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(RadioGroupNew_1.RadioGroupContext.Provider, { value: fullContextValue, children: (0, jsx_runtime_1.jsx)(RadioButtonNew_1.RadioButtonNew, { ...options }) }) }));
    return getRadioButtonInteractions(result, options.label, onChange);
}
function getRadioButtonInteractions(result, label, onChange) {
    const radioButton = testing_library_1.domQueries.getRadioButton(label);
    const interactions = {
        click: async () => {
            await radioButton.click();
        },
        assertIsInTheDocument: () => {
            radioButton.assertIsInTheDocument();
        },
        assertHasLabel: (expectedLabel) => {
            (0, vitest_1.expect)(react_1.screen.getByLabelText(expectedLabel)).toBeInTheDocument();
        },
        assertHasName: (expectedName) => {
            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
            const input = react_1.screen.getByRole("radio");
            (0, vitest_1.expect)(input).toHaveAttribute("name", expectedName);
        },
        assertHasValue: (expectedValue) => {
            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
            const input = react_1.screen.getByRole("radio");
            (0, vitest_1.expect)(input.value).toBe(expectedValue);
        },
        assertIsSelected: () => {
            radioButton.assertIsSelected();
        },
        assertIsNotSelected: () => {
            radioButton.assertIsNotSelected();
        },
        assertIsDisabled: () => {
            radioButton.assertIsDisabled();
        },
        assertIsEnabled: () => {
            radioButton.assertIsEnabled();
        },
        assertHasFocus: () => {
            radioButton.assertHasFocus();
        },
        assertDoesNotHaveFocus: () => {
            const input = react_1.screen.getByRole("radio");
            (0, vitest_1.expect)(input).not.toHaveFocus();
        },
        assertOnChangeCalledWithValue: (expectedValue) => {
            (0, vitest_1.expect)(onChange).toHaveBeenCalledWith(expectedValue);
        },
        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();
        },
        assertHasProperLabelAssociation: () => {
            const input = react_1.screen.getByRole("radio");
            const labelText = react_1.screen.getByText(label);
            (0, vitest_1.expect)(labelText).toHaveAttribute("for", input.id);
            (0, vitest_1.expect)(input.id).toMatch(/^radio-.*$/);
        },
        container: result,
    };
    return interactions;
}