@zohodesk/components 1.6.31 → 1.6.34

package/lib/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -9,6 +9,9 @@ var _ListItemWithIcon = _interopRequireDefault(require("../ListItemWithIcon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('ListItemWithIcon', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], null)),
         asFragment = _render.asFragment;
@@ -71,4 +74,305 @@ describe('ListItemWithIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var iconNames = ['ZD-GN-info', 'ZD-GN-agent'];
+  var palettes = ['primary', 'secondary', 'dark', 'danger']; // primary and danger add no class until active/highlight/autoHover, so danger would match primary here
+
+  var inertPalettes = ['primary', 'secondary', 'dark'];
+  var sizes = ['small', 'large'];
+  test.each(iconNames)('Render with iconName as %s', function (iconName) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconName: iconName
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // lhsAlignContent only reaches the Icon wrapper when iconName is set; the icon-less case is covered by the existing cases
+
+  test.each(['center', 'end'])('Render with iconName and lhsAlignContent as %s', function (lhsAlignContent) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconName: "ZD-GN-info",
+      lhsAlignContent: lhsAlignContent
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['start', 'end'])('Render with iconName and lhsJustifyContent as %s', function (lhsJustifyContent) {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconName: "ZD-GN-info",
+      lhsJustifyContent: lhsJustifyContent
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(inertPalettes)('Render with palette as %s', function (palette) {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      palette: palette
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      size: size
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with needTick and size as %s', function (size) {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      needTick: true,
+      size: size
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconName and iconSize', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconName: "ZD-GN-info",
+      iconSize: "14"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconName and iconClass', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconName: "ZD-GN-info",
+      iconClass: "custom-icon-class"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconClass without iconName', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      iconClass: "custom-icon-class"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      active: true
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active and needTick', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      active: true,
+      needTick: true
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needTick', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      needTick: true
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      highlight: true
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      autoHover: true
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      needBorder: false
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      title: "List item title"
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      isDisabled: true,
+      title: "List item title",
+      disableTitle: "Disabled title"
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    })),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      isLink: true,
+      href: "/list-item-with-icon"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink, href and target as self', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      isLink: true,
+      href: "/list-item-with-icon",
+      target: "self"
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      needMultiLineText: true
+    })),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    })),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with value containing an apostrophe', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      value: "Agent's list"
+    })),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with empty value and dataId', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      value: "",
+      dataId: "list-item-with-icon-dataId"
+    })),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      dataId: "list-item-with-icon-dataId"
+    })),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and iconName', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      dataId: "list-item-with-icon-dataId",
+      iconName: "ZD-GN-info"
+    })),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      dataSelectorId: "list-item-with-icon-dataSelectorId"
+    })),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customValueRightPlaceholderClass without renderValueRightPlaceholderNode', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      customValueRightPlaceholderClass: "customValueRightPlaceholderClass"
+    })),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      a11y: {
+        role: 'menuitem',
+        ariaSelected: true,
+        ariaLabel: 'Item label'
+      }
+    })),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y ariaHidden=false with active and needTick', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      active: true,
+      needTick: true,
+      a11y: {
+        ariaHidden: false
+      }
+    })),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      customClass: "custom-list-item"
+    })),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    })),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -9,6 +9,9 @@ var _ListItemWithRadio = _interopRequireDefault(require("../ListItemWithRadio"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('ListItemWithRadio', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], null)),
         asFragment = _render.asFragment;
@@ -73,4 +76,232 @@ describe('ListItemWithRadio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var palettes = ['primary', 'secondary', 'dark', 'danger']; // primary and danger add no class until active/highlight/autoHover, so danger would match primary here
+
+  var inertPalettes = ['primary', 'secondary', 'dark'];
+  var sizes = ['small', 'large'];
+  test.each(inertPalettes)('Render with palette as %s', function (palette) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      palette: palette
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      size: size
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['start', 'end'])('Render with lhsJustifyContent as %s', function (lhsJustifyContent) {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      lhsJustifyContent: lhsJustifyContent
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with active and palette as %s', function (palette) {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      active: true,
+      palette: palette
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // checked is observable only on the Radio child, so it is paired with the real Radio render
+
+  test('Render with checked', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      checked: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with checked and active', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      checked: true,
+      active: true
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      id: "list-item-with-radio-id"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      active: true
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      highlight: true
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      autoHover: true
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      needBorder: false
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      title: "List item title"
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title and disableTitle', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      title: "List item title",
+      disableTitle: "Disabled title"
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and disableTitle', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      isDisabled: true,
+      disableTitle: "Disabled title"
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      needMultiLineText: true
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with empty value', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      value: ""
+    })),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      dataId: "list-item-with-radio-dataId"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      dataSelectorId: "list-item-with-radio-dataSelectorId"
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      a11y: {
+        role: 'menuitem',
+        ariaSelected: true,
+        ariaLabel: 'Item label'
+      }
+    })),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customListItem', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      customClass: {
+        customListItem: 'custom-list-item'
+      }
+    })),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customRadio and customRadioWrap', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      customClass: {
+        customRadio: 'custom-radio',
+        customRadioWrap: 'custom-radio-wrap'
+      }
+    })),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    })),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });