@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
1,165 lines (1,164 loc) • 38.1 kB
JavaScript
import React from 'react';
import { render, cleanup, fireEvent, within, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { setGlobalId } from "../../Provider/IdProvider";
import Select from "../Select";
import '@testing-library/jest-dom';
beforeEach(() => {
setGlobalId(0);
});
afterEach(() => {
cleanup();
});
const selectInputRole = 'Menuitem';
const dropboxTestId = 'selectComponent_suggestions';
const listItemRole = 'option';
const options = [{
id: '1',
text: 'Option 1'
}, {
id: '2',
text: 'Option 2'
}, {
id: '3',
text: 'Option 3'
}];
const selectOptions = [{
id: '1',
text: 'Option 1'
}, {
id: '2',
text: 'Option 2'
}, {
id: '3',
text: 'Option 3'
}, {
id: '4',
text: 'Option 4'
}, {
id: '5',
text: 'Option 5'
}, {
id: '6',
text: 'Option 6'
}, {
id: '7',
text: 'Option 7'
}, {
id: '8',
text: 'Option 8'
}, {
id: '9',
text: 'Option 9'
}, {
id: '10',
text: 'Option 10'
}];
describe('Select -', () => {
test('Should render the Select component', () => {
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, null));
expect(getByRole(selectInputRole)).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should render the placeholder when there is no default value', () => {
const placeHolder = 'Select Correct Option';
const {
getByPlaceholderText,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
placeHolder: placeHolder,
isDefaultSelectValue: false,
options: options
}));
expect(getByPlaceholderText(placeHolder)).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should render the default selected value', () => {
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
expect(getByRole(selectInputRole)).toHaveValue('Option 1');
expect(asFragment()).toMatchSnapshot();
});
test('Should render the given selected value', () => {
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
selectedValue: "Option 2"
}));
expect(getByRole(selectInputRole)).toHaveValue('Option 2');
expect(asFragment()).toMatchSnapshot();
});
test('Should open the dropdown, when click on the input', () => {
const {
getByRole,
getByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, null));
userEvent.click(getByRole(selectInputRole));
expect(getByTestId(dropboxTestId)).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should open the dropdown, when press down arrow on the input', () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'ArrowDown',
keyCode: 40,
code: 'ArrowDown'
});
expect(getByTestId(dropboxTestId)).toBeInTheDocument();
});
test('Should open the dropdown, when isPopupOpenOnEnter is true. If press enter key on the input', () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpenOnEnter: true,
options: options
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'Enter',
keyCode: 13,
code: 'Enter'
});
expect(getByTestId(dropboxTestId)).toBeInTheDocument();
});
test('Should open the dropdown, when isPopupOpenOnEnter is true. If press tab key on the input', () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpenOnEnter: true,
options: options
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'Tab',
keyCode: 9,
code: 'Tab'
});
expect(getByTestId(dropboxTestId)).toBeInTheDocument();
});
test('Should show the empty message when open the dropdown with no options', () => {
const emptyMessage = 'No Options Available';
const {
getByRole,
queryByRole,
getByText,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
emptyMessage: emptyMessage
}));
userEvent.click(getByRole(selectInputRole));
expect(queryByRole(listItemRole)).not.toBeInTheDocument();
expect(getByText(emptyMessage)).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should render given the options', () => {
const {
getByRole,
getAllByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
userEvent.click(getByRole(selectInputRole));
expect(getAllByRole(listItemRole)).toHaveLength(3);
expect(getAllByRole(listItemRole)[0]).toHaveTextContent('Option 1');
expect(getAllByRole(listItemRole)[1]).toHaveTextContent('Option 2');
expect(getAllByRole(listItemRole)[2]).toHaveTextContent('Option 3');
expect(asFragment()).toMatchSnapshot();
});
test('Should trigger the onChange event when select an option', () => {
const mockOnChange = jest.fn();
const {
getByRole,
getAllByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
onChange: mockOnChange
}));
userEvent.click(getByRole(selectInputRole));
userEvent.click(getAllByRole(listItemRole)[1]);
expect(mockOnChange).toHaveBeenCalledWith('2', {
groupId: '',
id: '2',
text: 'Option 2'
});
});
test('Should update the value when select the option', () => {
const {
getByRole,
getAllByRole,
rerender,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
const inputElement = getByRole(selectInputRole);
expect(inputElement).toHaveValue('Option 1');
userEvent.click(inputElement);
expect(asFragment()).toMatchSnapshot();
userEvent.click(getAllByRole(listItemRole)[1]);
rerender( /*#__PURE__*/React.createElement(Select, {
options: options,
selectedValue: "Option 2"
}));
expect(asFragment()).toMatchSnapshot();
expect(inputElement).toHaveValue('Option 2');
});
test('Should focus the search input, when open the dropdown', async () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options
}));
userEvent.click(getByRole(selectInputRole));
await waitFor(() => {
expect(within(getByTestId(dropboxTestId)).getByRole('textbox')).toHaveFocus();
});
});
test('Should render the only options matching search value', () => {
const {
getByRole,
getAllByRole,
asFragment,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
expect(getAllByRole(listItemRole)).toHaveLength(1);
expect(asFragment()).toMatchSnapshot();
});
test('Should render the only options matching search value even with additional spaces before and after', () => {
const {
getByRole,
getAllByRole,
asFragment,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), ' 2 ');
expect(getAllByRole(listItemRole)).toHaveLength(1);
expect(asFragment()).toMatchSnapshot();
});
test('Should trigger given onSearch, when type on the search input', async () => {
const mockOnSearch = jest.fn();
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
onSearch: mockOnSearch
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
await waitFor(() => {
expect(mockOnSearch).toHaveBeenCalledWith('2');
});
});
test('Should render all the options when search value is cleared', () => {
const {
getByRole,
getAllByRole,
asFragment,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options
}));
userEvent.click(getByRole(selectInputRole));
const searchInput = within(getByTestId(dropboxTestId)).getByRole('textbox');
userEvent.type(searchInput, 'option 2');
expect(getAllByRole(listItemRole)).toHaveLength(1);
userEvent.click(within(getByTestId('CardHeader')).getByRole('button'));
expect(getAllByRole(listItemRole)).toHaveLength(3);
expect(searchInput).toHaveValue('');
expect(searchInput).toHaveFocus();
expect(asFragment()).toMatchSnapshot();
});
test('Should not open the dropdown when disabled', () => {
const {
getByRole,
queryByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
isDisabled: true
}));
userEvent.click(getByRole(selectInputRole));
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should not open the dropdown when readonly', () => {
const {
getByRole,
queryByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
isReadOnly: true
}));
userEvent.click(getByRole(selectInputRole));
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should close the dropdown when clicking outside', () => {
const {
getByRole,
queryByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
userEvent.click(getByRole(selectInputRole));
expect(queryByTestId(dropboxTestId)).toBeInTheDocument();
userEvent.click(document.body);
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should show the custom empty state using getCustomEmptyState prop, when there is no matching options search value', () => {
const emptyMessage = 'Custom Empty State';
const getCustomEmptyState = jest.fn(() => /*#__PURE__*/React.createElement("div", null, emptyMessage));
const {
getByText,
getByRole,
asFragment,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
getCustomEmptyState: getCustomEmptyState
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '5');
expect(getByText(emptyMessage)).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
test('Should call the onKeyDown function, when press any key in the input element', () => {
const mockKeyDown = jest.fn();
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
onKeyDown: mockKeyDown
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'a',
code: 'KeyA'
});
expect(mockKeyDown).toHaveBeenCalled();
});
test('Should highlight the next list-items, when arrow keys pressed', () => {
const {
getByRole,
getAllByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options
}));
userEvent.click(getByRole(selectInputRole));
const listItems = getAllByRole(listItemRole);
expect(listItems[0]).toHaveAttribute("data-a11y-list-active", "true");
userEvent.keyboard('{arrowdown}');
expect(listItems[0]).toHaveAttribute("data-a11y-list-active", "false");
expect(listItems[1]).toHaveAttribute("data-a11y-list-active", "true");
userEvent.keyboard('{arrowdown}');
expect(listItems[1]).toHaveAttribute("data-a11y-list-active", "false");
expect(listItems[2]).toHaveAttribute("data-a11y-list-active", "true");
userEvent.keyboard('{arrowdown}');
expect(listItems[2]).toHaveAttribute("data-a11y-list-active", "true");
userEvent.keyboard('{arrowup}');
expect(listItems[2]).toHaveAttribute("data-a11y-list-active", "false");
expect(listItems[1]).toHaveAttribute("data-a11y-list-active", "true");
expect(asFragment()).toMatchSnapshot();
userEvent.keyboard('{arrowup}');
expect(listItems[1]).toHaveAttribute("data-a11y-list-active", "false");
expect(listItems[0]).toHaveAttribute("data-a11y-list-active", "true");
userEvent.keyboard('{arrowup}');
expect(listItems[0]).toHaveAttribute("data-a11y-list-active", "true");
});
test('Should update the value, when select the option using keyboard', () => {
const mockOnChange = jest.fn();
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
onChange: mockOnChange
}));
userEvent.click(getByRole(selectInputRole));
userEvent.keyboard('{arrowdown}');
userEvent.keyboard('{enter}');
expect(mockOnChange).toHaveBeenCalledWith('2', {
groupId: '',
id: '2',
text: 'Option 2'
});
expect(asFragment()).toMatchSnapshot();
});
test('Should close the dropdown and focus the select input, when press escape key', async () => {
const {
getByRole,
getByTestId,
queryByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options
}));
userEvent.click(getByRole(selectInputRole));
expect(queryByTestId(dropboxTestId)).toBeInTheDocument();
await waitFor(() => {
expect(within(getByTestId(dropboxTestId)).getByRole('textbox')).toHaveFocus();
});
userEvent.keyboard('{escape}');
await waitFor(() => {
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
expect(getByRole(selectInputRole)).toHaveFocus();
});
});
test('Should close the dropdown and trigger the onchange, when press tab key', async () => {
const mockOnChange = jest.fn();
const {
getByRole,
getByTestId,
queryByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
onChange: mockOnChange
}));
userEvent.click(getByRole(selectInputRole));
await waitFor(() => {
expect(within(getByTestId(dropboxTestId)).getByRole('textbox')).toHaveFocus();
});
fireEvent.keyDown(within(getByTestId(dropboxTestId)).getByRole('textbox'), {
key: 'ArrowDown',
code: 'ArrowDown',
keyCode: 40
});
fireEvent.keyDown(within(getByTestId(dropboxTestId)).getByRole('textbox'), {
key: 'Tab',
code: 'Tab',
keyCode: 9
});
await waitFor(() => {
expect(mockOnChange).toHaveBeenCalledWith('2', {
groupId: '',
id: '2',
text: 'Option 2'
});
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
expect(getByRole(selectInputRole)).toHaveFocus();
});
});
test('Should trigger getNextOptions, when scroll to the end of the dropbox list and isNextOptions is true', async () => {
const mockGetNextOptions = jest.fn(() => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, 2000);
});
});
const {
getByRole,
getByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: selectOptions,
isNextOptions: true,
getNextOptions: mockGetNextOptions
}));
userEvent.click(getByRole(selectInputRole));
const cardContent = within(getByTestId(dropboxTestId)).getByTestId('CardContent');
Object.defineProperty(cardContent, 'scrollHeight', {
value: 1000,
writable: true
});
Object.defineProperty(cardContent, 'clientHeight', {
value: 800,
writable: true
});
Object.defineProperty(cardContent, 'offsetHeight', {
value: 800,
writable: true
});
fireEvent.scroll(cardContent, {
target: {
scrollTop: 201
}
});
await waitFor(() => {
const loader = within(getByTestId(dropboxTestId)).queryByTestId('loader');
expect(loader).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
expect(mockGetNextOptions).toHaveBeenCalledWith('');
});
await waitFor(() => {
const loader = within(getByTestId(dropboxTestId)).queryByTestId('loader');
expect(loader).not.toBeInTheDocument();
}, {
timeout: 2500
});
});
test('Should trigger getNextOptions, when search with needLocalSearch is false', async () => {
const mockGetNextOptions = jest.fn(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject();
}, 2000);
});
});
const {
getByRole,
getByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
needLocalSearch: false,
options: options,
isNextOptions: true,
getNextOptions: mockGetNextOptions
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), 'a');
const loader = within(getByTestId(dropboxTestId)).queryByTestId('loader');
await waitFor(() => {
expect(loader).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
expect(mockGetNextOptions).toHaveBeenCalledWith('');
});
await waitFor(() => {
expect(loader).not.toBeInTheDocument();
}, {
timeout: 2500
});
});
test('Should trigger onChange, when type on select input with autoSelectOnType is true', async () => {
const mockOnChange = jest.fn();
const optionsList = [{
id: '1',
text: 'Madurai'
}, {
id: '2',
text: 'Chennai'
}, {
id: '3',
text: 'Coimbatore'
}, {
id: '4',
text: 'Trichy'
}];
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: optionsList,
autoSelectOnType: true,
onChange: mockOnChange
}));
fireEvent.keyPress(getByRole(selectInputRole), {
key: 'c',
code: 'KeyC',
keyCode: 67,
charCode: 67
});
await waitFor(() => {
expect(mockOnChange).toHaveBeenCalledWith('2', {
groupId: '',
id: '2',
text: 'Chennai'
});
});
fireEvent.keyPress(getByRole(selectInputRole), {
key: 'c',
code: 'KeyC',
keyCode: 67,
charCode: 67
});
await waitFor(() => {
expect(mockOnChange).toHaveBeenCalledWith('3', {
groupId: '',
id: '3',
text: 'Coimbatore'
});
});
fireEvent.keyPress(getByRole(selectInputRole), {
key: 'c',
code: 'KeyC',
keyCode: 67,
charCode: 67
});
await waitFor(() => {
expect(mockOnChange).toHaveBeenCalledWith('2', {
groupId: '',
id: '2',
text: 'Chennai'
});
});
});
test('Should trigger onAddNewOption, when click on the custom search empty state button', () => {
const addMessage = 'Add New Option';
const getCustomEmptyState = jest.fn(({
searchString,
onAddNewOption
}) => /*#__PURE__*/React.createElement("button", {
onClick: onAddNewOption
}, addMessage));
const mockOnAddNewOption = jest.fn();
const {
getByRole,
getByTestId,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
onAddNewOption: mockOnAddNewOption,
getCustomEmptyState: getCustomEmptyState
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '5');
expect(getCustomEmptyState).toHaveBeenCalledWith({
searchString: '5',
onAddNewOption: expect.any(Function)
});
expect(getByRole('button', {
name: addMessage
})).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
userEvent.click(getByRole('button', {
name: addMessage
}));
expect(mockOnAddNewOption).toHaveBeenCalledWith('5');
}); // Yellow coverage
test('Should trigger the onDropBoxOpen, when open the select', () => {
const mockOnDropBoxOpen = jest.fn();
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
onDropBoxOpen: mockOnDropBoxOpen
}));
userEvent.click(getByRole(selectInputRole));
expect(mockOnDropBoxOpen).toHaveBeenCalledWith('');
});
test('Should trigger the onDropBoxClose, when close the select', () => {
const mockOnDropBoxClose = jest.fn();
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
onDropBoxClose: mockOnDropBoxClose
}));
userEvent.click(getByRole(selectInputRole));
userEvent.click(document.body);
expect(mockOnDropBoxClose).toHaveBeenCalledWith();
});
test('Should trigger the onSearch with empty string, when close the select and isSearchClearOnClose is true', async () => {
const mockOnSearch = jest.fn();
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
isSearchClearOnClose: true,
options: options,
onSearch: mockOnSearch
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
await waitFor(() => {
expect(mockOnSearch).toHaveBeenCalledWith('2');
});
userEvent.click(document.body);
await waitFor(() => {
expect(mockOnSearch).toHaveBeenCalledWith('');
});
});
test('Should trigger the onSearch with search string, when close the select and isSearchClearOnClose is false', async () => {
const mockOnSearch = jest.fn();
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
isSearchClearOnClose: false,
options: options,
onSearch: mockOnSearch
}));
userEvent.click(getByRole(selectInputRole));
userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
await waitFor(() => {
expect(mockOnSearch).toHaveBeenCalledWith('2');
});
userEvent.click(document.body);
await waitFor(() => {
expect(mockOnSearch).toHaveBeenCalledWith('2');
});
});
test('Should trigger the getPopupHandlers with popup handlers, when select is mounted', () => {
const mockGetPopupHandlers = jest.fn();
render( /*#__PURE__*/React.createElement(Select, {
options: options,
getPopupHandlers: mockGetPopupHandlers
}));
expect(mockGetPopupHandlers).toHaveBeenCalledWith({
removeClose: expect.any(Function),
openPopup: expect.any(Function),
closePopup: expect.any(Function),
togglePopup: expect.any(Function)
});
});
test('Should trigger the getPopupHandlers with null, when select is unmounted', () => {
const mockGetPopupHandlers = jest.fn();
const {
unmount
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
getPopupHandlers: mockGetPopupHandlers
}));
unmount();
expect(mockGetPopupHandlers).toHaveBeenCalledWith({
removeClose: null,
openPopup: null,
closePopup: null,
togglePopup: null
});
});
test('Should trigger the togglePopup with given defaultDropBoxPosition', () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
defaultDropBoxPosition: "topCenter"
}));
userEvent.click(getByRole(selectInputRole));
expect(getByTestId(dropboxTestId)).toHaveAttribute('data-position', 'topMid');
});
test('Should trigger the onFocus, when open the select', () => {
const mockOnFocus = jest.fn();
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
onFocus: mockOnFocus
}));
userEvent.click(getByRole(selectInputRole));
expect(mockOnFocus).toHaveBeenCalledWith(expect.any(Object));
});
test('Should trigger the getPopupHandlers with popup handlers, when select is mounted', () => {
const mockGetRef = jest.fn();
const {
getByRole
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
getRef: mockGetRef
}));
expect(mockGetRef).toHaveBeenCalledWith(getByRole(selectInputRole));
});
test('Should not open the dropdown, when press down arrow on the input with needSelectDownIcon as false', () => {
const {
getByRole,
queryByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
needSelectDownIcon: false
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'ArrowDown',
keyCode: 40,
code: 'ArrowDown'
});
expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
});
test('Should open the dropdown, when press down arrow on the input with getChildren used and needSelectDownIcon as false', () => {
const {
getByRole,
getByTestId
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
needSelectDownIcon: false,
getChildren: () => /*#__PURE__*/React.createElement("span", null, "getChildren element")
}));
fireEvent.keyDown(getByRole(selectInputRole), {
key: 'ArrowDown',
keyCode: 40,
code: 'ArrowDown'
});
expect(getByTestId(dropboxTestId)).toBeInTheDocument();
});
});
describe('Select snapshot - ', () => {
test('Should render with isParentBased as false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isParentBased: false
}));
expect(asFragment()).toMatchSnapshot();
});
const sizes = ['small', 'medium'];
test.each(sizes)('Should render with size as %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with iconOnHover as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
iconOnHover: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with iconOnHover as true and isReadOnly as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
iconOnHover: true,
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with iconOnHover as true and isDisabled as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
iconOnHover: true,
isDisabled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with title prop', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
title: "Select tooltip"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with dataSelectorId prop', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
dataSelectorId: "customSelectorId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with className prop', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
className: "customClass"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with needSelectDownIcon as false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSelectDownIcon: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with isLoading', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true,
isLoading: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with children', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement("span", null, "children element")));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with children and dropdown open', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true
}, /*#__PURE__*/React.createElement("span", null, "children element")));
expect(asFragment()).toMatchSnapshot();
});
const dropBoxSizes = ['small', 'medium', 'large'];
test.each(dropBoxSizes)('Should render with dropBoxSize as %s', dropBoxSize => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true,
dropBoxSize: dropBoxSize,
needSearch: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with getFooter', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true,
getFooter: () => /*#__PURE__*/React.createElement("span", null, "getFooter element")
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with getChildren', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true,
getChildren: () => /*#__PURE__*/React.createElement("span", null, "getChildren element")
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with customProps`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
isPopupOpen: true,
customProps: {
TextBoxProps: {
'data-custom-attr': 'true'
},
DropdownSearchTextBoxProps: {
'data-custom-search-attr': 'true'
},
SuggestionsProps: {
listItemSize: 'small'
},
TextBoxIconProps: {
'data-custom-select-attr': 'true'
},
listItemProps: {
'data-custom-listitem-attr': 'true'
},
InputFieldLineProps: {
tagAttributes: {
'data-custom-attr': 'true'
}
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
});
describe('Select box needSelectDownIcon snapshot - ', () => {
[true, false].forEach(needSelectDownIcon => {
test(`Should render with aria properties - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
i18nKeys: {
TextBox_ally_label: ''
},
ariaLabelledby: "customLabelId",
options: options,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with isPopupOpen as true - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isPopupOpen: true,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with maxLength - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
maxLength: "100",
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with needBorder as false - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needBorder: false,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with placeHolder - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
placeHolder: "custom placeholder",
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with isReadOnly as true - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isReadOnly: true,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with isDisabled as true - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isDisabled: true,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
const textBoxSizes = ['xsmall', 'small', 'medium', 'xmedium'];
test.each(textBoxSizes)(`Should render with textBoxSize as %s - needSelectDownIcon as ${needSelectDownIcon}`, textBoxSize => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
textBoxSize: textBoxSize,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
const textBoxVariants = ['primary', 'secondary', 'default', 'light'];
test.each(textBoxVariants)(`Should render with textBoxVariant as %s - needSelectDownIcon as ${needSelectDownIcon}`, textBoxVariant => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
textBoxVariant: textBoxVariant,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
const borderColors = ['transparent', 'default'];
test.each(borderColors)(`Should render with borderColor as %s - needSelectDownIcon as ${needSelectDownIcon}`, borderColor => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
borderColor: borderColor,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with htmlId - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
htmlId: "customHtmlId",
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with autoComplete as true - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
autoComplete: true,
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with title - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
title: "custom select title",
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
test(`Should render with customProps TextBoxProps - needSelectDownIcon as ${needSelectDownIcon}`, () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
customProps: {
TextBoxProps: {
'data-custom-attr': 'true'
}
},
needSelectDownIcon: needSelectDownIcon
}));
expect(asFragment()).toMatchSnapshot();
});
});
});
describe('Select dataId snapshot - ', () => {
test('Should render with dataId prop - dropbox open', () => {
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSearch: true,
options: options,
dataId: "customDataId"
}));
userEvent.click(getByRole(selectInputRole));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with dataId prop - isDisabled as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isDisabled: true,
dataId: "customDataId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with dataId prop - isReadOnly as true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
isReadOnly: true,
dataId: "customDataId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with dataId prop - empty state and needSelectDownIcon as false', () => {
const {
getByRole,
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
needSelectDownIcon: false
}));
userEvent.click(getByRole(selectInputRole));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with renderCustomSelectedValue', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Select, {
options: options,
selectedValue: "Option 2",
renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("div", null, " Select Custom Option 2")
}));
expect(asFragment()).toMatchSnapshot();
});
});