@octopusdeploy/design-system-components
Version:
The design systems component library.
198 lines (197 loc) • 9.14 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSharedSelectInteractions = getSharedSelectInteractions;
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
function getSharedSelectInteractions(label, onChange) {
const select = () => react_1.screen.getByRole("combobox", { name: new RegExp(label) });
return {
shouldBeInDocument: () => {
expect(select()).toBeInTheDocument();
},
shouldHaveLabel: (labelText) => {
expect(react_1.screen.getByRole("combobox", { name: labelText })).toBeInTheDocument();
},
shouldHavePlaceholder: (placeholder) => {
testing_library_1.domQueries.getText(placeholder).assertIsInTheDocument();
},
shouldHaveDescription: (description) => {
testing_library_1.domQueries.getText(description).assertIsInTheDocument();
},
shouldHaveError: (error) => {
testing_library_1.domQueries.getText(error).assertIsInTheDocument();
},
shouldHaveRetryButton: () => {
testing_library_1.domQueries.getButton("retry").assertIsInTheDocument();
},
shouldBeDisabled: () => {
expect(select()).toHaveAttribute("aria-disabled", "true");
},
shouldBeReadOnly: () => {
expect(select()).toHaveAttribute("aria-readonly", "true");
},
shouldHaveFocus: () => {
expect(select()).toHaveFocus();
},
shouldHaveRequiredMarker: () => {
testing_library_1.domQueries.getText("(required)").assertIsInTheDocument();
},
shouldHaveOptionalMarker: () => {
testing_library_1.domQueries.getText("(optional)").assertIsInTheDocument();
},
shouldHaveDefaultMarker: () => {
testing_library_1.domQueries.getText("(default)").assertIsInTheDocument();
},
shouldHaveAriaInvalid: (invalid) => {
expect(select()).toHaveAttribute("aria-invalid", invalid.toString());
},
shouldHaveAriaRequired: (required) => {
expect(select()).toHaveAttribute("aria-required", required.toString());
},
shouldHaveAriaDescribedByError: () => {
const selectElement = select();
const ariaDescribedBy = selectElement.getAttribute("aria-describedby");
expect(ariaDescribedBy).toContain("validation");
},
shouldHaveAriaDescribedByDescription: () => {
const selectElement = select();
const ariaDescribedBy = selectElement.getAttribute("aria-describedby");
expect(ariaDescribedBy).toContain("description");
},
shouldHaveAriaDescribedByBoth: () => {
const selectElement = select();
const ariaDescribedBy = selectElement.getAttribute("aria-describedby");
expect(ariaDescribedBy).toContain("description");
expect(ariaDescribedBy).toContain("validation");
},
shouldHaveAriaActiveDescendantForOption: (optionLabel) => {
const option = react_1.screen.getByRole("option", { name: optionLabel });
const optionId = option.getAttribute("id");
const selectElement = select();
const ariaActiveDescendant = selectElement.getAttribute("aria-activedescendant");
expect(ariaActiveDescendant).toBe(optionId);
},
shouldNotHaveAriaActiveDescendant: () => {
const selectElement = select();
const ariaActiveDescendant = selectElement.getAttribute("aria-activedescendant");
expect(ariaActiveDescendant).toBeNull();
},
tab: async () => {
await user_event_1.default.tab();
},
click: async () => {
await user_event_1.default.click(select());
},
clickRetryButton: () => {
return testing_library_1.domQueries.getButton("retry").click();
},
pressEnter: async () => {
await user_event_1.default.keyboard("{Enter}");
},
pressSpace: async () => {
await user_event_1.default.keyboard(" ");
},
pressArrowDown: async () => {
await user_event_1.default.keyboard("{ArrowDown}");
},
pressArrowUp: async () => {
await user_event_1.default.keyboard("{ArrowUp}");
},
pressHome: async () => {
await user_event_1.default.keyboard("{Home}");
},
pressEnd: async () => {
await user_event_1.default.keyboard("{End}");
},
pressEscape: async () => {
await user_event_1.default.keyboard("{Escape}");
},
selectOption: async (optionLabel) => {
const option = react_1.screen.getByRole("option", { name: optionLabel });
await user_event_1.default.click(option);
},
shouldShowDropdown: () => {
const listbox = react_1.screen.getByRole("listbox");
expect(listbox).toBeInTheDocument();
},
shouldNotShowDropdown: () => {
const listbox = react_1.screen.queryByRole("listbox");
expect(listbox).not.toBeInTheDocument();
},
shouldShowAllOptions: (options) => {
options.forEach((option) => {
expect(react_1.screen.getByRole("option", { name: option.label })).toBeInTheDocument();
});
},
shouldShowAllOptionsInOrder: (options) => {
const expectedOptionLabels = options.map((option) => option.label);
const actualOptionLabels = react_1.screen.getAllByRole("option").map((option) => option.textContent);
expect(actualOptionLabels).toEqual(expectedOptionLabels);
},
shouldHaveOptionFocused: (optionLabel) => {
const option = react_1.screen.getByRole("option", { name: optionLabel });
expect(option).toHaveFocus();
},
shouldHaveOptionActive: (optionLabel) => {
const option = react_1.screen.getByRole("option", { name: optionLabel });
const optionId = option.getAttribute("id");
const selectElement = select();
expect(selectElement).toHaveAttribute("aria-activedescendant", optionId);
const searchInput = react_1.screen.queryByRole("searchbox");
if (searchInput)
expect(searchInput).toHaveAttribute("aria-activedescendant", optionId);
},
shouldNotHaveCalledOnChange: () => {
expect(onChange).not.toHaveBeenCalled();
},
shouldShowLoadingIndicator: () => {
expect(react_1.screen.getByRole("progressbar")).toBeInTheDocument();
},
shouldNotShowLoadingIndicator: () => {
expect(react_1.screen.queryByRole("progressbar")).not.toBeInTheDocument();
},
triggerScrollForLoadMore: async () => {
// There's not a great way of simulating this in a test so this is implementation specific and could break
const listbox = react_1.screen.getByRole("listbox");
listbox.scrollTop = listbox.scrollHeight;
listbox.dispatchEvent(new Event("scroll"));
},
shouldShowClearButton: () => {
testing_library_1.domQueries.getButton("clear selection").assertIsInTheDocument();
},
shouldNotShowClearButton: () => {
testing_library_1.domQueries.queryButton("clear selection").assertIsNotInTheDocument();
},
clickClearButton: async () => {
return testing_library_1.domQueries.getButton("clear selection").click();
},
shouldShowSearchInput: () => {
testing_library_1.domQueries.getSearchBox(`filter ${label}`).assertIsInTheDocument();
},
shouldNotShowSearchInput: () => {
testing_library_1.domQueries.querySearchBox(`filter ${label}`).assertIsNotInTheDocument();
},
typeInSearchInput: async (text) => {
return testing_library_1.domQueries.getSearchBox(`filter ${label}`).replaceText(text);
},
shouldShowOnlyOption: (optionLabel) => {
const options = react_1.screen.getAllByRole("option");
expect(options).toHaveLength(1);
expect(options[0]).toHaveTextContent(optionLabel);
},
shouldShowNoResultsMessage: () => {
testing_library_1.domQueries.getText("No results found.").assertIsInTheDocument();
},
shouldNotShowAnyOptions: () => {
const options = react_1.screen.queryAllByRole("option");
expect(options).toHaveLength(0);
},
shouldHaveSearchInputWithAriaLabel: (ariaLabel) => {
testing_library_1.domQueries.getSearchBox(ariaLabel).assertIsInTheDocument();
},
};
}