@enact/limestone 1.3.0

package/TabLayout/tests/TabLayout-specs.js

@@ -0,0 +1,740 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _resolution = require("@enact/ui/resolution");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _TabLayout = _interopRequireWildcard(require("../TabLayout"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var keyDown = function keyDown(keyCode) {
+  return function (tab) {
+    return _react.fireEvent.keyDown(tab, {
+      keyCode: keyCode
+    });
+  };
+};
+var keyUp = function keyUp(keyCode) {
+  return function (tab) {
+    return _react.fireEvent.keyUp(tab, {
+      keyCode: keyCode
+    });
+  };
+};
+var setPortraitOrientation = function setPortraitOrientation() {
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: 1080
+  });
+  Object.defineProperty(window, 'innerHeight', {
+    configurable: true,
+    value: 1920
+  });
+};
+var spySpotlight = function spySpotlight() {
+  jest.spyOn(_spotlight["default"], 'setPointerMode');
+  jest.spyOn(_spotlight["default"], 'move');
+};
+var leftKeyDown = keyDown(37);
+var leftKeyUp = keyUp(37);
+var enterKeyDown = keyDown(13);
+var enterKeyUp = keyUp(13);
+describe('TabLayout specs', function () {
+  afterEach(function () {
+    jest.clearAllMocks();
+  });
+  test('should be able to render \'Tab\' outside \'TabLayout\'', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+      title: "Single Tab"
+    }));
+    var tab = _react.screen.getByText('Tab is only to be used in TabLayout!');
+    expect(tab).toBeInTheDocument();
+  });
+  test('should be collapsed when collapsed is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {
+      collapsed: true,
+      "data-testid": "tabLayout",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "demosync",
+        title: "Button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Button"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var expected = 'collapsed';
+    var actual = _react.screen.getByTestId('tabLayout');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have default orientation of vertical', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {
+      "data-testid": "tabLayout",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Button",
+        icon: "demosync",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Button"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var expected = 'vertical';
+    var actual = _react.screen.getByTestId('tabLayout');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have orientation of horizontal when orientation is set to horizontal', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {
+      "data-testid": "tabLayout",
+      orientation: "horizontal",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "demosync",
+        title: "Button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Button"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var expected = 'horizontal';
+    var actual = _react.screen.getByTestId('tabLayout');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should call onTabAnimationEnd for vertical tabs', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      onTabAnimationEnd: spy,
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tabs = _react.screen.getByTestId('tabLayout').children.item(0);
+    _react.fireEvent.transitionEnd(tabs);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  test('should include expected payload in onTabAnimationEnd', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      collapsed: true,
+      "data-testid": "tabLayout",
+      onTabAnimationEnd: spy,
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tabs = _react.screen.getByTestId('tabLayout').children.item(0);
+    _react.fireEvent.transitionEnd(tabs);
+    var expected = {
+      type: 'onTabAnimationEnd',
+      preventDefault: expect.any(Function),
+      stopPropagation: expect.any(Function),
+      collapsed: true
+    };
+    var actual = spy.mock.calls[0][0];
+    expect(actual).toEqual(expected);
+  });
+  test('should not call onTabAnimationEnd for horizontal tabs', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      onTabAnimationEnd: spy,
+      orientation: "horizontal",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tabs = _react.screen.getByTestId('tabLayout').children.item(0);
+    _react.fireEvent.transitionEnd(tabs);
+    expect(spy).not.toHaveBeenCalled();
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when clicking on a tab', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      onSelect: spy,
+      orientation: "vertical",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    yield user.click(_react.screen.getAllByTestId('tab')[1]);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'vertical\' and \'ltr\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      onSelect: spy,
+      orientation: "vertical",
+      rtl: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[1];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'vertical\' and \'rtl\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      onSelect: spy,
+      orientation: "vertical",
+      rtl: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[0];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'end\' and \'ltr\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      onSelect: spy,
+      anchorTo: "end",
+      rtl: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[0];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'end\' and \'rtl\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      onSelect: spy,
+      anchorTo: "end",
+      rtl: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[0];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'right\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      onSelect: spy,
+      anchorTo: "right",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[0];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onSelect\' with \'onSelect\' type when pressing \'Enter\' on a tab while \'horizontal\'', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      onSelect: spy,
+      orientation: "horizontal",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[0];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should not call \'onSelect\' when pressing directional key on a tab', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      collapsed: true,
+      onSelect: spy,
+      orientation: "vertical",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[1];
+    leftKeyDown(tab);
+    leftKeyUp(tab);
+    expect(spy).not.toHaveBeenCalled();
+  });
+  test('should call \'onSelect\' even if \'Spotlight\' is paused and pointer mode \'false\'', function () {
+    _spotlight["default"].getPointerMode = jest.fn(function () {
+      return false;
+    });
+    _spotlight["default"].isPaused = jest.fn(function () {
+      return false;
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      onSelect: spy,
+      orientation: "vertical",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        "data-testid": "tab",
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var tab = _react.screen.getAllByTestId('tab')[1];
+    enterKeyDown(tab);
+    enterKeyUp(tab);
+    var expected = {
+      type: 'onSelect'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should call \'onExpand\' with \'onExpand\' type when pressing \'backKey\' on a tab content', function () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      collapsed: true,
+      onExpand: spy,
+      rtl: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          children: "Button"
+        })
+      })
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByRole('button'), {
+      keyCode: 27
+    });
+    var expected = {
+      type: 'onExpand'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should not call \'onExpand\' when preventDefault is called in onKeyUp handler when pressing \'backKey\' on a tab content', function () {
+    var spy = jest.fn();
+    var handleKeyUp = function handleKeyUp(ev) {
+      if (ev.keyCode === 27) {
+        ev.preventDefault();
+      }
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      collapsed: true,
+      onKeyUp: handleKeyUp,
+      onExpand: spy,
+      rtl: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          children: "Button"
+        })
+      })
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByRole('button'), {
+      keyCode: 27
+    });
+    expect(spy).not.toHaveBeenCalled();
+  });
+  test('should call \'onTabAnimationEnd\' even if \'Spotlight\' is paused and pointer mode \'false\'', function () {
+    _spotlight["default"].getPointerMode = jest.fn(function () {
+      return false;
+    });
+    _spotlight["default"].isPaused = jest.fn(function () {
+      return false;
+    });
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      onTabAnimationEnd: spy,
+      orientation: "vertical",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    _react.fireEvent.transitionEnd(_react.screen.getByTestId('tabLayout').children.item(0));
+    var expected = {
+      type: 'onTabAnimationEnd'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should use \'primaryIndex\' to determine the default selected tab', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      primaryIndex: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "home",
+        title: "Test1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Test1Content"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "gear",
+        title: "Test2",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Test2Content"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Test3",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Test3Content"
+        })
+      })]
+    }));
+    var selectedTab = _react.screen.getByRole('tab', {
+      name: 'Test2'
+    });
+    expect(selectedTab).toHaveClass('selected');
+    var selectedContent = _react.screen.getByText('Test2Content');
+    expect(selectedContent).toBeVisible();
+  });
+  test('should update orientation on window resize and collapse tabs', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      orientation: "vertical",
+      "data-testid": "tabLayout",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expected = 'collapsed';
+    var actual = _react.screen.getByTestId('tabLayout');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should update orientation on window resize and not collapse tabs when \'blockCollapseOnPortrait\' is set', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      blockCollapseOnPortrait: true,
+      "data-testid": "tabLayout",
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expected = 'expanded';
+    var actual = _react.screen.getByTestId('tabLayout');
+    expect(actual).not.toHaveClass(expected);
+  });
+  test('should set the tab size for all tabs in horizontal orientation', function () {
+    var tabSize = 300;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {
+      "data-testid": "tabLayout",
+      orientation: "horizontal",
+      tabSize: tabSize,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        icon: "playcircle",
+        title: "Item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Item"
+        })
+      })]
+    }));
+    var tabLayout = _react.screen.getByTestId('tabLayout');
+    expect(tabLayout.style.getPropertyValue('--tab-width')).toBe((0, _resolution.scaleToRem)(tabSize));
+  });
+  test('should set the specific tab size for all tabs in horizontal orientation and size small', function () {
+    var tabSize = 420;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {
+      "data-testid": "tabLayout",
+      orientation: "horizontal",
+      size: "small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Tab 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Tab 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Tab 3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Tab 4"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Tab 5"
+      })]
+    }));
+    var tabLayout = _react.screen.getByTestId('tabLayout');
+    expect(tabLayout.style.getPropertyValue('--tab-width')).toBe((0, _resolution.scaleToRem)(tabSize));
+  });
+  test('should move spotlight right when Enter is pressed on expanded tab and anchorTo is left', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "left",
+      collapsed: false,
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('right');
+  });
+  test('should move spotlight left when Enter is pressed on expanded tab and anchorTo is right', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "right",
+      collapsed: false,
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('left');
+  });
+  test('should move spotlight left when Enter is pressed on expanded tab and anchorTo is start and rtl is true', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "start",
+      collapsed: false,
+      orientation: "vertical",
+      rtl: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('left');
+  });
+  test('should move spotlight right when Enter is pressed on expanded tab and anchorTo is start and rtl is false', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "start",
+      collapsed: false,
+      orientation: "vertical",
+      rtl: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('right');
+  });
+  test('should move spotlight left when Enter is pressed on expanded tab and anchorTo is end and rtl is false', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "end",
+      collapsed: false,
+      orientation: "vertical",
+      rtl: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('left');
+  });
+  test('should move spotlight right when Enter is pressed on expanded tab and anchorTo is end and rtl is true', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      anchorTo: "end",
+      collapsed: false,
+      orientation: "vertical",
+      rtl: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('right');
+  });
+  test('should move spotlight down when Enter is pressed on expanded tab and orientation is horizontal', function () {
+    spySpotlight();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      collapsed: false,
+      orientation: "horizontal",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        "data-testid": "homeTab"
+      })
+    }));
+    var tab = _react.screen.getByTestId('homeTab');
+    enterKeyUp(tab);
+    expect(_spotlight["default"].setPointerMode).toHaveBeenCalledWith(false);
+    expect(_spotlight["default"].move).toHaveBeenCalledWith('down');
+  });
+});