@zohodesk/components 1.6.31 → 1.6.34

package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

@@ -1,11 +1,222 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ResponsiveDropBox from "../ResponsiveDropBox";
 describe('ResponsiveDropBox', () => {
+  afterEach(() => cleanup()); // isActive defaults to false; closed state renders an empty DocumentFragment
+
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, null));
     expect(asFragment()).toMatchSnapshot();
+  }); // all cases below use isActive (activation-gated; portal renders to baseElement)
+
+  const sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge']; // 'default' is the default animationStyle; only non-default values tested
+
+  const animationStyles = ['bounce', 'fadeIn', 'scaleIn']; // 'bottomLeft' is the default boxPosition; all other positions tested
+
+  const boxPositions = ['bottomRight', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter'];
+  test('Render with isActive', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with children', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Drop box content")));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with alignBox as row', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      alignBox: "row"
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isAnimate', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isAnimate: true
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isArrow=false', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isArrow: false
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      palette: "dark"
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isPadding=false', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isPadding: false
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isRadius=false', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isRadius: false
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with isBoxPaddingNeed', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isBoxPaddingNeed: true
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      dataId: "responsive-drop-box",
+      dataSelectorId: "responsive-drop-box"
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with tourId', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      tourId: "responsive-drop-box-tour"
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      htmlId: "responsive-drop-box-html-id"
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with a11y role and ariaLabelledby', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      a11y: {
+        role: 'dialog',
+        ariaLabelledby: 'drop-box-label'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customDropBox', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      customClass: {
+        customDropBox: 'custom-drop-box'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customMobileDropBox', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      customClass: {
+        customMobileDropBox: 'custom-mobile-drop-box'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customDropBoxWrap', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      customClass: {
+        customDropBoxWrap: 'custom-drop-box-wrap'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customMobileDropBoxWrap', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      customClass: {
+        customMobileDropBoxWrap: 'custom-mobile-drop-box-wrap'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('Render with customClass customResponsiveContainer', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      customClass: {
+        customResponsiveContainer: 'custom-responsive-container'
+      }
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      size: size
+    }));
+    expect(baseElement).toMatchSnapshot();
+  }); // animationStyle is only observable when isAnimate is set
+
+  test.each(animationStyles)('Render with isAnimate and animationStyle as %s', animationStyle => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      isAnimate: true,
+      animationStyle: animationStyle
+    }));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test.each(boxPositions)('Render with boxPosition as %s', boxPosition => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      isActive: true,
+      boxPosition: boxPosition
+    }));
+    expect(baseElement).toMatchSnapshot();
   });
 });