@zohodesk/components 1.6.31 → 1.6.34

package/es/PopOver/__tests__/PopOver.spec.js

@@ -1,11 +1,150 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import PopOver from "../PopOver";
+import { render, cleanup } from '@testing-library/react';
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver"; // PopOver clones props into its children, so cases use the real PopOverTarget and PopOverContainer
+
+const renderPopOver = (popOverProps, containerProps) => render( /*#__PURE__*/React.createElement(PopOver, popOverProps, /*#__PURE__*/React.createElement(PopOverTarget, null, "Target"), /*#__PURE__*/React.createElement(PopOverContainer, containerProps, "Container content")));
+
 describe('PopOver', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(PopOver, null, /*#__PURE__*/React.createElement("div", null, "Test")));
     expect(asFragment()).toMatchSnapshot();
   });
+  const 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
+
+  const arrowPositions = ['start', 'end'];
+  const animationStyles = ['bounce', 'fadeIn', 'scaleIn'];
+  test('Render with target and container', () => {
+    const {
+      asFragment
+    } = renderPopOver();
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with only target', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(PopOver, null, /*#__PURE__*/React.createElement(PopOverTarget, null, "Target")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen', () => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isPopupOpen: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  }); // the animation class is applied only while the container is active
+
+  test('Render with isPopupOpen and isAnimate', () => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isPopupOpen: true,
+      isAnimate: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate without isPopupOpen', () => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isAnimate: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isArrow', () => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isArrow: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and isArrow', () => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isPopupOpen: true,
+      isArrow: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(arrowPositions)('Render with isArrow and arrowPosition as %s', arrowPosition => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isPopupOpen: true,
+      isArrow: true,
+      arrowPosition
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = renderPopOver({
+      size
+    });
+    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', animationStyle => {
+    const {
+      asFragment
+    } = renderPopOver({
+      isPopupOpen: true,
+      isAnimate: true
+    }, {
+      animationStyle
+    });
+    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', () => {
+    beforeEach(() => {
+      document.body.style.fontSize = '16px';
+    });
+    afterEach(() => {
+      document.body.style.fontSize = '';
+    });
+    test('Render with right, left, top and bottom', () => {
+      const {
+        asFragment
+      } = renderPopOver({
+        right: '10',
+        left: '20',
+        top: '30',
+        bottom: '40'
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('Render with isArrow and arrowRight, arrowLeft, arrowTop and arrowBottom', () => {
+      const {
+        asFragment
+      } = renderPopOver({
+        isArrow: true,
+        arrowRight: '10',
+        arrowLeft: '20',
+        arrowTop: '30',
+        arrowBottom: '40'
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('Render with arrowTop without isArrow', () => {
+      const {
+        asFragment
+      } = renderPopOver({
+        arrowTop: '30'
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('Render with multiple children in the target and container', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(PopOver, null, /*#__PURE__*/React.createElement(PopOverTarget, null, /*#__PURE__*/React.createElement("span", null, "Target one"), /*#__PURE__*/React.createElement("span", null, "Target two")), /*#__PURE__*/React.createElement(PopOverContainer, null, /*#__PURE__*/React.createElement("span", null, "Container one"), /*#__PURE__*/React.createElement("span", null, "Container two"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });