@zohodesk/components 1.6.7 → 1.6.11-exp-6

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

@@ -0,0 +1,293 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+require("@testing-library/jest-dom");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
+describe('Button - Component', function () {
+  test('Should render with the basic set of default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["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")),
+        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"], {
+      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
+    })),
+        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
+    })),
+        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
+    })),
+        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
+    })),
+        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
+    })),
+        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"], {
+      status: "loading",
+      loaderPlacement: loaderPlacement
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconName and iconSize ', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      variant: "icon",
+      iconName: "ZD-plus",
+      iconSize: 20
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconPlacement ', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
+      iconPlacement: "right"
+    }, "Button")),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderIcon', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      variant: "icon",
+      renderIcon: function renderIcon() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "CustomIcon");
+      }
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderBefore and renderAfter', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      renderBefore: function renderBefore() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Before");
+      },
+      renderAfter: function renderAfter() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "After");
+      }
+    }, "Button")),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderLoader', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      status: "loading",
+      renderLoader: function renderLoader() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Loading...");
+      }
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderSuccess', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      status: "success",
+      renderSuccess: function renderSuccess() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Success!");
+      }
+    })),
+        asFragment = _render15.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"], {
+      type: type
+    })),
+        asFragment = _render16.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"], {
+      onClick: onClick
+    })),
+        getByRole = _render17.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"], {
+      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"], {
+      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"], {
+      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"], {
+      isDisabled: true,
+      disabledAppearance: style
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with title attribute', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      title: "Button test title"
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customClass to wrapper and text', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      customClass: {
+        wrapper: 'customButtonClass',
+        text: 'customTextClass'
+      }
+    }, "Button")),
+        asFragment = _render25.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"], {
+      variant: "iconWithText",
+      iconName: "check",
+      customProps: {
+        wrapper: {
+          'data-wrapper': 'wrapperProps'
+        },
+        text: {
+          'data-text': 'textProps'
+        },
+        icon: {
+          'data-icon': 'iconProps'
+        }
+      }
+    }, "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"], {
+      customId: "customIdValue",
+      testId: "testIdValue"
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply a11yAttributes to the button', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      a11yAttributes: {
+        'aria-label': 'Smart Button',
+        'aria-describedby': 'button-description'
+      }
+    }, "Button")),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});