npm - @zohodesk/components - Versions diffs - 1.0.0-temp-199 → 1.0.0-temp-200 - Mend

@zohodesk/components 1.0.0-temp-199 → 1.0.0-temp-200

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap ADDED Viewed

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`ListItemWithRadio rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-checked="false"
+        aria-hidden="true"
+        aria-readonly="false"
+        class="container  pointer hoverEfffect   inflex rowdir both"
+        data-id="RadioComp"
+        data-selector-id="container"
+        data-test-id="RadioComp"
+        role="radio"
+        tabindex="-1"
+      >
+        <div
+          class="radio
+            hoverprimary medium filled centerPathprimary  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            type="hidden"
+            value=""
+          />
+          <label
+            class="radioLabel pointer"
+          >
+            <svg
+              viewBox="0 0 40 40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                class="rdBox"
+                cx="20"
+                cy="20"
+                r="19"
+              />
+            </svg>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/lib/Modal/__tests__/Modal.spec.js ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Modal = _interopRequireDefault(require("../Modal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('Modal', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": "testPortal"
+    }), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+      portalId: "testPortal"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Modal Div Check")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Modal outer div check"))))),
+        baseElement = _render.baseElement;
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/lib/Modal/__tests__/__snapshots__/Modal.spec.js.snap ADDED Viewed

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Modal rendering the defult props 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        data-portal="testPortal"
+      >
+        <div>
+          Modal Div Check
+        </div>
+      </div>
+      <div />
+    </div>
+  </div>
+  <div
+    class="container"
+    data-portal="CPortal1"
+  >
+    <div>
+      Modal outer div check
+    </div>
+  </div>
+</body>
+`;

package/lib/MultiSelect/AdvancedGroupMultiSelect.js CHANGED Viewed

@@ -53,8 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -962,9 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props8.a11y,
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete,
-          customProps = _this$props8.customProps;
-      var suggestionsProps = customProps.suggestionsProps;
+          autoComplete = _this$props8.autoComplete;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1017,7 +1013,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
-        isGroupSelect: true
+        isGroupSelect: true,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1088,7 +1085,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             role: 'listbox',
             ariaMultiselectable: true
           },
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1120,7 +1118,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1131,8 +1129,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             listItemSize: listItemSize,
             a11y: {
               role: 'option'
-            }
-          }, suggestionsProps)));
+            },
+            dataId: "".concat(dataId, "_Options")
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/AdvancedMultiSelect.js CHANGED Viewed

@@ -494,7 +494,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         isReadOnly: isReadOnly,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
-        onSelect: this.handleClickSelectedOption
+        onSelect: this.handleClickSelectedOption,
+        dataId: "".concat(dataIdMultiSelectComp, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -503,7 +504,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
         adjust: true,
-        shrink: true
+        shrink: true,
+        dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -599,9 +602,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'option'
           }
-        }, SuggestionsProps, {
-          needMultiLineText: true
-        })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/MultiSelect/MobileHeader/__tests__/MobileHeader.spec.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MobileHeader = _interopRequireDefault(require("../MobileHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MobileHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap ADDED Viewed

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`MobileHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="header flex rowdir alignBetween vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="cardHeading grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button
+          class="buttonText bold plainprimary medium"
+          data-id="buttonComp"
+          data-selector-id="button"
+          data-test-id="buttonComp"
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -57,8 +57,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -980,7 +978,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
         size: size,
-        palette: palette
+        palette: palette,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1070,10 +1069,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+          needSelectAll = _this$props15.needSelectAll;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1119,7 +1115,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         size: boxSize,
         alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
+        isResponsivePadding: getFooter ? false : true,
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1145,7 +1142,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1158,7 +1155,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/MultiSelectWithAvatar.js CHANGED Viewed

@@ -186,7 +186,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           role: 'listbox'
         },
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/MultiSelect/SelectedOptions.js CHANGED Viewed

@@ -66,7 +66,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onRemove = _this$props.onRemove,
           onSelect = _this$props.onSelect,
           size = _this$props.size,
-          palette = _this$props.palette;
+          palette = _this$props.palette,
+          dataId = _this$props.dataId;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -75,7 +76,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             icon = option.icon,
             optionType = option.optionType,
             iconSize = option.iconSize,
-            isDisabled = option.isDisabled;
+            isDisabled = option.isDisabled,
+            dataId = option.dataId;
         var commonProps = {
           disabled: isDisabled,
           onRemove: isDisabled || isReadOnly ? null : onRemove,
@@ -91,7 +93,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "photoTag")
+            key: "".concat(id, "photoTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             hasAvatar: true,
@@ -100,7 +103,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "iconTag")
+            key: "".concat(id, "iconTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             iconName: icon,
@@ -110,7 +114,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-          key: "".concat(id, "tag")
+          key: "".concat(id, "tag"),
+          dataId: dataId
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0
         })));

package/lib/MultiSelect/SelectedOptions.module.css CHANGED Viewed

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100% ;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
+.tag {
+  max-width: 100% ;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}

package/lib/MultiSelect/Suggestions.js CHANGED Viewed

@@ -83,8 +83,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y,
-          needMultiLineText = _this$props.needMultiLineText;
+          a11y = _this$props.a11y;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -144,8 +143,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -165,8 +163,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         }
@@ -185,8 +182,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         }));
       })));
     }

package/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _AdvancedGroupMultiSelect = _interopRequireDefault(require("../AdvancedGroupMultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('AdvancedGroupMultiSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedGroupMultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _AdvancedMultiSelect = _interopRequireDefault(require("../AdvancedMultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('AdvancedMultiSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedMultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/EmptyState.spec.js ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _EmptyState = _interopRequireDefault(require("../EmptyState"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('EmptyState', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      searchString: [],
+      suggestions: [],
+      options: []
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelect', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelectHeader = _interopRequireDefault(require("../MultiSelectHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelectHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [Option]
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic value', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      suggestions: [1, 2, 3]
+    })),
+        asFragment = _render2.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _MultiSelectWithAvatar = _interopRequireDefault(require("../MultiSelectWithAvatar"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('MultiSelectWithAvatar', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelectWithAvatar["default"], null)),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/MultiSelect/__tests__/SelectedOptions.spec.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _SelectedOptions = _interopRequireDefault(require("../SelectedOptions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('SelectedOptions', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      selectedOptions: []
+    })),
+        asFragment = _render.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic select options', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1'
+      }, {
+        value: 'SelectedObject2'
+      }, {
+        value: 'SelectedObject3'
+      }]
+    })),
+        asFragment = _render2.asFragment;
+    expect(asFragment()).toMatchSnapshot();
+  });
+});