@zohodesk/components 1.6.32 → 1.6.34

package/lib/PopOver/__tests__/PopOver.spec.js

@@ -1,18 +1,167 @@
 "use strict";
 
+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); }
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _PopOver = _interopRequireDefault(require("../PopOver"));
+var _PopOver = _interopRequireWildcard(require("../PopOver"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// PopOver clones props into its children, so cases use the real PopOverTarget and PopOverContainer
+var renderPopOver = function renderPopOver(popOverProps, containerProps) {
+  return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PopOver["default"], popOverProps, /*#__PURE__*/_react["default"].createElement(_PopOver.PopOverTarget, null, "Target"), /*#__PURE__*/_react["default"].createElement(_PopOver.PopOverContainer, containerProps, "Container content")));
+};
+
 describe('PopOver', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PopOver["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Test"))),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge']; // mid is the default arrow position for the default box position, so it is not repeated here
+
+  var arrowPositions = ['start', 'end'];
+  var animationStyles = ['bounce', 'fadeIn', 'scaleIn'];
+  test('Render with target and container', function () {
+    var _renderPopOver = renderPopOver(),
+        asFragment = _renderPopOver.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with only target', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PopOver["default"], null, /*#__PURE__*/_react["default"].createElement(_PopOver.PopOverTarget, null, "Target"))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen', function () {
+    var _renderPopOver2 = renderPopOver({
+      isPopupOpen: true
+    }),
+        asFragment = _renderPopOver2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the animation class is applied only while the container is active
+
+  test('Render with isPopupOpen and isAnimate', function () {
+    var _renderPopOver3 = renderPopOver({
+      isPopupOpen: true,
+      isAnimate: true
+    }),
+        asFragment = _renderPopOver3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate without isPopupOpen', function () {
+    var _renderPopOver4 = renderPopOver({
+      isAnimate: true
+    }),
+        asFragment = _renderPopOver4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isArrow', function () {
+    var _renderPopOver5 = renderPopOver({
+      isArrow: true
+    }),
+        asFragment = _renderPopOver5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and isArrow', function () {
+    var _renderPopOver6 = renderPopOver({
+      isPopupOpen: true,
+      isArrow: true
+    }),
+        asFragment = _renderPopOver6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(arrowPositions)('Render with isArrow and arrowPosition as %s', function (arrowPosition) {
+    var _renderPopOver7 = renderPopOver({
+      isPopupOpen: true,
+      isArrow: true,
+      arrowPosition: arrowPosition
+    }),
+        asFragment = _renderPopOver7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _renderPopOver8 = renderPopOver({
+      size: size
+    }),
+        asFragment = _renderPopOver8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // animationStyle is read from PopOverContainer directly; PopOver does not forward it
+
+  test.each(animationStyles)('Render with isPopupOpen, isAnimate and animationStyle as %s', function (animationStyle) {
+    var _renderPopOver9 = renderPopOver({
+      isPopupOpen: true,
+      isAnimate: true
+    }, {
+      animationStyle: animationStyle
+    }),
+        asFragment = _renderPopOver9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // remConvert divides by the body font size, which jsdom leaves empty; without it offsets become NaN and are dropped
+
+  describe('with a body font size', function () {
+    beforeEach(function () {
+      document.body.style.fontSize = '16px';
+    });
+    afterEach(function () {
+      document.body.style.fontSize = '';
+    });
+    test('Render with right, left, top and bottom', function () {
+      var _renderPopOver10 = renderPopOver({
+        right: '10',
+        left: '20',
+        top: '30',
+        bottom: '40'
+      }),
+          asFragment = _renderPopOver10.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('Render with isArrow and arrowRight, arrowLeft, arrowTop and arrowBottom', function () {
+      var _renderPopOver11 = renderPopOver({
+        isArrow: true,
+        arrowRight: '10',
+        arrowLeft: '20',
+        arrowTop: '30',
+        arrowBottom: '40'
+      }),
+          asFragment = _renderPopOver11.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('Render with arrowTop without isArrow', function () {
+      var _renderPopOver12 = renderPopOver({
+        arrowTop: '30'
+      }),
+          asFragment = _renderPopOver12.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('Render with multiple children in the target and container', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PopOver["default"], null, /*#__PURE__*/_react["default"].createElement(_PopOver.PopOverTarget, null, /*#__PURE__*/_react["default"].createElement("span", null, "Target one"), /*#__PURE__*/_react["default"].createElement("span", null, "Target two")), /*#__PURE__*/_react["default"].createElement(_PopOver.PopOverContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, "Container one"), /*#__PURE__*/_react["default"].createElement("span", null, "Container two")))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });