@octopusdeploy/design-system-components/dist/src/components/Form/Select/__testing__/getSharedSelectInteractions.js

The design systems component library.

"use strict";
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();
        },
        shouldNotHaveError: (error) => {
            testing_library_1.domQueries.queryText(error).assertIsNotInTheDocument();
        },
        shouldHaveRetryButton: () => {
            testing_library_1.domQueries.getButton("retry").assertIsInTheDocument();
        },
        shouldNotHaveRetryButton: () => {
            testing_library_1.domQueries.queryButton("retry").assertIsNotInTheDocument();
        },
        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();
        },
        clickRefreshButton: () => {
            return testing_library_1.domQueries.getButton("Refresh").click();
        },
        shouldShowRefreshButton: () => {
            testing_library_1.domQueries.getButton("Refresh").assertIsInTheDocument();
        },
        shouldNotShowRefreshButton: () => {
            testing_library_1.domQueries.queryButton("Refresh").assertIsNotInTheDocument();
        },
        refreshButtonShouldBeEnabled: () => {
            testing_library_1.domQueries.getButton("Refresh").assertIsEnabled();
        },
        refreshButtonShouldHaveFocus: () => {
            testing_library_1.domQueries.getButton("Refresh").assertHasFocus();
        },
        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) => {
            await testing_library_1.domQueries.getSelect(label).selectOption(optionLabel);
        },
        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();
        },
    };
}