@zohodesk/components 1.6.31 → 1.6.34

package/lib/Tab/Tabs.module.css

@@ -133,8 +133,7 @@
 }
 
 .emptyStateTitle {
-  composes: d-text-center from global;
-  font-weight: var(--zd-fw-semibold);
+  composes: d-text-center d-font-semibold from global;
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/lib/Tab/__tests__/Tab.spec.js

@@ -9,10 +9,260 @@ var _Tab = _interopRequireDefault(require("../Tab"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('Tab', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var types = ['alpha', 'beta', 'delta'];
+  var titlePositions = ['top', 'bottom', 'right', 'left'];
+  var contentAligns = ['left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline'];
+  var contentAlignBoxes = ['column', 'row-reverse', 'column-reverse']; // the appearance classes are applied only when needAppearance is set, so type cases pair with it
+
+  test.each(types)('Render with needAppearance and type as %s', function (type) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      needAppearance: true,
+      type: type
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with isActive, needAppearance and type as %s', function (type) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true,
+      needAppearance: true,
+      type: type
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with isActive, needAppearance, needBorder and type as %s', function (type) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true,
+      type: type
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(titlePositions)('Render with title and titlePosition as %s', function (titlePosition) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "Tab title",
+      titlePosition: titlePosition
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(contentAligns)('Render with contentAlign as %s', function (contentAlign) {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      contentAlign: contentAlign
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(contentAlignBoxes)('Render with contentAlignBox as %s', function (contentAlignBox) {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      contentAlignBox: contentAlignBox
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      id: "tab1"
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with text', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      text: "Tab text"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children as string', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], null, "Tab child")),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children as element', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "Tab child"))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with text and children', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      text: "Tab text"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Tab child"))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tourId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      tourId: "tab-tour"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      dataId: "tab-dataId",
+      dataSelectorId: "tab-dataSelectorId"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      className: "custom-tab"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      style: {
+        width: '100px'
+      }
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isLink: true,
+      href: "/tab"
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink without href', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isLink: true
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with href without isLink', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      href: "/tab"
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with align as vertical', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      align: "vertical"
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      needAppearance: true
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needBorder', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      needAppearance: true,
+      needBorder: true
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive, needAppearance and needBorder', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true
+    })),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // isAnimate suppresses the active border, which only exists for a typed tab
+
+  test('Render with isActive, needAppearance, needBorder, isAnimate and type as alpha', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true,
+      isAnimate: true,
+      type: "alpha"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive and activeClass', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      isActive: true,
+      activeClass: "custom-active-tab"
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with activeClass without isActive', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      activeClass: "custom-active-tab"
+    })),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    })),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Tab/__tests__/TabContent.spec.js

@@ -9,10 +9,45 @@ var _TabContent = _interopRequireDefault(require("../TabContent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('TabContent', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Test"))),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var scrolls = ['vertical', 'horizontal', 'both', 'none'];
+  test('Render with no children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContent["default"], null)),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(scrolls)('Render with scroll as %s', function (scroll) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      scroll: scroll
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      id: "tab-content-id"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      dataId: "tab-content-dataId",
+      dataSelectorId: "tab-content-dataSelectorId"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Tab/__tests__/TabContentWrapper.spec.js

@@ -6,13 +6,89 @@ var _react2 = require("@testing-library/react");
 
 var _TabContentWrapper = _interopRequireDefault(require("../TabContentWrapper"));
 
+var _TabContent = _interopRequireDefault(require("../TabContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// the wrapper keeps only the child whose id equals selectedTab, so cases use real TabContent children
+var renderTabContentWrapper = function renderTabContentWrapper(props) {
+  return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], props, /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+    id: "page1"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 1 Content")), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+    id: "page2"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 2 Content"))));
+};
+
 describe('TabContentWrapper', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(['page1', 'page2'])('Render with selectedTab as %s', function (selectedTab) {
+    var _renderTabContentWrap = renderTabContentWrapper({
+      selectedTab: selectedTab
+    }),
+        asFragment = _renderTabContentWrap.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab not matching any child', function () {
+    var _renderTabContentWrap2 = renderTabContentWrapper({
+      selectedTab: 'page3'
+    }),
+        asFragment = _renderTabContentWrap2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], {
+      className: "custom-wrapper"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], {
+      style: {
+        height: '100px'
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], {
+      dataId: "tab-content-wrapper-dataId",
+      dataSelectorId: "tab-content-wrapper-dataSelectorId"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tagName as section', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], {
+      tagName: "section"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], {
+      a11y: {
+        role: 'region',
+        'aria-label': 'Tab panels'
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Tab/__tests__/TabWrapper.spec.js

@@ -6,13 +6,187 @@ var _react2 = require("@testing-library/react");
 
 var _TabWrapper = _interopRequireDefault(require("../TabWrapper"));
 
+var _Tabs = _interopRequireDefault(require("../Tabs"));
+
+var _Tab = _interopRequireDefault(require("../Tab"));
+
+var _TabContentWrapper = _interopRequireDefault(require("../TabContentWrapper"));
+
+var _TabContent = _interopRequireDefault(require("../TabContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// TabWrapper clones its props into its children, so cases use the real Tabs and TabContentWrapper;
+// isResponsive is off because Tabs would otherwise collapse every tab into the more menu at 0 width
+var renderTabWrapper = function renderTabWrapper(props) {
+  return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], props, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    isResponsive: false
+  }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    id: "page1",
+    text: "Page 1"
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    id: "page2",
+    text: "Page 2"
+  })), /*#__PURE__*/_react["default"].createElement(_TabContentWrapper["default"], null, /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+    id: "page1"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 1 Content")), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+    id: "page2"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 2 Content")))));
+};
+
 describe('TabWrapper', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Test"))),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
+  }); // vertical is the default align and beta/delta are non-default types
+
+  var aligns = ['horizontal', 'vertical-reverse', 'horizontal-reverse'];
+  var types = ['beta', 'delta'];
+  test('Render with tabs and content', function () {
+    var _renderTabWrapper = renderTabWrapper(),
+        asFragment = _renderTabWrapper.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['page1', 'page2'])('Render with defaultTab as %s', function (defaultTab) {
+    var _renderTabWrapper2 = renderTabWrapper({
+      defaultTab: defaultTab
+    }),
+        asFragment = _renderTabWrapper2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(aligns)('Render with defaultTab and align as %s', function (align) {
+    var _renderTabWrapper3 = renderTabWrapper({
+      defaultTab: 'page1',
+      align: align
+    }),
+        asFragment = _renderTabWrapper3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with defaultTab and type as %s', function (type) {
+    var _renderTabWrapper4 = renderTabWrapper({
+      defaultTab: 'page1',
+      type: type
+    }),
+        asFragment = _renderTabWrapper4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', function () {
+    var _renderTabWrapper5 = renderTabWrapper({
+      needBorder: false
+    }),
+        asFragment = _renderTabWrapper5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needPadding=false', function () {
+    var _renderTabWrapper6 = renderTabWrapper({
+      needPadding: false
+    }),
+        asFragment = _renderTabWrapper6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance=false', function () {
+    var _renderTabWrapper7 = renderTabWrapper({
+      defaultTab: 'page1',
+      needAppearance: false
+    }),
+        asFragment = _renderTabWrapper7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the highlight line renders only when isAnimate, needTabBorder and needAppearance are all set
+
+  test('Render with needTabBorder', function () {
+    var _renderTabWrapper8 = renderTabWrapper({
+      defaultTab: 'page1',
+      needTabBorder: true
+    }),
+        asFragment = _renderTabWrapper8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate and needTabBorder', function () {
+    var _renderTabWrapper9 = renderTabWrapper({
+      defaultTab: 'page1',
+      isAnimate: true,
+      needTabBorder: true
+    }),
+        asFragment = _renderTabWrapper9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate, needTabBorder and needAppearance=false', function () {
+    var _renderTabWrapper10 = renderTabWrapper({
+      defaultTab: 'page1',
+      isAnimate: true,
+      needTabBorder: true,
+      needAppearance: false
+    }),
+        asFragment = _renderTabWrapper10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _renderTabWrapper11 = renderTabWrapper({
+      dataId: 'tab-wrapper-dataId',
+      dataSelectorId: 'tab-wrapper-dataSelectorId'
+    }),
+        asFragment = _renderTabWrapper11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with only tabs', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
+      defaultTab: "page1"
+    }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      isResponsive: false
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      id: "page1",
+      text: "Page 1"
+    })))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // hookToDisableInternalState only differs from the default after a selection, so these cases click a tab
+
+  test('Render with a tab selected after the first render', function () {
+    var onSelect = jest.fn();
+
+    var _renderTabWrapper12 = renderTabWrapper({
+      defaultTab: 'page1',
+      onSelect: onSelect
+    }),
+        asFragment = _renderTabWrapper12.asFragment,
+        getByText = _renderTabWrapper12.getByText;
+
+    _react2.fireEvent.click(getByText('Page 2'));
+
+    expect(onSelect).toHaveBeenCalledWith('page2');
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hookToDisableInternalState after selecting another tab', function () {
+    var onSelect = jest.fn();
+
+    var _renderTabWrapper13 = renderTabWrapper({
+      defaultTab: 'page1',
+      hookToDisableInternalState: true,
+      onSelect: onSelect
+    }),
+        asFragment = _renderTabWrapper13.asFragment,
+        getByText = _renderTabWrapper13.getByText;
+
+    _react2.fireEvent.click(getByText('Page 2'));
+
+    expect(onSelect).toHaveBeenCalledWith('page2');
+    expect(asFragment()).toMatchSnapshot();
   });
 });