@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
499 lines (498 loc) • 19.1 kB
JavaScript
;
var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
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 leftKeyDown = keyDown(37);
var leftKeyUp = keyUp(37);
var enterKeyDown = keyDown(13);
var enterKeyUp = keyUp(13);
describe('TabLayout specs', function () {
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 \'vertial\' 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 \'vertial\' 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);
});
});