@octopusdeploy/design-system-components
Version:
The design systems component library.
119 lines (118 loc) • 4.47 kB
JavaScript
;
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 Checkbox_1 = require("../Checkbox");
(0, vitest_1.describe)("Checkbox", () => {
(0, vitest_1.it)("should be checked when the value is true", () => {
const checkbox = renderCheckbox({
value: true,
});
checkbox.shouldBeChecked();
});
(0, vitest_1.it)("should not be checked when the value is false", () => {
const checkbox = renderCheckbox({
value: false,
});
checkbox.shouldNotBeChecked();
});
(0, vitest_1.it)("should show the label", () => {
const checkbox = renderCheckbox({
value: false,
label: "The label",
});
checkbox.shouldHaveText("The label");
});
(0, vitest_1.it)("should show the title", () => {
const checkbox = renderCheckbox({
value: false,
title: "The title",
});
checkbox.shouldHaveText("The title");
});
(0, vitest_1.it)("should show the error", () => {
const checkbox = renderCheckbox({
value: false,
error: "The error",
});
checkbox.shouldHaveText("The error");
});
(0, vitest_1.it)("should show the warning", () => {
const checkbox = renderCheckbox({
value: false,
warning: "The warning",
});
checkbox.shouldHaveText("The warning");
});
(0, vitest_1.it)("should show the note", () => {
const checkbox = renderCheckbox({
value: false,
note: "The note",
});
checkbox.shouldHaveText("The note");
});
(0, vitest_1.it)("should be focused when autoFocus is on", () => {
const checkbox = renderCheckbox({
value: false,
autoFocus: true,
});
checkbox.shouldHaveFocus();
});
(0, vitest_1.it)("should be enabled when disabled is false", () => {
const checkbox = renderCheckbox({
value: false,
disabled: false,
});
checkbox.shouldBeEnabled();
});
(0, vitest_1.it)("should be disabled when disabled is true", () => {
const checkbox = renderCheckbox({
value: false,
disabled: true,
});
checkbox.shouldBeDisabled();
});
(0, vitest_1.it)("should run onChange callback with the new value when toggled", async () => {
const checkbox = renderCheckbox({
value: false,
});
await checkbox.toggle();
checkbox.shouldHaveCalledOnChangeWith(true);
});
});
const checkboxName = "checkbox";
function renderCheckbox({ value, title, autoFocus, note, disabled, label, error, warning }) {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { value: value, onChange: onChange, title: title, autoFocus: autoFocus, note: note, disabled: disabled, label: label, error: error, warning: warning, accessibleName: checkboxName }));
return getActionButtonInteractions(onChange);
}
function getActionButtonInteractions(onChange) {
return {
toggle: async () => {
await testing_library_1.domQueries.getCheckbox(checkboxName).toggle();
},
shouldHaveCalledOnChangeWith: (value) => {
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
},
shouldBeChecked: () => {
(0, vitest_1.expect)(testing_library_1.domQueries.getCheckbox(checkboxName).isChecked).toBe(true);
},
shouldNotBeChecked: () => {
(0, vitest_1.expect)(testing_library_1.domQueries.getCheckbox(checkboxName).isChecked).toBe(false);
},
shouldHaveText: (text) => {
(0, vitest_1.expect)(react_1.screen.getByText(text)).toBeInTheDocument();
},
shouldHaveFocus: () => {
testing_library_1.domQueries.getCheckbox(checkboxName).assertHasFocus();
},
shouldBeEnabled: () => {
testing_library_1.domQueries.getCheckbox(checkboxName).assertIsEnabled();
},
shouldBeDisabled: () => {
testing_library_1.domQueries.getCheckbox(checkboxName).assertIsDisabled();
},
};
}