@zohodesk/components 1.6.31 → 1.6.34

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

@@ -8,6 +8,38 @@ var _Suggestions = _interopRequireDefault(require("../Suggestions"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 sampleData = [{
   "id": 2,
   "value": "text2",
@@ -56,6 +88,9 @@ var sampleData = [{
   "optionType": "default"
 }];
 describe('Suggestions', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
       suggestions: []
@@ -89,4 +124,344 @@ describe('Suggestions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var items = [{
+    id: 1,
+    value: 'Option 1'
+  }, {
+    id: 2,
+    value: 'Option 2'
+  }, {
+    id: 3,
+    value: 'Option 3'
+  }];
+  test('Render with suggestions', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with activeId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      activeId: 2
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      selectedOptions: [1, 3]
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions and needTick', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      selectedOptions: [1, 3],
+      needTick: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hoverOption', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      hoverOption: 1
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hoverId', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      hoverId: 3
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      needBorder: false
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'large'])('Render with listItemSize as %s', function (listItemSize) {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      listItemSize: listItemSize
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      palette: "dark"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        secondaryValue: 'Secondary value'
+      }]
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        secondaryValue: 'Secondary value'
+      }],
+      needMultiLineText: true
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a disabled suggestion', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [items[0], _objectSpread(_objectSpread({}, items[1]), {}, {
+        isDisabled: true
+      }), items[2]]
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with listItemProps', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [_objectSpread(_objectSpread({}, items[0]), {}, {
+        listItemProps: {
+          'data-custom-attr': 'true'
+        }
+      })]
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with listItemCustomProps customClass', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [_objectSpread(_objectSpread({}, items[0]), {}, {
+        listItemCustomProps: {
+          customClass: {
+            customListItem: 'custom-list-item'
+          }
+        }
+      })]
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar and avatarPalette as secondary', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }],
+      avatarPalette: "secondary"
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-info',
+        iconSize: '12'
+      }]
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with mixed option types', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1'
+      }, {
+        id: 2,
+        value: 'Option 2',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }, {
+        id: 3,
+        value: 'Option 3',
+        optionType: 'icon',
+        icon: 'ZD-GN-agent'
+      }]
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderBeforeChildren as node', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [items[0]],
+      renderBeforeChildren: /*#__PURE__*/_react["default"].createElement("span", null, "Before children")
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // renderBeforeChildren reaches only the default list item, not the avatar item
+
+  test('Render with renderBeforeChildren and optionType as avatar', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }],
+      renderBeforeChildren: /*#__PURE__*/_react["default"].createElement("span", null, "Before children")
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit not reached', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      selectedOptions: [1],
+      limit: 3
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit reached', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      selectedOptions: [1, 2],
+      limit: 2
+    })),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit reached and limitReachedMessage', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      selectedOptions: [1, 2],
+      limit: 2,
+      limitReachedMessage: "You can select only two"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y ariaParentRole and ariaMultiselectable', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      a11y: {
+        ariaParentRole: 'listbox',
+        ariaMultiselectable: true
+      }
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      className: "custom-suggestions"
+    })),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass containerClass', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      customClass: {
+        containerClass: 'custom-container'
+      }
+    })),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      dataId: "suggestions-dataId"
+    })),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      htmlId: "suggestions-htmlId"
+    })),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isVirtualizerEnabled', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      isVirtualizerEnabled: true,
+      dataId: "suggestions-dataId"
+    })),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isVirtualizerEnabled and selectedOptions', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: items,
+      isVirtualizerEnabled: true,
+      selectedOptions: [2],
+      dataId: "suggestions-dataId"
+    })),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });