@zohodesk/components 1.6.32 → 1.6.34

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

@@ -1,11 +1,691 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import Tabs from "../Tabs";
+import Tab from "../Tab";
+import { getTotalDimension } from "../../utils/Common"; // Tabs splits tabs between the bar and the more menu using measured sizes, which are 0 in jsdom;
+// the mock delegates to the real helper unless a case sets fixed sizes
+
+jest.mock("../../utils/Common", () => {
+  const actual = jest.requireActual("../../utils/Common");
+  return {
+    __esModule: true,
+    ...actual,
+    getTotalDimension: jest.fn(actual.getTotalDimension)
+  };
+});
+const {
+  getTotalDimension: actualGetTotalDimension
+} = jest.requireActual("../../utils/Common"); // every Tab carries data-key, so it is measured as a tab; anything else is the tab bar
+
+const setDimensions = (bar, tab) => {
+  getTotalDimension.mockImplementation(element => element && element.dataset && element.dataset.key ? tab : bar);
+};
+
+const makeTabs = count => Array.from({
+  length: count
+}, (_, index) => /*#__PURE__*/React.createElement(Tab, {
+  key: `t${index + 1}`,
+  id: `t${index + 1}`,
+  text: `Tab ${index + 1}`
+})); // isResponsive is off so tabs stay in the bar; a 0-width jsdom bar would otherwise collapse them into the more menu
+
+
+const renderTabs = (props, tabs = makeTabs(4)) => render( /*#__PURE__*/React.createElement(Tabs, _extends({
+  isResponsive: false
+}, props), tabs)); // a 100 bar with 30 tabs keeps two tabs visible and moves the rest into the more menu
+
+
+const renderResponsiveTabs = (props, tabs = makeTabs(4), bar = 100, tab = 30) => {
+  setDimensions(bar, tab);
+  return render( /*#__PURE__*/React.createElement(Tabs, props, tabs));
+};
+
 describe('Tabs', () => {
+  afterEach(() => {
+    cleanup();
+    getTotalDimension.mockImplementation(actualGetTotalDimension);
+  }); // the open more menu renders a FocusScope that needs IntersectionObserver, which jsdom lacks
+
+  beforeAll(() => {
+    window.IntersectionObserver = class {
+      observe() {}
+
+      unobserve() {}
+
+      disconnect() {}
+
+    };
+  });
+  afterAll(() => {
+    delete window.IntersectionObserver;
+  });
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Tabs, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const types = ['alpha', 'beta', 'delta'];
+  const iconNames = ['ZD-GN-info', 'ZD-GN-agent'];
+
+  const CustomTab = props => /*#__PURE__*/React.createElement(Tab, props);
+
+  test('Render with tabs', () => {
+    const {
+      asFragment
+    } = renderTabs();
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with selectedTab, needAppearance and type as %s', type => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      type
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['beta', 'delta'])('Render with needAppearance, needBorder, needPadding and type as %s', type => {
+    const {
+      asFragment
+    } = renderTabs({
+      needAppearance: true,
+      needBorder: true,
+      needPadding: true,
+      type
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't2'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      needAppearance: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needBorder', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      needAppearance: true,
+      needBorder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needPadding', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      needAppearance: true,
+      needPadding: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needBorder and needPadding', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      needAppearance: true,
+      needBorder: true,
+      needPadding: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder and needPadding without needAppearance', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      needBorder: true,
+      needPadding: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with align as vertical', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      align: 'vertical',
+      selectedTab: 't1',
+      needAppearance: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needTabBorder', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needTabBorder and isAnimate', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true,
+      isAnimate: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needTabBorder, isAnimate, highlightClass and dataId', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true,
+      isAnimate: true,
+      highlightClass: 'custom-highlight',
+      dataId: 'tabs-dataId'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate and needTabBorder without needAppearance', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      isAnimate: true,
+      needTabBorder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlightClass without isAnimate', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      highlightClass: 'custom-highlight'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      className: 'custom-tabs'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with containerClass', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      containerClass: 'custom-container'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      style: {
+        width: '100px'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      dataSelectorId: 'tabs-dataSelectorId'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with itemClass', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      itemClass: 'custom-item'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab and itemActiveClass', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      selectedTab: 't1',
+      itemActiveClass: 'custom-item-active'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a non-Tab child', () => {
+    const {
+      asFragment
+    } = renderTabs({}, [...makeTabs(2), /*#__PURE__*/React.createElement("div", {
+      key: "other"
+    }, "Other content")]);
+    expect(asFragment()).toMatchSnapshot();
+  }); // only children whose type equals childType are treated as tabs
+
+  test('Render with childType', () => {
+    const {
+      asFragment
+    } = renderTabs({
+      childType: CustomTab
+    }, [/*#__PURE__*/React.createElement(CustomTab, {
+      key: "c1",
+      id: "c1",
+      text: "Custom 1"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      key: "t1",
+      id: "t1",
+      text: "Tab 1"
+    })]);
+    expect(asFragment()).toMatchSnapshot();
+  }); // a 0-width bar leaves no room, so every tab moves into the more menu
+
+  test('Render with isResponsive and a 0-width bar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tabs, null, makeTabs(4)));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and tabs fitting the bar', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, makeTabs(4), 300);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and tabs overflowing the bar', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and a selectedTab that would overflow', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't3'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and maxTabsCount as 1', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      maxTabsCount: 1
+    }, makeTabs(4), 300);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and minTabsCount as 3', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      minTabsCount: 3
+    }, makeTabs(4), 40);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, tabs fitting the bar and a non-Tab child', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, [...makeTabs(2), /*#__PURE__*/React.createElement("div", {
+      key: "other"
+    }, "Other content")], 300);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and moreButtonClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      moreButtonClass: 'custom-more-button'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and moreButtonActiveClass without isPopupOpen', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      moreButtonActiveClass: 'custom-more-button-active'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and iconSize', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      iconSize: '12'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and dataSelectorId', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      dataSelectorId: 'tabs-dataSelectorId'
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and customProps MoreButtonProps', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      customProps: {
+        MoreButtonProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive=false and overflowing tabs', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isResponsive: false
+    }, makeTabs(4), 100);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(iconNames)('Render with isResponsive, overflowing tabs and iconName as %s', iconName => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      iconName
+    });
+    expect(asFragment()).toMatchSnapshot();
+  }); // the menu content depends on the tabs' own text, title, children and link props
+
+  const titledTabs = Array.from({
+    length: 4
+  }, (_, index) => /*#__PURE__*/React.createElement(Tab, {
+    key: `t${index + 1}`,
+    id: `t${index + 1}`,
+    title: `Title ${index + 1}`
+  }, /*#__PURE__*/React.createElement("span", null, "Child ", index + 1)));
+  const linkTabs = Array.from({
+    length: 4
+  }, (_, index) => /*#__PURE__*/React.createElement(Tab, {
+    key: `t${index + 1}`,
+    id: `t${index + 1}`,
+    text: `Tab ${index + 1}`,
+    isLink: true,
+    href: `/tab${index + 1}`
+  }));
+  test('Render with isPopupOpen', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, moreButtonClass and moreButtonActiveClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreButtonClass: 'custom-more-button',
+      moreButtonActiveClass: 'custom-more-button-active'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and menuItemClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      menuItemClass: 'custom-menu-item'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and moreBoxClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreBoxClass: 'custom-more-box'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and moreContainerClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreContainerClass: 'custom-more-container'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and dataId', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      dataId: 'tabs-dataId'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and align as vertical', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      align: 'vertical'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and getCustomDropBoxHeaderPlaceHolder', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      getCustomDropBoxHeaderPlaceHolder: () => /*#__PURE__*/React.createElement("div", null, "Custom header")
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and customProps DropBoxProps', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        DropBoxProps: {
+          size: 'large'
+        }
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        ListItemProps: {
+          palette: 'primary'
+        }
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and itemClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      itemClass: 'custom-item'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and itemActiveClass', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      itemActiveClass: 'custom-item-active'
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and tabs without text', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, titledTabs);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, showTitleInMoreOptions and tabs without text', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      showTitleInMoreOptions: true
+    }, titledTabs);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and link tabs', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, linkTabs);
+    expect(asFragment()).toMatchSnapshot();
+  }); // isPopupOpen has no menu to open when every tab fits in the bar
+
+  test('Render with isPopupOpen and tabs fitting the bar', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(4), 300);
+    expect(asFragment()).toMatchSnapshot();
+  }); // the search box appears only when more than four tabs are in the menu
+
+  test('Render with isPopupOpen and more than four tabs in the menu', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and placeHolderText', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      placeHolderText: 'Find a tab'
+    }, makeTabs(7));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and searchBoxSize as xmedium', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      searchBoxSize: 'xmedium'
+    }, makeTabs(7));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and customProps TextBoxIconProps', () => {
+    const {
+      asFragment
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        TextBoxIconProps: {
+          needBorder: false
+        }
+      }
+    }, makeTabs(7));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching one tab', () => {
+    const {
+      asFragment,
+      getByPlaceholderText
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7));
+    fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'Tab 5'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching no tab', () => {
+    const {
+      asFragment,
+      getByPlaceholderText
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7));
+    fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching no tab and searchErrorText', () => {
+    const {
+      asFragment,
+      getByPlaceholderText
+    } = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      searchErrorText: 'Nothing found'
+    }, makeTabs(7));
+    fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });