@zohodesk/components 1.6.32 → 1.6.34

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,6 +1,35 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import { render } from '@testing-library/react';
-import MultiSelect from "../MultiSelect";
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import MultiSelect from "../MultiSelect"; // the real Virtualizer measures the DOM (0 in jsdom); mocked to render the first rows synchronously
+
+jest.mock('@zohodesk/virtualizer', () => {
+  const React = require('react');
+
+  return { ...jest.requireActual('@zohodesk/virtualizer'),
+    Virtualizer: function MockVirtualizer({
+      elementRenderer,
+      elementsCount,
+      dataId
+    }) {
+      const items = [];
+
+      for (let index = 0; index < Math.min(elementsCount, 3); index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index,
+          ref: () => {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 const options = [{
   id: 1,
   text: 'custom 1',
@@ -33,6 +62,7 @@ const options = [{
 const testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
 const testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -81,4 +111,861 @@ describe('MultiSelect', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const menuOptions = [{
+    id: 'option1',
+    text: 'Option 1'
+  }, {
+    id: 'option2',
+    text: 'Option 2'
+  }, {
+    id: 'option3',
+    text: 'Option 3'
+  }]; // options, selectedOptions, onChange and emptyMessage are required without defaults
+
+  const getRequiredProps = () => ({
+    emptyMessage: 'No options',
+    onChange: jest.fn(),
+    options: menuOptions,
+    selectedOptions: []
+  });
+
+  const getSearchInput = container => container.querySelector('[data-id="multiSelect_textBox"]'); // selected options and clear icon
+
+
+  test('Render with selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions not in options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['unknown']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions not in options and allowValueFallback=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['unknown'],
+      allowValueFallback: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit as 2 and three selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2', 'option3'],
+      limit: 2
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disableAction', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      disableAction: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      isDisabled: true,
+      title: "Disabled title"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disabledOptions leaving one enabled selected option', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      disabledOptions: ['option1']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disabledOptions leaving two enabled selected options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2', 'option3'],
+      disabledOptions: ['option1']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // appearance
+
+  test('Render with size as xmedium', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      size: "xmedium"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'xmedium'])('Render with textBoxSize as %s', textBoxSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      textBoxSize: textBoxSize
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['primary', 'secondary'])('Render with variant as %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      variant: variant
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['transparent', 'dark'])('Render with borderColor as %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      borderColor: borderColor
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      needBorder: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isFocus: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isFocus: true,
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needEffect=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      needEffect: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      palette: "dark"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with textBoxClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      textBoxClass: "custom-textbox"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customChildrenClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      customChildrenClass: "custom-children"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with placeHolder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      placeHolder: "Select options"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the placeholder is hidden once an option is selected
+
+  test('Render with placeHolder and selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      placeHolder: "Select options"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAutoFocus', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      needAutoFocus: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoComplete', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      autoComplete: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // identification and accessibility
+
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId",
+      isDisabled: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId",
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      dataSelectorId: "multi-select-selector"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      htmlId: "multi-select-htmlId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with ariaErrorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      ariaErrorId: "multi-select-error"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with setAriaId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      setAriaId: "multi-select-aria"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y clearLabel and ariaLabelledby', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      a11y: {
+        clearLabel: 'Clear selected',
+        ariaLabelledby: 'multi-select-label'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys clearText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      i18nKeys: {
+        clearText: 'Remove all'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps TextBoxIconProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      customProps: {
+        TextBoxIconProps: {
+          name: 'multi-select-name',
+          maxLength: '10',
+          customProps: {
+            TextBoxProps: {
+              'data-custom-attr': 'true'
+            }
+          }
+        }
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // custom UI slots
+
+  test('Render with children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, getRequiredProps(), /*#__PURE__*/React.createElement("span", null, "Custom child")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomClearComponent', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      renderCustomClearComponent: ({
+        clearText,
+        isPopupOpened,
+        handleClearAll
+      }) => /*#__PURE__*/React.createElement("span", null, `${clearText} ${isPopupOpened} ${typeof handleClearAll}`)
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomToggleIndicator as function', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isReadOnly: true,
+      renderCustomToggleIndicator: ({
+        togglePopup,
+        isPopupOpened,
+        isReadOnly,
+        isDisabled
+      }) => /*#__PURE__*/React.createElement("span", null, `${typeof togglePopup} ${isPopupOpened} ${isReadOnly} ${isDisabled}`)
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomToggleIndicator as node', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      renderCustomToggleIndicator: /*#__PURE__*/React.createElement("span", null, "Toggle indicator")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // open menu
+
+  test('Render with isPopupOpen and isPopupReady', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDisabled: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and disableAction', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      disableAction: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, selectedOptions and keepSelectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      keepSelectedOptions: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and disabledOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      disabledOptions: ['option2']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and secondaryField', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        id: 'option1',
+        text: 'Option 1',
+        secondary: 'Secondary 1'
+      }],
+      secondaryField: "secondary"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, valueField and textField', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        key: 'k1',
+        label: 'Label 1'
+      }, {
+        key: 'k2',
+        label: 'Label 2'
+      }],
+      valueField: "key",
+      textField: "label"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and string options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: ['String 1', 'String 2']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and customProps SuggestionsProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      customProps: {
+        SuggestionsProps: {
+          needTick: true,
+          listItemSize: 'small'
+        }
+      },
+      selectedOptions: ['option1'],
+      keepSelectedOptions: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isVirtualizerEnabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isVirtualizerEnabled: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all header
+
+  test('Render with isPopupOpen, isPopupReady and needSelectAll', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and selectAllText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      selectAllText: "Select every option"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all is hidden once a limit is set
+
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and limit', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      limit: 3
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // limit
+
+  test('Render with isPopupOpen, isPopupReady, limit reached and default limit message', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, limit reached and i18nKeys limitReachedMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1,
+      i18nKeys: {
+        limitReachedMessage: 'Only one allowed'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // loaders
+
+  test('Render with isPopupOpen, isPopupReady and isLoading', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isLoading and shouldUseInternalLoader=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true,
+      shouldUseInternalLoader: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isLoading, shouldUseInternalLoader=false and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true,
+      shouldUseInternalLoader: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isSearching', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isSearching and i18nKeys searchText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true,
+      i18nKeys: {
+        searchText: 'Looking for options'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isSearching and palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true,
+      palette: "dark"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // empty states
+
+  test('Render with isPopupOpen, isPopupReady and no options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and emptyMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      emptyMessage: "Nothing to select"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and i18nKeys emptyText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      i18nKeys: {
+        emptyText: 'Empty from i18n'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and renderCustomEmptyState', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomEmptyState: () => /*#__PURE__*/React.createElement("span", null, "Custom empty state")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and all options selected', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3']
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, all options selected and noMoreOptionsMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3'],
+      noMoreOptionsMessage: "No more to pick"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // typed search
+
+  test('Render with isPopupOpen, isPopupReady and search text matching an option', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'Option 2'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and search text matching no option', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text matching no option and searchEmptyMessage', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      searchEmptyMessage: "No matches found"
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text and needLocalSearch=false', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needLocalSearch: false
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  }); // drop box
+
+  test.each(['medium', 'large'])('Render with isPopupOpen, isPopupReady and dropBoxSize as %s', dropBoxSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dropBoxSize: dropBoxSize
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and boxSize as medium', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      boxSize: "medium"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      palette: "dark"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isAnimate=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isAnimate: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and animationStyle as default', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      animationStyle: "default"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isBoxPaddingNeed=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isBoxPaddingNeed: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and getFooter', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      getFooter: () => /*#__PURE__*/React.createElement("span", null, "Footer content")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dataId: "multi-select-dataId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });