@octopusdeploy/design-system-components
Version:
The design systems component library.
133 lines (132 loc) • 5.62 kB
JavaScript
"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 RadioButton_1 = require("../RadioButton");
const RadioButtonGroup_1 = require("../RadioButtonGroup");
(0, vitest_1.describe)("RadioButtonGroup", () => {
(0, vitest_1.it)("renders the group", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
});
radioButtonGroup.assertIsInTheDocument();
});
(0, vitest_1.it)("renders the options", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
});
radioButtonGroup.assertHasRadioButtons(["Option 1", "Option 2"]);
});
(0, vitest_1.it)("renders the label", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
label: "The label",
});
radioButtonGroup.assertHasText("The label");
});
(0, vitest_1.it)("renders the error", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
error: "The error",
});
radioButtonGroup.assertHasText("The error");
});
(0, vitest_1.it)("hides the error when the value is changed", async () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
error: "The error",
});
await radioButtonGroup.clickRadioButton("Option 2");
radioButtonGroup.assertDoesNotHaveText("The error");
});
(0, vitest_1.it)("selects the radio button with a matching value", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "two",
});
radioButtonGroup.assertRadioButtonSelected("Option 2");
});
(0, vitest_1.it)("focuses the selected radio button when autoFocus is set", () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
autoFocus: true,
});
radioButtonGroup.assertRadioButtonFocused("Option 1");
});
(0, vitest_1.it)("calls onChange when a radio button is clicked", async () => {
const radioButtonGroup = renderRadioButtonGroup({
options: [
{ label: "Option 1", value: "one" },
{ label: "Option 2", value: "two" },
],
value: "one",
});
await radioButtonGroup.clickRadioButton("Option 2");
radioButtonGroup.assertOnChangeCalledWithValue("two");
});
});
const radioButtonGroupName = "test-radio-group";
function renderRadioButtonGroup({ autoFocus, label, error, value, options }) {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(RadioButtonGroup_1.RadioButtonGroup, { title: label ?? "Radio button group", autoFocus: autoFocus, accessibleName: radioButtonGroupName, error: error, value: value, onChange: onChange, children: options.map((o) => ((0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { value: o.value, label: o.label }, o.value))) }));
return getRadioButtonGroupInteractions(onChange);
}
function getRadioButtonGroupInteractions(onChange) {
const radioButtonGroup = testing_library_1.domQueries.getRadioButtonGroup(radioButtonGroupName);
const interactions = {
clickRadioButton: async (radioButtonLabel) => {
await radioButtonGroup.getOption(radioButtonLabel).click();
},
assertIsInTheDocument: () => {
radioButtonGroup.assertIsInTheDocument();
},
assertHasRadioButtons: (radioButtonLabels) => {
radioButtonLabels.forEach((label) => radioButtonGroup.assertHasOption(label));
},
assertRadioButtonSelected: (radioButtonLabel) => {
radioButtonGroup.getOption(radioButtonLabel).assertIsSelected();
},
assertRadioButtonFocused: (radioButtonLabel) => {
radioButtonGroup.getOption(radioButtonLabel).assertHasFocus();
},
assertOnChangeCalledWithValue: (radioButtonValue) => {
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(radioButtonValue);
},
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();
},
};
return interactions;
}