@zohodesk/components 1.6.32 → 1.6.34

package/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

@@ -9,10 +9,223 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('ResponsiveDropBox', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // isActive defaults to false; closed state renders an empty DocumentFragment
+
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
+  }); // all cases below use isActive (activation-gated; portal renders to baseElement)
+
+  var sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge']; // 'default' is the default animationStyle; only non-default values tested
+
+  var animationStyles = ['bounce', 'fadeIn', 'scaleIn']; // 'bottomLeft' is the default boxPosition; all other positions tested
+
+  var boxPositions = ['bottomRight', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter'];
+  test('Render with isActive', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true
+    })),
+        baseElement = _render2.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with children', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Drop box content"))),
+        baseElement = _render3.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with alignBox as row', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      alignBox: "row"
+    })),
+        baseElement = _render4.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isAnimate', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isAnimate: true
+    })),
+        baseElement = _render5.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isArrow=false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isArrow: false
+    })),
+        baseElement = _render6.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with palette as dark', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      palette: "dark"
+    })),
+        baseElement = _render7.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isPadding=false', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isPadding: false
+    })),
+        baseElement = _render8.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isRadius=false', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isRadius: false
+    })),
+        baseElement = _render9.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isBoxPaddingNeed', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isBoxPaddingNeed: true
+    })),
+        baseElement = _render10.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      dataId: "responsive-drop-box",
+      dataSelectorId: "responsive-drop-box"
+    })),
+        baseElement = _render11.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with tourId', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      tourId: "responsive-drop-box-tour"
+    })),
+        baseElement = _render12.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      htmlId: "responsive-drop-box-html-id"
+    })),
+        baseElement = _render13.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with a11y role and ariaLabelledby', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      a11y: {
+        role: 'dialog',
+        ariaLabelledby: 'drop-box-label'
+      }
+    })),
+        baseElement = _render14.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customDropBox', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      customClass: {
+        customDropBox: 'custom-drop-box'
+      }
+    })),
+        baseElement = _render15.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customMobileDropBox', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      customClass: {
+        customMobileDropBox: 'custom-mobile-drop-box'
+      }
+    })),
+        baseElement = _render16.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customDropBoxWrap', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      customClass: {
+        customDropBoxWrap: 'custom-drop-box-wrap'
+      }
+    })),
+        baseElement = _render17.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customMobileDropBoxWrap', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      customClass: {
+        customMobileDropBoxWrap: 'custom-mobile-drop-box-wrap'
+      }
+    })),
+        baseElement = _render18.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customResponsiveContainer', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      customClass: {
+        customResponsiveContainer: 'custom-responsive-container'
+      }
+    })),
+        baseElement = _render19.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      size: size
+    })),
+        baseElement = _render20.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  }); // animationStyle is only observable when isAnimate is set
+
+  test.each(animationStyles)('Render with isAnimate and animationStyle as %s', function (animationStyle) {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      isAnimate: true,
+      animationStyle: animationStyle
+    })),
+        baseElement = _render21.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test.each(boxPositions)('Render with boxPosition as %s', function (boxPosition) {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      isActive: true,
+      boxPosition: boxPosition
+    })),
+        baseElement = _render22.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
   });
 });