@zohodesk/components 1.6.31 → 1.6.34

package/es/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/es/Tab/__tests__/Tab.spec.js

@@ -1,11 +1,259 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import Tab from "../Tab";
 describe('Tab', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Tab, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const types = ['alpha', 'beta', 'delta'];
+  const titlePositions = ['top', 'bottom', 'right', 'left'];
+  const contentAligns = ['left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline'];
+  const 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', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      needAppearance: true,
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with isActive, needAppearance and type as %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true,
+      needAppearance: true,
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with isActive, needAppearance, needBorder and type as %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true,
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(titlePositions)('Render with title and titlePosition as %s', titlePosition => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      title: "Tab title",
+      titlePosition: titlePosition
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(contentAligns)('Render with contentAlign as %s', contentAlign => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      contentAlign: contentAlign
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(contentAlignBoxes)('Render with contentAlignBox as %s', contentAlignBox => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      contentAlignBox: contentAlignBox
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      id: "tab1"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      text: "Tab text"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children as string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, null, "Tab child"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children as element', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("span", null, "Tab child")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with text and children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      text: "Tab text"
+    }, /*#__PURE__*/React.createElement("span", null, "Tab child")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tourId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      tourId: "tab-tour"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      dataId: "tab-dataId",
+      dataSelectorId: "tab-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      className: "custom-tab"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      style: {
+        width: '100px'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isLink: true,
+      href: "/tab"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink without href', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isLink: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with href without isLink', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      href: "/tab"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with align as vertical', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      align: "vertical"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      needAppearance: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needBorder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      needAppearance: true,
+      needBorder: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive, needAppearance and needBorder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true
+    }));
+    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', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true,
+      needAppearance: true,
+      needBorder: true,
+      isAnimate: true,
+      type: "alpha"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive and activeClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      isActive: true,
+      activeClass: "custom-active-tab"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with activeClass without isActive', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      activeClass: "custom-active-tab"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,44 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import TabContent from "../TabContent";
 describe('TabContent', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(TabContent, null, /*#__PURE__*/React.createElement("div", null, "Test")));
     expect(asFragment()).toMatchSnapshot();
   });
+  const scrolls = ['vertical', 'horizontal', 'both', 'none'];
+  test('Render with no children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContent, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(scrolls)('Render with scroll as %s', scroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContent, {
+      scroll: scroll
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContent, {
+      id: "tab-content-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContent, {
+      dataId: "tab-content-dataId",
+      dataSelectorId: "tab-content-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,82 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import TabContentWrapper from "../TabContentWrapper";
+import TabContent from "../TabContent"; // the wrapper keeps only the child whose id equals selectedTab, so cases use real TabContent children
+
+const renderTabContentWrapper = props => render( /*#__PURE__*/React.createElement(TabContentWrapper, props, /*#__PURE__*/React.createElement(TabContent, {
+  id: "page1"
+}, /*#__PURE__*/React.createElement("div", null, "Page 1 Content")), /*#__PURE__*/React.createElement(TabContent, {
+  id: "page2"
+}, /*#__PURE__*/React.createElement("div", null, "Page 2 Content"))));
+
 describe('TabContentWrapper', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(TabContentWrapper, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(['page1', 'page2'])('Render with selectedTab as %s', selectedTab => {
+    const {
+      asFragment
+    } = renderTabContentWrapper({
+      selectedTab
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab not matching any child', () => {
+    const {
+      asFragment
+    } = renderTabContentWrapper({
+      selectedTab: 'page3'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, {
+      className: "custom-wrapper"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, {
+      style: {
+        height: '100px'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, {
+      dataId: "tab-content-wrapper-dataId",
+      dataSelectorId: "tab-content-wrapper-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tagName as section', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, {
+      tagName: "section"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, {
+      a11y: {
+        role: 'region',
+        'aria-label': 'Tab panels'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,173 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import TabWrapper from "../TabWrapper";
+import Tabs from "../Tabs";
+import Tab from "../Tab";
+import TabContentWrapper from "../TabContentWrapper";
+import TabContent from "../TabContent"; // 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
+
+const renderTabWrapper = props => render( /*#__PURE__*/React.createElement(TabWrapper, props, /*#__PURE__*/React.createElement(Tabs, {
+  isResponsive: false
+}, /*#__PURE__*/React.createElement(Tab, {
+  id: "page1",
+  text: "Page 1"
+}), /*#__PURE__*/React.createElement(Tab, {
+  id: "page2",
+  text: "Page 2"
+})), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+  id: "page1"
+}, /*#__PURE__*/React.createElement("div", null, "Page 1 Content")), /*#__PURE__*/React.createElement(TabContent, {
+  id: "page2"
+}, /*#__PURE__*/React.createElement("div", null, "Page 2 Content")))));
+
 describe('TabWrapper', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement("div", null, "Test")));
     expect(asFragment()).toMatchSnapshot();
+  }); // vertical is the default align and beta/delta are non-default types
+
+  const aligns = ['horizontal', 'vertical-reverse', 'horizontal-reverse'];
+  const types = ['beta', 'delta'];
+  test('Render with tabs and content', () => {
+    const {
+      asFragment
+    } = renderTabWrapper();
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['page1', 'page2'])('Render with defaultTab as %s', defaultTab => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(aligns)('Render with defaultTab and align as %s', align => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      align
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with defaultTab and type as %s', type => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      type
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      needBorder: false
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needPadding=false', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      needPadding: false
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance=false', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      needAppearance: false
+    });
+    expect(asFragment()).toMatchSnapshot();
+  }); // the highlight line renders only when isAnimate, needTabBorder and needAppearance are all set
+
+  test('Render with needTabBorder', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      needTabBorder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate and needTabBorder', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      isAnimate: true,
+      needTabBorder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate, needTabBorder and needAppearance=false', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      isAnimate: true,
+      needTabBorder: true,
+      needAppearance: false
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = renderTabWrapper({
+      dataId: 'tab-wrapper-dataId',
+      dataSelectorId: 'tab-wrapper-dataSelectorId'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with only tabs', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabWrapper, {
+      defaultTab: "page1"
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      isResponsive: false
+    }, /*#__PURE__*/React.createElement(Tab, {
+      id: "page1",
+      text: "Page 1"
+    }))));
+    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', () => {
+    const onSelect = jest.fn();
+    const {
+      asFragment,
+      getByText
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      onSelect
+    });
+    fireEvent.click(getByText('Page 2'));
+    expect(onSelect).toHaveBeenCalledWith('page2');
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hookToDisableInternalState after selecting another tab', () => {
+    const onSelect = jest.fn();
+    const {
+      asFragment,
+      getByText
+    } = renderTabWrapper({
+      defaultTab: 'page1',
+      hookToDisableInternalState: true,
+      onSelect
+    });
+    fireEvent.click(getByText('Page 2'));
+    expect(onSelect).toHaveBeenCalledWith('page2');
+    expect(asFragment()).toMatchSnapshot();
   });
 });