@zohodesk/components 1.4.12 → 1.4.13

package/es/Select/__tests__/Select.spec.js

@@ -1,1153 +0,0 @@
-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(_ref => {
-      let {
-        searchString,
-        onAddNewOption
-      } = _ref;
-      return /*#__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'
-        }
-      }
-    }));
-    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();
-  });
-});