@octopusdeploy/design-system-components
Version:
The design systems component library.
90 lines (89 loc) • 3.96 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 BooleanRadioButton_1 = require("../BooleanRadioButton");
const BooleanRadioButtonGroup_1 = require("../BooleanRadioButtonGroup");
(0, vitest_1.describe)("BooleanRadioButtonGroup", () => {
(0, vitest_1.it)("renders the group", () => {
const radioButtonGroup = renderBooleanRadioButtonGroup({
options: [
{ label: "Yes", value: true },
{ label: "No", value: false },
],
value: true,
});
radioButtonGroup.assertIsInTheDocument();
});
(0, vitest_1.it)("renders the options", () => {
const radioButtonGroup = renderBooleanRadioButtonGroup({
options: [
{ label: "Yes", value: true },
{ label: "No", value: false },
],
value: true,
});
radioButtonGroup.assertHasRadioButtons(["Yes", "No"]);
});
(0, vitest_1.it)("selects the radio button with a matching value", () => {
const radioButtonGroup = renderBooleanRadioButtonGroup({
options: [
{ label: "Yes", value: true },
{ label: "No", value: false },
],
value: false,
});
radioButtonGroup.assertRadioButtonSelected("No");
});
(0, vitest_1.it)("calls onChange with true when a true radio button is clicked", async () => {
const radioButtonGroup = renderBooleanRadioButtonGroup({
options: [
{ label: "Yes", value: true },
{ label: "No", value: false },
],
value: false,
});
await radioButtonGroup.clickRadioButton("Yes");
radioButtonGroup.assertOnChangeCalledWithValue(true);
});
(0, vitest_1.it)("calls onChange with false when a false radio button is clicked", async () => {
const radioButtonGroup = renderBooleanRadioButtonGroup({
options: [
{ label: "Yes", value: true },
{ label: "No", value: false },
],
value: true,
});
await radioButtonGroup.clickRadioButton("No");
radioButtonGroup.assertOnChangeCalledWithValue(false);
});
});
const radioButtonGroupName = "test-radio-group";
function renderBooleanRadioButtonGroup({ value, options }) {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(BooleanRadioButtonGroup_1.BooleanRadioButtonGroup, { title: "Radio button group", accessibleName: radioButtonGroupName, value: value, onChange: onChange, children: options.map((o) => ((0, jsx_runtime_1.jsx)(BooleanRadioButton_1.BooleanRadioButton, { 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();
},
assertOnChangeCalledWithValue: (radioButtonValue) => {
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(radioButtonValue);
},
};
return interactions;
}