@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
172 lines • 8.87 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 BlokSearchBox_1 = require("./BlokSearchBox");
const mockedOnSearch = jest.fn();
const mockedOnClearSearch = jest.fn();
const mockedOnEnterPress = jest.fn();
const onPasteMock = jest.fn().mockImplementation((pastedText) => {
return pastedText;
});
describe("BlokSearchBox", () => {
const setupTest = (maxNumberOfCharacters = 10, maxNumberOfWords = 3, showCounter = false, ignoreLimitationsRegex) => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: mockedOnSearch, onClearSearch: mockedOnClearSearch, onEnterPress: mockedOnEnterPress, placeholder: "Search here", value: "", maxNumberOfCharacters: maxNumberOfCharacters, maxNumberOfWords: maxNumberOfWords, searchMessage: "Search", clearMessage: "Clear", handlePastedText: onPasteMock, showCounter: showCounter, ignoreLimitationsRegex: ignoreLimitationsRegex }));
};
test("should render with the place holder 'Search here'", () => {
setupTest();
expect(react_1.screen.getByPlaceholderText("Search here")).toBeInTheDocument();
});
test("should render a search button", () => {
setupTest();
expect(react_1.screen.getByTestId("searchbox-search")).toBeInTheDocument();
});
test("should not render a clear button when there is no value", () => {
setupTest();
expect(react_1.screen.queryByTestId("clear-select-search")).toHaveStyle({
visibility: "hidden",
});
});
test("should render a clear button when there is a value", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "some value");
expect(react_1.screen.getByTestId("clear-select-search")).toBeInTheDocument();
});
test("should call the onSearch callback when typing into the searchbox", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "some value");
expect(mockedOnSearch).toHaveBeenCalledWith("some value");
});
test("should call the onEnterPress callback when pressing enter into the searchbox", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "some value");
await user.type(react_1.screen.getByTestId("searchbox"), "{enter}");
expect(mockedOnEnterPress).toHaveBeenCalled();
});
test("should call the onClearSearch callback when pressing esc into the searchbox", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "some value");
await user.type(react_1.screen.getByTestId("searchbox"), "{escape}");
expect(mockedOnClearSearch).toHaveBeenCalled();
});
test("should respect the maxNumberOfCharacters prop", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "this longwords");
expect(mockedOnSearch).toHaveBeenLastCalledWith("this longw");
});
test("should respect the maxNumberOfWords prop", async () => {
const user = user_event_1.default.setup();
setupTest();
// Act
await user.type(react_1.screen.getByTestId("searchbox"), "this is a test string");
expect(mockedOnSearch).toHaveBeenLastCalledWith("this is a ");
});
test("should handle the paste text with the handlePastedText function", async () => {
const user = user_event_1.default.setup();
setupTest(300, 30);
await user.click(react_1.screen.getByTestId("searchbox"));
// Act
await user.paste(`ids=19938251
19938256
19938261
19938263
19938268`);
await (0, react_1.waitFor)(() => {
expect(onPasteMock).toHaveBeenCalledWith(`ids=19938251
19938256
19938261
19938263
19938268`, "");
});
});
test("should allow newlines when pressing shift+enter with allowMultipleLines enabled", async () => {
const user = user_event_1.default.setup();
// Render with allowMultipleLines enabled
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: mockedOnSearch, onClearSearch: mockedOnClearSearch, onEnterPress: mockedOnEnterPress, placeholder: "Search here", value: "", maxNumberOfCharacters: 300, maxNumberOfWords: 30, searchMessage: "Search", clearMessage: "Clear", allowMultipleLines: true }));
const searchbox = react_1.screen.getByTestId("searchbox");
// Type some text
await user.type(searchbox, "first line");
// Press shift+enter
await user.keyboard("{Shift>}{Enter}{/Shift}");
// Type more text after the newline
await user.type(searchbox, "second line");
// Verify the search value contains both lines
expect(searchbox).toHaveValue("first line\nsecond line");
// Verify onEnterPress wasn't called
expect(mockedOnEnterPress).not.toHaveBeenCalled();
});
test("should show a counter when maxNumberOfCharacters is set and showCounter is true", async () => {
const user = user_event_1.default.setup();
setupTest(10, 10, true);
// Act
user.type(react_1.screen.getByTestId("searchbox"), "s");
await (0, react_1.waitFor)(() => {
expect(react_1.screen.getByText("1 / 10")).toBeInTheDocument();
});
});
test("should bypass character limit when input matches ignoreLimitationsRegex", async () => {
const maxChars = 10;
const user = user_event_1.default.setup();
setupTest(maxChars, 10, true, /\bid=([^&]+)/i);
const searchbox = react_1.screen.getByTestId("searchbox");
// Test 1: Regular text exceeding limit should be truncated
await user.clear(searchbox);
await user.type(searchbox, "This text is longer than 10 characters");
// Wait for the value to be truncated
await (0, react_1.waitFor)(() => {
expect(react_1.screen.getByDisplayValue(/^.{1,10}$/)).toBeInTheDocument();
});
// Test 2: Text with id= pattern should bypass the character limit
await user.clear(searchbox);
await user.type(searchbox, "id=12345678901234567890");
await (0, react_1.waitFor)(() => {
const inputElement = react_1.screen.getByDisplayValue("id=12345678901234567890");
expect(inputElement).toBeInTheDocument();
expect(inputElement.value.length).toBeGreaterThan(maxChars);
});
// Test 3: Text with ID= (uppercase) should also bypass the limit (case insensitive regex)
await user.clear(searchbox);
await user.type(searchbox, "ID=12345678901234567890");
await (0, react_1.waitFor)(() => {
const inputElement = react_1.screen.getByDisplayValue("ID=12345678901234567890");
expect(inputElement).toBeInTheDocument();
expect(inputElement.value.length).toBeGreaterThan(maxChars);
});
// Test 4: Pasting Text with ID= (uppercase) should also bypass the limit (case insensitive regex)
await user.clear(searchbox);
await user.paste("ID=12345678901234567890");
expect(mockedOnSearch).toHaveBeenCalledWith("ID=12345678901234567890");
});
test("should apply transformTypedText function to input value", async () => {
const user = user_event_1.default.setup();
const transformTypedTextMock = jest
.fn()
.mockImplementation((text) => {
return text.toUpperCase();
});
// Render with transformTypedText prop
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: mockedOnSearch, value: "", searchMessage: "Search", clearMessage: "Clear", transformTypedText: transformTypedTextMock }));
const searchbox = react_1.screen.getByTestId("searchbox");
// Type some text
await user.type(searchbox, "hel");
// Verify onSearch was called with the transformed value
expect(mockedOnSearch).toHaveBeenCalledWith("HEL");
// Verify the displayed value is transformed
expect(searchbox).toHaveValue("HEL");
});
});
//# sourceMappingURL=BlokSearchBox.spec.js.map