@zohodesk/components 1.6.31 → 1.6.34

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

@@ -9,6 +9,9 @@ var _MultiSelectHeader = _interopRequireDefault(require("../MultiSelectHeader"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('MultiSelectHeader', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
       suggestions: [Option]
@@ -23,6 +26,54 @@ describe('MultiSelectHeader', function () {
     })),
         asFragment = _render2.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  }); // the select-all row appears only when there is more than one suggestion
+
+  var twoSuggestions = [{
+    id: 1,
+    value: 'Option 1'
+  }, {
+    id: 2,
+    value: 'Option 2'
+  }];
+  test('Render with no suggestions', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [],
+      selectAllText: "Select all"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with one suggestion and selectAllText', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1'
+      }],
+      selectAllText: "Select all"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two suggestions and selectAllText', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: twoSuggestions,
+      selectAllText: "Select all"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two suggestions, selectAllText and dataId', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: twoSuggestions,
+      selectAllText: "Select all",
+      dataId: "multi-select-header-dataId"
+    })),
+        asFragment = _render6.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -8,11 +8,508 @@ var _MultiSelectWithAvatar = _interopRequireDefault(require("../MultiSelectWithA
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
 describe('MultiSelectWithAvatar', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var avatarOptions = [{
+    id: 'option1',
+    text: 'Option 1',
+    photoURL: 'avatar1.png'
+  }, {
+    id: 'option2',
+    text: 'Option 2',
+    photoURL: 'avatar2.png'
+  }, {
+    id: 'option3',
+    text: 'Option 3',
+    photoURL: 'avatar3.png'
+  }]; // options, selectedOptions, onChange and emptyMessage are required without defaults
+
+  var getRequiredProps = function getRequiredProps() {
+    return {
+      emptyMessage: 'No options',
+      onChange: jest.fn(),
+      options: avatarOptions,
+      selectedOptions: []
+    };
+  };
+
+  var getSearchInput = function getSearchInput(container) {
+    return container.querySelector('[data-id="multiSelectWithAvatar_textBox"]');
+  };
+
+  test('Render with selectedOptions', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1']
+    }))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two selectedOptions', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2']
+    }))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions not in options', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['unknown']
+    }))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with imageField', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      options: [{
+        id: 'option1',
+        text: 'Option 1',
+        picture: 'picture1.png'
+      }],
+      selectedOptions: ['option1'],
+      imageField: "picture"
+    }))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      isReadOnly: true
+    }))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      isDisabled: true,
+      title: "Disabled title"
+    }))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disableAction', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      disableAction: true
+    }))),
+        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(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2', 'option3'],
+      limit: 2
+    }))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with size as xmedium', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1'],
+      size: "xmedium"
+    }))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      selectedOptions: ['option1', 'option2'],
+      palette: "dark"
+    }))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with placeHolder', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      placeHolder: "Select people"
+    }))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      dataId: "avatar-dataId"
+    }))),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      dataSelectorId: "avatar-selector"
+    }))),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      htmlId: "avatar-htmlId"
+    }))),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // open menu
+
+  test('Render with isPopupOpen and isPopupReady', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isDisabled', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDisabled: true
+    }))),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and selectedOptions', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1']
+    }))),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, selectedOptions and keepSelectedOptions', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      keepSelectedOptions: true
+    }))),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and disabledOptions', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      disabledOptions: ['option2']
+    }))),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and secondaryField', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        id: 'option1',
+        text: 'Option 1',
+        photoURL: 'avatar1.png',
+        secondary: 'Secondary 1'
+      }],
+      secondaryField: "secondary"
+    }))),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and imageField', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: [{
+        id: 'option1',
+        text: 'Option 1',
+        picture: 'picture1.png'
+      }],
+      imageField: "picture"
+    }))),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and customProps SuggestionsProps', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      customProps: {
+        SuggestionsProps: {
+          listItemSize: 'small',
+          avatarPalette: 'secondary'
+        }
+      }
+    }))),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and needSelectAll', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true
+    }))),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and selectAllText', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      selectAllText: "Select everyone"
+    }))),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all is hidden once a limit is set
+
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and limit', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      limit: 3
+    }))),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and limit reached', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1
+    }))),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, limit reached and i18nKeys limitReachedMessage', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1'],
+      limit: 1,
+      i18nKeys: {
+        limitReachedMessage: 'Only one allowed'
+      }
+    }))),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isLoading', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true
+    }))),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, isLoading and shouldUseInternalLoader=false', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isLoading: true,
+      shouldUseInternalLoader: false
+    }))),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and no options', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and emptyMessage', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      emptyMessage: "Nobody to select"
+    }))),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no options and renderCustomEmptyState', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      options: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomEmptyState: function renderCustomEmptyState() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Custom empty state");
+      }
+    }))),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and all options selected', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3']
+    }))),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, all options selected and noMoreOptionsMessage', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedOptions: ['option1', 'option2', 'option3'],
+      noMoreOptionsMessage: "No more people"
+    }))),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and search text matching an option', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render36.asFragment,
+        container = _render36.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 _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    }))),
+        asFragment = _render37.asFragment,
+        container = _render37.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 _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      searchEmptyMessage: "No matches found"
+    }))),
+        asFragment = _render38.asFragment,
+        container = _render38.container;
+
+    _react2.fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['medium', 'large'])('Render with isPopupOpen, isPopupReady and dropBoxSize as %s', function (dropBoxSize) {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dropBoxSize: dropBoxSize
+    }))),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and palette as dark', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      palette: "dark"
+    }))),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isAnimate=false', function () {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isAnimate: false
+    }))),
+        asFragment = _render41.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and animationStyle as default', function () {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      animationStyle: "default"
+    }))),
+        asFragment = _render42.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isBoxPaddingNeed=false', function () {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isBoxPaddingNeed: false
+    }))),
+        asFragment = _render43.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and dataId', function () {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dataId: "avatar-dataId"
+    }))),
+        asFragment = _render44.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });