@zohodesk/components 1.6.31 → 1.6.34

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

@@ -8,7 +8,18 @@ var _SelectedOptions = _interopRequireDefault(require("../SelectedOptions"));
 
 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 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; }
+
 describe('SelectedOptions', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
       selectedOptions: []
@@ -45,6 +56,300 @@ describe('SelectedOptions', function () {
     })),
         asFragment = _render3.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  }); // highLightedSelectOptions is read for every option, so each case below supplies it
+
+  var options = [{
+    id: 1,
+    value: 'Option 1'
+  }, {
+    id: 2,
+    value: 'Option 2'
+  }, {
+    id: 3,
+    value: 'Option 3'
+  }];
+  test('Render with selectedOptions', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highLightedSelectOptions', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [2],
+      selectedOptions: options
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit as 2', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      limit: 2
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn()
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and isReadOnly', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn(),
+      isReadOnly: true
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and isDisabled', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn(),
+      isDisabled: true
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and a disabled option', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [options[0], _objectSpread(_objectSpread({}, options[1]), {}, {
+        isDisabled: true
+      }), options[2]],
+      onRemove: jest.fn()
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onSelect', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onSelect: jest.fn()
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with size as xmedium', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      size: "xmedium"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      palette: "dark"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      dataId: "selected-options-dataId"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar and highLightedSelectOptions', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-info',
+        iconSize: '12'
+      }]
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon and highLightedSelectOptions', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-agent'
+      }]
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with mixed option types', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        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-info'
+      }]
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the custom renderer receives the option state, so it prints values that would otherwise be invisible
+
+  test('Render with renderCustomSelectedValue as function receiving state', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      size: "xmedium",
+      palette: "dark",
+      renderCustomSelectedValue: function renderCustomSelectedValue(_ref) {
+        var isActive = _ref.isActive,
+            isReadOnly = _ref.isReadOnly,
+            isDisabled = _ref.isDisabled,
+            size = _ref.size,
+            palette = _ref.palette,
+            option = _ref.option;
+        return /*#__PURE__*/_react["default"].createElement("span", null, "".concat(option.value, " active:").concat(isActive, " readOnly:").concat(isReadOnly, " disabled:").concat(isDisabled, " size:").concat(size, " palette:").concat(palette));
+      }
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as function, isReadOnly and onRemove', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      isReadOnly: true,
+      onRemove: jest.fn(),
+      renderCustomSelectedValue: function renderCustomSelectedValue(_ref2) {
+        var isReadOnly = _ref2.isReadOnly,
+            onRemove = _ref2.onRemove;
+        return /*#__PURE__*/_react["default"].createElement("span", null, "readOnly:".concat(isReadOnly, " onRemove:").concat(_typeof(onRemove)));
+      }
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as function, isPopupOpen and isPopupReady', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomSelectedValue: function renderCustomSelectedValue(_ref3) {
+        var isPopupOpen = _ref3.isPopupOpen,
+            isPopupReady = _ref3.isPopupReady;
+        return /*#__PURE__*/_react["default"].createElement("span", null, "open:".concat(isPopupOpen, " ready:").concat(isPopupReady));
+      }
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as node', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: /*#__PURE__*/_react["default"].createElement("span", null, "Custom node")
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the custom renderer applies only to options of type custom
+
+  test('Render with renderCustomSelectedValue and default option types', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Custom value");
+      }
+    })),
+        asFragment = _render24.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });