@zohodesk/components 1.6.32 → 1.6.34

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -8,6 +8,42 @@ var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// the real Virtualizer measures the DOM (0 in jsdom); mocked to render the first rows synchronously
+jest.mock('@zohodesk/virtualizer', function () {
+  var React = require('react');
+
+  return _objectSpread(_objectSpread({}, jest.requireActual('@zohodesk/virtualizer')), {}, {
+    Virtualizer: function MockVirtualizer(_ref) {
+      var elementRenderer = _ref.elementRenderer,
+          elementsCount = _ref.elementsCount,
+          dataId = _ref.dataId;
+      var items = [];
+
+      for (var index = 0; index < Math.min(elementsCount, 3); index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index: index,
+          ref: function ref() {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        "data-id": dataId
+      }, items);
+    }
+  });
+});
 var options = [{
   id: 1,
   text: 'custom 1',
@@ -40,6 +76,9 @@ var options = [{
 var testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
 var testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], null)),
         asFragment = _render.asFragment;
@@ -90,4 +129,875 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var 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
+
+  var getRequiredProps = function getRequiredProps() {
+    return {
+      emptyMessage: 'No options',
+      onChange: jest.fn(),
+      options: menuOptions,
+      selectedOptions: []
+    };
+  };
+
+  var getSearchInput = function getSearchInput(container) {
+    return container.querySelector('[data-id="multiSelect_textBox"]');
+  }; // selected options and clear icon
+
+
+  test('Render with selectedOptions', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1']
+    }))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two selectedOptions', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2']
+    }))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions not in options', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['unknown']
+    }))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions not in options and allowValueFallback=false', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['unknown'],
+      allowValueFallback: false
+    }))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit as 2 and three selectedOptions', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2', 'option3'],
+      limit: 2
+    }))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      isReadOnly: true
+    }))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disableAction', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      disableAction: true
+    }))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      isDisabled: true,
+      title: "Disabled title"
+    }))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disabledOptions leaving one enabled selected option', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      disabledOptions: ['option1']
+    }))),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disabledOptions leaving two enabled selected options', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2', 'option3'],
+      disabledOptions: ['option1']
+    }))),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // appearance
+
+  test('Render with size as xmedium', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      size: "xmedium"
+    }))),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'xmedium'])('Render with textBoxSize as %s', function (textBoxSize) {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      textBoxSize: textBoxSize
+    }))),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['primary', 'secondary'])('Render with variant as %s', function (variant) {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      variant: variant
+    }))),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['transparent', 'dark'])('Render with borderColor as %s', function (borderColor) {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      borderColor: borderColor
+    }))),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      needBorder: false
+    }))),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isFocus: true
+    }))),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus and isReadOnly', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isFocus: true,
+      isReadOnly: true
+    }))),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needEffect=false', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      needEffect: false
+    }))),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      palette: "dark"
+    }))),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with textBoxClass', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      textBoxClass: "custom-textbox"
+    }))),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customChildrenClass', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      customChildrenClass: "custom-children"
+    }))),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with placeHolder', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      placeHolder: "Select options"
+    }))),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the placeholder is hidden once an option is selected
+
+  test('Render with placeHolder and selectedOptions', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      placeHolder: "Select options"
+    }))),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAutoFocus', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      needAutoFocus: true
+    }))),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoComplete', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      autoComplete: true
+    }))),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // identification and accessibility
+
+  test('Render with dataId', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId"
+    }))),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isDisabled', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId",
+      isDisabled: true
+    }))),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isReadOnly', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      dataId: "multi-select-dataId",
+      isReadOnly: true
+    }))),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      dataSelectorId: "multi-select-selector"
+    }))),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      htmlId: "multi-select-htmlId"
+    }))),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with ariaErrorId', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      ariaErrorId: "multi-select-error"
+    }))),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with setAriaId', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      setAriaId: "multi-select-aria"
+    }))),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y clearLabel and ariaLabelledby', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      a11y: {
+        clearLabel: 'Clear selected',
+        ariaLabelledby: 'multi-select-label'
+      }
+    }))),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys clearText', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      i18nKeys: {
+        clearText: 'Remove all'
+      }
+    }))),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps TextBoxIconProps', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      customProps: {
+        TextBoxIconProps: {
+          name: 'multi-select-name',
+          maxLength: '10',
+          customProps: {
+            TextBoxProps: {
+              'data-custom-attr': 'true'
+            }
+          }
+        }
+      }
+    }))),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // custom UI slots
+
+  test('Render with children', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], getRequiredProps(), /*#__PURE__*/_react["default"].createElement("span", null, "Custom child"))),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomClearComponent', function () {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      renderCustomClearComponent: function renderCustomClearComponent(_ref2) {
+        var clearText = _ref2.clearText,
+            isPopupOpened = _ref2.isPopupOpened,
+            handleClearAll = _ref2.handleClearAll;
+        return /*#__PURE__*/_react["default"].createElement("span", null, "".concat(clearText, " ").concat(isPopupOpened, " ").concat(_typeof(handleClearAll)));
+      }
+    }))),
+        asFragment = _render41.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomToggleIndicator as function', function () {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isReadOnly: true,
+      renderCustomToggleIndicator: function renderCustomToggleIndicator(_ref3) {
+        var togglePopup = _ref3.togglePopup,
+            isPopupOpened = _ref3.isPopupOpened,
+            isReadOnly = _ref3.isReadOnly,
+            isDisabled = _ref3.isDisabled;
+        return /*#__PURE__*/_react["default"].createElement("span", null, "".concat(_typeof(togglePopup), " ").concat(isPopupOpened, " ").concat(isReadOnly, " ").concat(isDisabled));
+      }
+    }))),
+        asFragment = _render42.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomToggleIndicator as node', function () {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      renderCustomToggleIndicator: /*#__PURE__*/_react["default"].createElement("span", null, "Toggle indicator")
+    }))),
+        asFragment = _render43.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // open menu
+
+  test('Render with isPopupOpen and isPopupReady', function () {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render44.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isDisabled', function () {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDisabled: true
+    }))),
+        asFragment = _render45.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isReadOnly', function () {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isReadOnly: true
+    }))),
+        asFragment = _render46.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and disableAction', function () {
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      disableAction: true
+    }))),
+        asFragment = _render47.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and selectedOptions', function () {
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1']
+    }))),
+        asFragment = _render48.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, selectedOptions and keepSelectedOptions', function () {
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      keepSelectedOptions: true
+    }))),
+        asFragment = _render49.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and disabledOptions', function () {
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      disabledOptions: ['option2']
+    }))),
+        asFragment = _render50.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and secondaryField', function () {
+    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        id: 'option1',
+        text: 'Option 1',
+        secondary: 'Secondary 1'
+      }],
+      secondaryField: "secondary"
+    }))),
+        asFragment = _render51.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, valueField and textField', function () {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        key: 'k1',
+        label: 'Label 1'
+      }, {
+        key: 'k2',
+        label: 'Label 2'
+      }],
+      valueField: "key",
+      textField: "label"
+    }))),
+        asFragment = _render52.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and string options', function () {
+    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: ['String 1', 'String 2']
+    }))),
+        asFragment = _render53.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and customProps SuggestionsProps', function () {
+    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      customProps: {
+        SuggestionsProps: {
+          needTick: true,
+          listItemSize: 'small'
+        }
+      },
+      selectedOptions: ['option1'],
+      keepSelectedOptions: true
+    }))),
+        asFragment = _render54.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isVirtualizerEnabled', function () {
+    var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isVirtualizerEnabled: true
+    }))),
+        asFragment = _render55.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all header
+
+  test('Render with isPopupOpen, isPopupReady and needSelectAll', function () {
+    var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true
+    }))),
+        asFragment = _render56.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and selectAllText', function () {
+    var _render57 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      selectAllText: "Select every option"
+    }))),
+        asFragment = _render57.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all is hidden once a limit is set
+
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and limit', function () {
+    var _render58 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      limit: 3
+    }))),
+        asFragment = _render58.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // limit
+
+  test('Render with isPopupOpen, isPopupReady, limit reached and default limit message', function () {
+    var _render59 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1
+    }))),
+        asFragment = _render59.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, limit reached and i18nKeys limitReachedMessage', function () {
+    var _render60 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1,
+      i18nKeys: {
+        limitReachedMessage: 'Only one allowed'
+      }
+    }))),
+        asFragment = _render60.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // loaders
+
+  test('Render with isPopupOpen, isPopupReady and isLoading', function () {
+    var _render61 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true
+    }))),
+        asFragment = _render61.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isLoading and shouldUseInternalLoader=false', function () {
+    var _render62 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true,
+      shouldUseInternalLoader: false
+    }))),
+        asFragment = _render62.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isLoading, shouldUseInternalLoader=false and no options', function () {
+    var _render63 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true,
+      shouldUseInternalLoader: false
+    }))),
+        asFragment = _render63.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isSearching', function () {
+    var _render64 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true
+    }))),
+        asFragment = _render64.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isSearching and i18nKeys searchText', function () {
+    var _render65 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true,
+      i18nKeys: {
+        searchText: 'Looking for options'
+      }
+    }))),
+        asFragment = _render65.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isSearching and palette as dark', function () {
+    var _render66 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isSearching: true,
+      palette: "dark"
+    }))),
+        asFragment = _render66.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // empty states
+
+  test('Render with isPopupOpen, isPopupReady and no options', function () {
+    var _render67 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render67.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and emptyMessage', function () {
+    var _render68 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      emptyMessage: "Nothing to select"
+    }))),
+        asFragment = _render68.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and i18nKeys emptyText', function () {
+    var _render69 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      i18nKeys: {
+        emptyText: 'Empty from i18n'
+      }
+    }))),
+        asFragment = _render69.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and renderCustomEmptyState', function () {
+    var _render70 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomEmptyState: function renderCustomEmptyState() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Custom empty state");
+      }
+    }))),
+        asFragment = _render70.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and all options selected', function () {
+    var _render71 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3']
+    }))),
+        asFragment = _render71.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, all options selected and noMoreOptionsMessage', function () {
+    var _render72 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3'],
+      noMoreOptionsMessage: "No more to pick"
+    }))),
+        asFragment = _render72.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // typed search
+
+  test('Render with isPopupOpen, isPopupReady and search text matching an option', function () {
+    var _render73 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render73.asFragment,
+        container = _render73.container;
+
+    _react2.fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'Option 2'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and search text matching no option', function () {
+    var _render74 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render74.asFragment,
+        container = _render74.container;
+
+    _react2.fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text matching no option and searchEmptyMessage', function () {
+    var _render75 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      searchEmptyMessage: "No matches found"
+    }))),
+        asFragment = _render75.asFragment,
+        container = _render75.container;
+
+    _react2.fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text and needLocalSearch=false', function () {
+    var _render76 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needLocalSearch: false
+    }))),
+        asFragment = _render76.asFragment,
+        container = _render76.container;
+
+    _react2.fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // drop box
+
+  test.each(['medium', 'large'])('Render with isPopupOpen, isPopupReady and dropBoxSize as %s', function (dropBoxSize) {
+    var _render77 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dropBoxSize: dropBoxSize
+    }))),
+        asFragment = _render77.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and boxSize as medium', function () {
+    var _render78 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      boxSize: "medium"
+    }))),
+        asFragment = _render78.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and palette as dark', function () {
+    var _render79 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      palette: "dark"
+    }))),
+        asFragment = _render79.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isAnimate=false', function () {
+    var _render80 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isAnimate: false
+    }))),
+        asFragment = _render80.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and animationStyle as default', function () {
+    var _render81 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      animationStyle: "default"
+    }))),
+        asFragment = _render81.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isBoxPaddingNeed=false', function () {
+    var _render82 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isBoxPaddingNeed: false
+    }))),
+        asFragment = _render82.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and getFooter', function () {
+    var _render83 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      getFooter: function getFooter() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Footer content");
+      }
+    }))),
+        asFragment = _render83.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and dataId', function () {
+    var _render84 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dataId: "multi-select-dataId"
+    }))),
+        asFragment = _render84.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });