@zohodesk/components 1.6.25 → 1.6.26

package/lib/v1/Button/__tests__/Button.spec.js

@@ -6,125 +6,153 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _index = _interopRequireDefault(require("../index"));
 
 require("@testing-library/jest-dom");
 
+var _constants = require("../constants");
+
+var _presets = require("../constants/presets");
+
 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); }
+
 afterEach(function () {
   (0, _react2.cleanup)();
 });
-describe('Button - Component', function () {
+describe('Button', function () {
   test('Should render with the basic set of default props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with children', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Click Me")),
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], null, "Click Me")),
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var palette = ['default', 'primary', 'secondary', 'danger', 'success'];
-  test.each(palette)('Should render palette of buttons - %s', function (palette) {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test.each(Object.values(_constants.PALETTE))('Should render palette of buttons - %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       palette: palette
     })),
         asFragment = _render3.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var bgAppearance = ['default', 'onHover', 'none'];
-  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', function (bg) {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      bgAppearance: bg
+  var appearanceCombos = [{
+    bg: true,
+    text: 'black'
+  }, {
+    border: true
+  }, {
+    text: true
+  }, {
+    bg: false,
+    border: true
+  }, {}];
+  test.each(appearanceCombos.map(function (combo) {
+    return [combo];
+  }))('Should render appearance of buttons - %o', function (appearance) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      palette: _constants.PALETTE.BRAND,
+      appearance: appearance
     })),
         asFragment = _render4.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var borderAppearance = ['default', 'onHover', 'none'];
-  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', function (border) {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      borderAppearance: border
+  test.each(appearanceCombos.map(function (combo) {
+    return [combo];
+  }))('Should render hoverAppearance of buttons - %o', function (appearance) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      palette: _constants.PALETTE.BRAND,
+      hoverAppearance: appearance
     })),
         asFragment = _render5.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var variant = ['text', 'icon', 'iconWithText'];
-  test.each(variant)('Should render variant of buttons - %s', function (variant) {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      variant: variant
+  test.each(appearanceCombos.map(function (combo) {
+    return [combo];
+  }))('Should render selectedAppearance of buttons - %o', function (appearance) {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      palette: _constants.PALETTE.BRAND,
+      isSelected: true,
+      selectedAppearance: appearance
     })),
         asFragment = _render6.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var size = ['small', 'medium', 'large', 'full'];
-  test.each(size)('Should render Sizes of buttons - %s', function (size) {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      size: size
+  test.each(Object.values(_constants.VARIANT))('Should render variant of buttons - %s', function (variant) {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      variant: variant
     })),
         asFragment = _render7.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var status = ['default', 'loading', 'success'];
-  test.each(status)('Should render Status of buttons - %s', function (status) {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      status: status
+  test.each(Object.values(_constants.SIZE))('Should render Sizes of buttons - %s', function (size) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      size: size
     })),
         asFragment = _render8.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var loaderPlacement = ['start', 'end', 'overlay'];
-  test.each(loaderPlacement)('Should render loaderPlacement of buttons - %s', function (loaderPlacement) {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test.each(Object.values(_constants.STATUS))('Should render Status of buttons - %s', function (status) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      status: status
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(Object.values(_constants.LOADER_PLACEMENT))('Should render loaderPlacement of buttons - %s', function (loaderPlacement) {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       status: "loading",
       loaderPlacement: loaderPlacement
     })),
-        asFragment = _render9.asFragment;
+        asFragment = _render10.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with iconName and iconSize ', function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test('Should render with iconName and iconSize', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "icon",
       iconName: "ZD-plus",
       iconSize: 20
     })),
-        asFragment = _render10.asFragment;
+        asFragment = _render11.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with iconPlacement ', function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test('Should render with iconPlacement', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "iconWithText",
       iconName: "ZD-plus",
-      iconPlacement: "right"
+      iconPlacement: "end"
     }, "Button")),
-        asFragment = _render11.asFragment;
+        asFragment = _render12.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with renderIcon', function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "icon",
       renderIcon: function renderIcon() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "CustomIcon");
       }
     })),
-        asFragment = _render12.asFragment;
+        asFragment = _render13.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with renderBefore and renderAfter', function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       renderBefore: function renderBefore() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "Before");
       },
@@ -132,115 +160,95 @@ describe('Button - Component', function () {
         return /*#__PURE__*/_react["default"].createElement("span", null, "After");
       }
     }, "Button")),
-        asFragment = _render13.asFragment;
+        asFragment = _render14.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with renderLoader', function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       status: "loading",
       renderLoader: function renderLoader() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "Loading...");
       }
     })),
-        asFragment = _render14.asFragment;
+        asFragment = _render15.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with renderSuccess', function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       status: "success",
       renderSuccess: function renderSuccess() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "Success!");
       }
     })),
-        asFragment = _render15.asFragment;
+        asFragment = _render16.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var type = ['button', 'submit', 'reset'];
-  test.each(type)('Should render type of buttons - %s', function (type) {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test.each(Object.values(_constants.BUTTON_TYPE))('Should render type of buttons - %s', function (type) {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       type: type
     })),
-        asFragment = _render16.asFragment;
+        asFragment = _render17.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should trigger onClick function', function () {
     var onClick = jest.fn();
 
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       onClick: onClick
     })),
-        getByRole = _render17.getByRole;
+        getByRole = _render18.getByRole;
 
     _userEvent["default"].click(getByRole('button'));
 
     expect(onClick).toHaveBeenCalled();
   });
   test('Should be disabled when isDisabled prop is true', function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       isDisabled: true
-    })),
-        asFragment = _render18.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render with readOnly style when isReadOnly prop is true', function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      isReadOnly: true
     })),
         asFragment = _render19.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with selected style when isSelected prop is true', function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       isSelected: true
     })),
         asFragment = _render20.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var shape = ['pill', 'rectangle', 'roundedRectangle'];
-  test.each(shape)('Should render shape of buttons - %s', function (shape) {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test.each(Object.values(_constants.SHAPE))('Should render shape of buttons - %s', function (shape) {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       shape: shape
     })),
         asFragment = _render21.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var paletteShade = ['default', 'lighter'];
-  test.each(paletteShade)('Should render paletteShade of buttons - %s', function (shade) {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      paletteShade: shade
-    })),
-        asFragment = _render22.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  var disabledAppearance = ['none', 'dull', 'strike'];
-  test.each(disabledAppearance)('Should render disabledAppearance of buttons - %s', function (style) {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  test.each(Object.values(_constants.DISABLED_APPEARANCE))('Should render disabledAppearance of buttons - %s', function (style) {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       isDisabled: true,
       disabledAppearance: style
     })),
-        asFragment = _render23.asFragment;
+        asFragment = _render22.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with title attribute', function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       title: "Button test title"
     })),
-        asFragment = _render24.asFragment;
+        asFragment = _render23.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should apply customClass to wrapper, text and icon', function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "iconWithText",
       iconName: "ZD-plus",
       customClass: {
@@ -249,18 +257,15 @@ describe('Button - Component', function () {
         icon: 'customIconClass'
       }
     }, "Button")),
-        asFragment = _render25.asFragment;
+        asFragment = _render24.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should apply customProps to wrapper, text and icon', function () {
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "iconWithText",
       iconName: "check",
       customProps: {
-        wrapper: {
-          'data-wrapper': 'wrapperProps'
-        },
         text: {
           'data-text': 'textProps'
         },
@@ -268,13 +273,28 @@ describe('Button - Component', function () {
           'data-icon': 'iconProps'
         }
       }
+    }, "Button")),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customAttributes to button elements', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      customAttributes: {
+        button: {
+          'data-wrapper': 'wrapperAttr'
+        },
+        text: {
+          'data-text': 'textAttr'
+        }
+      }
     }, "Button")),
         asFragment = _render26.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with customId and testId', function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       customId: "customIdValue",
       testId: "testIdValue"
     })),
@@ -283,7 +303,7 @@ describe('Button - Component', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should apply a11yAttributes to the button', function () {
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       a11yAttributes: {
         'aria-label': 'Smart Button',
         'aria-describedby': 'button-description'
@@ -293,4 +313,91 @@ describe('Button - Component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render renderBefore slot content in DOM', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      renderBefore: function renderBefore() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "BeforeSlot");
+      }
+    }, "Button")),
+        getByText = _render29.getByText;
+
+    expect(getByText('BeforeSlot')).toBeInTheDocument();
+  });
+  test('Should render renderAfter slot content in DOM', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      renderAfter: function renderAfter() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "AfterSlot");
+      }
+    }, "Button")),
+        getByText = _render30.getByText;
+
+    expect(getByText('AfterSlot')).toBeInTheDocument();
+  });
+  test('Should render renderIcon slot content in DOM', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      variant: "icon",
+      renderIcon: function renderIcon() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "IconSlot");
+      }
+    })),
+        getByText = _render31.getByText;
+
+    expect(getByText('IconSlot')).toBeInTheDocument();
+  });
+  test('Should not call onClick when button is disabled', function () {
+    var onClick = jest.fn();
+
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      isDisabled: true,
+      onClick: onClick
+    })),
+        getByRole = _render32.getByRole;
+
+    _userEvent["default"].click(getByRole('button'));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render loader overlay when status is loading and loaderPlacement is overlay', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      status: "loading",
+      loaderPlacement: "overlay"
+    })),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render success overlay when status is success and loaderPlacement is overlay', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      status: "success",
+      loaderPlacement: "overlay"
+    })),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with dataSelectorId', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      dataSelectorId: "selectorId"
+    })),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  describe('Presets', function () {
+    var presets = [['BRAND_GHOST', _presets.BRAND_GHOST], ['BRAND_TEXT_ONLY', _presets.BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', _presets.BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', _presets.SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', _presets.SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', _presets.SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', _presets.SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['SECONDARY_GHOST_CANCEL', _presets.SECONDARY_GHOST_CANCEL], ['BLACK_TEXT_BRAND_ONHOVER', _presets.BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', _presets.BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', _presets.BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', _presets.BRAND_TEXT_TINTED_DANGER_HOVER]];
+    test.each(presets)('Should render preset %s', function (_name, preset) {
+      var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], preset, "Button")),
+          asFragment = _render36.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test.each(presets)('Should render preset %s in selected state', function (_name, preset) {
+      var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], _extends({}, preset, {
+        isSelected: true
+      }), "Button")),
+          asFragment = _render37.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });