@zohodesk/components 1.6.31 → 1.6.34

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

@@ -6,13 +6,754 @@ var _react2 = require("@testing-library/react");
 
 var _Tabs = _interopRequireDefault(require("../Tabs"));
 
+var _Tab = _interopRequireDefault(require("../Tab"));
+
+var _Common = require("../../utils/Common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// 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", function () {
+  var actual = jest.requireActual("../../utils/Common");
+  return _objectSpread(_objectSpread({
+    __esModule: true
+  }, actual), {}, {
+    getTotalDimension: jest.fn(actual.getTotalDimension)
+  });
+});
+
+var _jest$requireActual = jest.requireActual("../../utils/Common"),
+    actualGetTotalDimension = _jest$requireActual.getTotalDimension; // every Tab carries data-key, so it is measured as a tab; anything else is the tab bar
+
+
+var setDimensions = function setDimensions(bar, tab) {
+  _Common.getTotalDimension.mockImplementation(function (element) {
+    return element && element.dataset && element.dataset.key ? tab : bar;
+  });
+};
+
+var makeTabs = function makeTabs(count) {
+  return Array.from({
+    length: count
+  }, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: "t".concat(index + 1),
+      id: "t".concat(index + 1),
+      text: "Tab ".concat(index + 1)
+    });
+  });
+}; // isResponsive is off so tabs stay in the bar; a 0-width jsdom bar would otherwise collapse them into the more menu
+
+
+var renderTabs = function renderTabs(props) {
+  var tabs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : makeTabs(4);
+  return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], _extends({
+    isResponsive: false
+  }, props), tabs));
+}; // a 100 bar with 30 tabs keeps two tabs visible and moves the rest into the more menu
+
+
+var renderResponsiveTabs = function renderResponsiveTabs(props) {
+  var tabs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : makeTabs(4);
+  var bar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  var tab = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
+  setDimensions(bar, tab);
+  return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], props, tabs));
+};
+
 describe('Tabs', function () {
+  afterEach(function () {
+    (0, _react2.cleanup)();
+
+    _Common.getTotalDimension.mockImplementation(actualGetTotalDimension);
+  }); // the open more menu renders a FocusScope that needs IntersectionObserver, which jsdom lacks
+
+  beforeAll(function () {
+    window.IntersectionObserver = /*#__PURE__*/function () {
+      function _class() {
+        _classCallCheck(this, _class);
+      }
+
+      _createClass(_class, [{
+        key: "observe",
+        value: function observe() {}
+      }, {
+        key: "unobserve",
+        value: function unobserve() {}
+      }, {
+        key: "disconnect",
+        value: function disconnect() {}
+      }]);
+
+      return _class;
+    }();
+  });
+  afterAll(function () {
+    delete window.IntersectionObserver;
+  });
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], null)),
         asFragment = _render.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var types = ['alpha', 'beta', 'delta'];
+  var iconNames = ['ZD-GN-info', 'ZD-GN-agent'];
+
+  var CustomTab = function CustomTab(props) {
+    return /*#__PURE__*/_react["default"].createElement(_Tab["default"], props);
+  };
+
+  test('Render with tabs', function () {
+    var _renderTabs = renderTabs(),
+        asFragment = _renderTabs.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(types)('Render with selectedTab, needAppearance and type as %s', function (type) {
+    var _renderTabs2 = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      type: type
+    }),
+        asFragment = _renderTabs2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['beta', 'delta'])('Render with needAppearance, needBorder, needPadding and type as %s', function (type) {
+    var _renderTabs3 = renderTabs({
+      needAppearance: true,
+      needBorder: true,
+      needPadding: true,
+      type: type
+    }),
+        asFragment = _renderTabs3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab', function () {
+    var _renderTabs4 = renderTabs({
+      selectedTab: 't2'
+    }),
+        asFragment = _renderTabs4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance', function () {
+    var _renderTabs5 = renderTabs({
+      needAppearance: true
+    }),
+        asFragment = _renderTabs5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needBorder', function () {
+    var _renderTabs6 = renderTabs({
+      needAppearance: true,
+      needBorder: true
+    }),
+        asFragment = _renderTabs6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needPadding', function () {
+    var _renderTabs7 = renderTabs({
+      needAppearance: true,
+      needPadding: true
+    }),
+        asFragment = _renderTabs7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needBorder and needPadding', function () {
+    var _renderTabs8 = renderTabs({
+      needAppearance: true,
+      needBorder: true,
+      needPadding: true
+    }),
+        asFragment = _renderTabs8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder and needPadding without needAppearance', function () {
+    var _renderTabs9 = renderTabs({
+      needBorder: true,
+      needPadding: true
+    }),
+        asFragment = _renderTabs9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with align as vertical', function () {
+    var _renderTabs10 = renderTabs({
+      align: 'vertical',
+      selectedTab: 't1',
+      needAppearance: true
+    }),
+        asFragment = _renderTabs10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance and needTabBorder', function () {
+    var _renderTabs11 = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true
+    }),
+        asFragment = _renderTabs11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needTabBorder and isAnimate', function () {
+    var _renderTabs12 = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true,
+      isAnimate: true
+    }),
+        asFragment = _renderTabs12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needAppearance, needTabBorder, isAnimate, highlightClass and dataId', function () {
+    var _renderTabs13 = renderTabs({
+      selectedTab: 't1',
+      needAppearance: true,
+      needTabBorder: true,
+      isAnimate: true,
+      highlightClass: 'custom-highlight',
+      dataId: 'tabs-dataId'
+    }),
+        asFragment = _renderTabs13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isAnimate and needTabBorder without needAppearance', function () {
+    var _renderTabs14 = renderTabs({
+      isAnimate: true,
+      needTabBorder: true
+    }),
+        asFragment = _renderTabs14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlightClass without isAnimate', function () {
+    var _renderTabs15 = renderTabs({
+      highlightClass: 'custom-highlight'
+    }),
+        asFragment = _renderTabs15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', function () {
+    var _renderTabs16 = renderTabs({
+      className: 'custom-tabs'
+    }),
+        asFragment = _renderTabs16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with containerClass', function () {
+    var _renderTabs17 = renderTabs({
+      containerClass: 'custom-container'
+    }),
+        asFragment = _renderTabs17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with style', function () {
+    var _renderTabs18 = renderTabs({
+      style: {
+        width: '100px'
+      }
+    }),
+        asFragment = _renderTabs18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _renderTabs19 = renderTabs({
+      dataSelectorId: 'tabs-dataSelectorId'
+    }),
+        asFragment = _renderTabs19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with itemClass', function () {
+    var _renderTabs20 = renderTabs({
+      itemClass: 'custom-item'
+    }),
+        asFragment = _renderTabs20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedTab and itemActiveClass', function () {
+    var _renderTabs21 = renderTabs({
+      selectedTab: 't1',
+      itemActiveClass: 'custom-item-active'
+    }),
+        asFragment = _renderTabs21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a non-Tab child', function () {
+    var _renderTabs22 = renderTabs({}, [].concat(_toConsumableArray(makeTabs(2)), [/*#__PURE__*/_react["default"].createElement("div", {
+      key: "other"
+    }, "Other content")])),
+        asFragment = _renderTabs22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // only children whose type equals childType are treated as tabs
+
+  test('Render with childType', function () {
+    var _renderTabs23 = renderTabs({
+      childType: CustomTab
+    }, [/*#__PURE__*/_react["default"].createElement(CustomTab, {
+      key: "c1",
+      id: "c1",
+      text: "Custom 1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: "t1",
+      id: "t1",
+      text: "Tab 1"
+    })]),
+        asFragment = _renderTabs23.asFragment;
+
+    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', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], null, makeTabs(4))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and tabs fitting the bar', function () {
+    var _renderResponsiveTabs = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, makeTabs(4), 300),
+        asFragment = _renderResponsiveTabs.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and tabs overflowing the bar', function () {
+    var _renderResponsiveTabs2 = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and a selectedTab that would overflow', function () {
+    var _renderResponsiveTabs3 = renderResponsiveTabs({
+      selectedTab: 't3'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and maxTabsCount as 1', function () {
+    var _renderResponsiveTabs4 = renderResponsiveTabs({
+      selectedTab: 't1',
+      maxTabsCount: 1
+    }, makeTabs(4), 300),
+        asFragment = _renderResponsiveTabs4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive and minTabsCount as 3', function () {
+    var _renderResponsiveTabs5 = renderResponsiveTabs({
+      selectedTab: 't1',
+      minTabsCount: 3
+    }, makeTabs(4), 40),
+        asFragment = _renderResponsiveTabs5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, tabs fitting the bar and a non-Tab child', function () {
+    var _renderResponsiveTabs6 = renderResponsiveTabs({
+      selectedTab: 't1'
+    }, [].concat(_toConsumableArray(makeTabs(2)), [/*#__PURE__*/_react["default"].createElement("div", {
+      key: "other"
+    }, "Other content")]), 300),
+        asFragment = _renderResponsiveTabs6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and moreButtonClass', function () {
+    var _renderResponsiveTabs7 = renderResponsiveTabs({
+      selectedTab: 't1',
+      moreButtonClass: 'custom-more-button'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and moreButtonActiveClass without isPopupOpen', function () {
+    var _renderResponsiveTabs8 = renderResponsiveTabs({
+      selectedTab: 't1',
+      moreButtonActiveClass: 'custom-more-button-active'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and iconSize', function () {
+    var _renderResponsiveTabs9 = renderResponsiveTabs({
+      selectedTab: 't1',
+      iconSize: '12'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and dataSelectorId', function () {
+    var _renderResponsiveTabs10 = renderResponsiveTabs({
+      selectedTab: 't1',
+      dataSelectorId: 'tabs-dataSelectorId'
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive, overflowing tabs and customProps MoreButtonProps', function () {
+    var _renderResponsiveTabs11 = renderResponsiveTabs({
+      selectedTab: 't1',
+      customProps: {
+        MoreButtonProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isResponsive=false and overflowing tabs', function () {
+    var _renderResponsiveTabs12 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isResponsive: false
+    }, makeTabs(4), 100),
+        asFragment = _renderResponsiveTabs12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(iconNames)('Render with isResponsive, overflowing tabs and iconName as %s', function (iconName) {
+    var _renderResponsiveTabs13 = renderResponsiveTabs({
+      selectedTab: 't1',
+      iconName: iconName
+    }),
+        asFragment = _renderResponsiveTabs13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the menu content depends on the tabs' own text, title, children and link props
+
+  var titledTabs = Array.from({
+    length: 4
+  }, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: "t".concat(index + 1),
+      id: "t".concat(index + 1),
+      title: "Title ".concat(index + 1)
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Child ", index + 1));
+  });
+  var linkTabs = Array.from({
+    length: 4
+  }, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: "t".concat(index + 1),
+      id: "t".concat(index + 1),
+      text: "Tab ".concat(index + 1),
+      isLink: true,
+      href: "/tab".concat(index + 1)
+    });
+  });
+  test('Render with isPopupOpen', function () {
+    var _renderResponsiveTabs14 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }),
+        asFragment = _renderResponsiveTabs14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, moreButtonClass and moreButtonActiveClass', function () {
+    var _renderResponsiveTabs15 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreButtonClass: 'custom-more-button',
+      moreButtonActiveClass: 'custom-more-button-active'
+    }),
+        asFragment = _renderResponsiveTabs15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and menuItemClass', function () {
+    var _renderResponsiveTabs16 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      menuItemClass: 'custom-menu-item'
+    }),
+        asFragment = _renderResponsiveTabs16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and moreBoxClass', function () {
+    var _renderResponsiveTabs17 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreBoxClass: 'custom-more-box'
+    }),
+        asFragment = _renderResponsiveTabs17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and moreContainerClass', function () {
+    var _renderResponsiveTabs18 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      moreContainerClass: 'custom-more-container'
+    }),
+        asFragment = _renderResponsiveTabs18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and dataId', function () {
+    var _renderResponsiveTabs19 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      dataId: 'tabs-dataId'
+    }),
+        asFragment = _renderResponsiveTabs19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and align as vertical', function () {
+    var _renderResponsiveTabs20 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      align: 'vertical'
+    }),
+        asFragment = _renderResponsiveTabs20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and getCustomDropBoxHeaderPlaceHolder', function () {
+    var _renderResponsiveTabs21 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      getCustomDropBoxHeaderPlaceHolder: function getCustomDropBoxHeaderPlaceHolder() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom header");
+      }
+    }),
+        asFragment = _renderResponsiveTabs21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and customProps DropBoxProps', function () {
+    var _renderResponsiveTabs22 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        DropBoxProps: {
+          size: 'large'
+        }
+      }
+    }),
+        asFragment = _renderResponsiveTabs22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and customProps ListItemProps', function () {
+    var _renderResponsiveTabs23 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        ListItemProps: {
+          palette: 'primary'
+        }
+      }
+    }),
+        asFragment = _renderResponsiveTabs23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and itemClass', function () {
+    var _renderResponsiveTabs24 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      itemClass: 'custom-item'
+    }),
+        asFragment = _renderResponsiveTabs24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and itemActiveClass', function () {
+    var _renderResponsiveTabs25 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      itemActiveClass: 'custom-item-active'
+    }),
+        asFragment = _renderResponsiveTabs25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and tabs without text', function () {
+    var _renderResponsiveTabs26 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, titledTabs),
+        asFragment = _renderResponsiveTabs26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, showTitleInMoreOptions and tabs without text', function () {
+    var _renderResponsiveTabs27 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      showTitleInMoreOptions: true
+    }, titledTabs),
+        asFragment = _renderResponsiveTabs27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen and link tabs', function () {
+    var _renderResponsiveTabs28 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, linkTabs),
+        asFragment = _renderResponsiveTabs28.asFragment;
+
+    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', function () {
+    var _renderResponsiveTabs29 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(4), 300),
+        asFragment = _renderResponsiveTabs29.asFragment;
+
+    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', function () {
+    var _renderResponsiveTabs30 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and placeHolderText', function () {
+    var _renderResponsiveTabs31 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      placeHolderText: 'Find a tab'
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and searchBoxSize as xmedium', function () {
+    var _renderResponsiveTabs32 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      searchBoxSize: 'xmedium'
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, more than four tabs and customProps TextBoxIconProps', function () {
+    var _renderResponsiveTabs33 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      customProps: {
+        TextBoxIconProps: {
+          needBorder: false
+        }
+      }
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching one tab', function () {
+    var _renderResponsiveTabs34 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs34.asFragment,
+        getByPlaceholderText = _renderResponsiveTabs34.getByPlaceholderText;
+
+    _react2.fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'Tab 5'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching no tab', function () {
+    var _renderResponsiveTabs35 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs35.asFragment,
+        getByPlaceholderText = _renderResponsiveTabs35.getByPlaceholderText;
+
+    _react2.fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with search text matching no tab and searchErrorText', function () {
+    var _renderResponsiveTabs36 = renderResponsiveTabs({
+      selectedTab: 't1',
+      isPopupOpen: true,
+      searchErrorText: 'Nothing found'
+    }, makeTabs(7)),
+        asFragment = _renderResponsiveTabs36.asFragment,
+        getByPlaceholderText = _renderResponsiveTabs36.getByPlaceholderText;
+
+    _react2.fireEvent.change(getByPlaceholderText('Search'), {
+      target: {
+        value: 'zzz'
+      }
+    });
+
     expect(asFragment()).toMatchSnapshot();
   });
 });