@zohodesk/components 1.3.2 → 1.3.3

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

@@ -1,12 +1,1138 @@
 import React from 'react';
-import { render } from '@testing-library/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";
-describe('Select', () => {
-  test('rendering the defult props', () => {
-    const mockOnChange = jest.fn();
+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 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();
   });
 });