@octopusdeploy/design-system-components
Version:
The design systems component library.
74 lines (73 loc) • 3.52 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 vitest_axe_1 = require("vitest-axe");
const SearchInput_1 = require("../SearchInput");
(0, vitest_1.describe)("SearchInput", () => {
(0, vitest_1.it)("renders with placeholder", () => {
const { searchInput } = renderSearchInput({ value: "", placeholder: "placeholder" });
searchInput.assertHasPlaceholder("placeholder");
});
(0, vitest_1.it)("calls onChange on keyboard input", async () => {
const { searchInput } = renderSearchInput({ value: "" });
await searchInput.replaceText("text");
searchInput.assertSearchInputChanged("text");
});
(0, vitest_1.it)("clears input on clear button pressed", async () => {
const { searchInput } = renderSearchInput({ value: "value" });
await searchInput.clear();
searchInput.assertSearchInputChanged("");
});
(0, vitest_1.it)("does not show the clear button when input is empty", () => {
const { searchInput } = renderSearchInput({ value: "" });
searchInput.assertClearButtonIsNotInTheDocument();
});
(0, vitest_1.it)("focuses input after clear button pressed", async () => {
const { searchInput } = renderSearchInput({ value: "value" });
await searchInput.clear();
searchInput.assertHasFocus();
});
(0, vitest_1.it)("is accessible", async () => {
const { container } = renderSearchInput({ value: "value" });
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
});
});
function renderSearchInput({ value, placeholder }) {
const accessibleName = "Search input";
const onChange = vitest_1.vi.fn();
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { value: value, placeholder: placeholder, onChange: onChange, accessibleName: accessibleName }));
return { searchInput: getSearchInputInteractions(accessibleName, onChange), container };
}
function getSearchInputInteractions(accessibleName, onChange) {
const interactions = {
click: async () => {
await testing_library_1.domQueries.getSearchBox(accessibleName).click();
},
replaceText: async (text) => {
await testing_library_1.domQueries.getSearchBox(accessibleName).replaceText(text);
},
clear: async () => {
await testing_library_1.domQueries.getButton("clear search input").click();
},
assertSearchInputChanged: (value) => {
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
},
assertHasPlaceholder: (placeholder) => {
testing_library_1.domQueries.getSearchBox(accessibleName).assertPlaceholderValue(placeholder);
},
assertIsInTheDocument: () => {
testing_library_1.domQueries.getSearchBox(accessibleName).assertIsInTheDocument();
},
assertClearButtonIsNotInTheDocument: () => {
testing_library_1.domQueries.queryButton("clear search input").assertIsNotInTheDocument();
},
assertHasFocus: () => {
testing_library_1.domQueries.getSearchBox(accessibleName).assertHasFocus();
},
};
return interactions;
}