@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
58 lines • 4.05 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const BlokButtonSelect_1 = require("./BlokButtonSelect");
describe("BlokButtonSelect Component", () => {
test("renders without crashing", () => {
const options = ["Option 1", "Option 2", "Option 3"];
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { }, searchMessage: "Search", clearMessage: "Clear" }));
expect(react_1.screen.getByTestId("blok-select")).toBeInTheDocument();
});
test("displays options correctly", async () => {
const user = user_event_1.default.setup();
const options = ["Option 1", "Option 2", "Option 3"];
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { }, searchMessage: "Search", clearMessage: "Clear" }));
await user.click(react_1.screen.getByRole("button"));
options.forEach((option) => {
expect(react_1.screen.getByText(option)).toBeInTheDocument();
});
});
test("calls onChange when an option is selected", async () => {
const user = user_event_1.default.setup();
const options = ["Option 1", "Option 2", "Option 3"];
const handleChange = jest.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: handleChange, searchMessage: "Search", clearMessage: "Clear" }));
await user.click(react_1.screen.getByRole("button"));
await user.click(react_1.screen.getByRole("menuitem", { name: options[1] }));
expect(handleChange).toHaveBeenCalledWith(options[1]);
});
test("displays the selected option", () => {
const options = ["Option 1", "Option 2", "Option 3"];
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, value: options[1], onChange: () => { }, searchMessage: "Search", clearMessage: "Clear" }));
expect((0, react_1.within)(react_1.screen.getByRole("button")).getByText(new RegExp(options[1], "i"))).toBeInTheDocument();
});
test("renders with no options", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: [], onChange: () => { }, searchMessage: "Search", clearMessage: "Clear" }));
expect(react_1.screen.queryByRole("button")).not.toBeInTheDocument();
});
test("displays placeholder when no value is selected", () => {
const options = ["Option 1", "Option 2", "Option 3"];
const placeholder = "Select an option";
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, placeholder: placeholder, onChange: () => { }, searchMessage: "Search", clearMessage: "Clear" }));
expect(react_1.screen.getByText(placeholder)).toBeInTheDocument();
});
test("disables specific options", async () => {
const user = user_event_1.default.setup();
const options = ["Option 1", "Option 2", "Option 3"];
const itemsToDisable = ["Option 2"];
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { }, itemsToDisable: itemsToDisable, searchMessage: "Search", clearMessage: "Clear" }));
await user.click(react_1.screen.getByRole("button"));
expect(react_1.screen.getByRole("menuitem", { name: "Option 2" })).toHaveClass("Mui-disabled");
});
});
//# sourceMappingURL=BlokButtonSelect.spec.js.map