@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
160 lines (158 loc) • 6.3 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _TabGroup = _interopRequireDefault(require("../TabGroup"));
var _jsxRuntime = require("react/jsx-runtime");
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); }); }; }
describe('TabGroup specs', function () {
test('should only have one icon item when collapsed and vertical orientation when there is a tab without an icon', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
"data-testid": "tabs",
orientation: "vertical",
collapsed: true,
tabs: [{
title: 'Home',
icon: 'home'
}, {
title: 'Button'
}, {
title: 'Item',
icon: 'plus'
}]
}));
var tabGroup = _react.screen.getByTestId('tabs');
var expectedCode = 983019; // decimal converted charCode of Unicode 'horizontal lines' character
var actualCode = tabGroup.textContent.codePointAt();
expect(actualCode).toBe(expectedCode);
});
test('should only have 3 item tabs when 3 tabs were specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
tabs: [{
title: 'Home',
icon: 'home'
}, {
title: 'Button',
icon: 'demosync'
}, {
title: 'Item',
icon: 'playcircle'
}]
}));
var expected = 3 * 2; // each tab has two children due to a dummy sibling by Spottable
var actual = _react.screen.getByRole('tablist').children;
expect(actual).toHaveLength(expected);
});
test('should render group even if it has no tabs', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
tabs: []
}));
var tabGroup = _react.screen.getByRole('tablist');
expect(tabGroup).toBeInTheDocument();
});
test('should render icons', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
tabs: [{
title: '',
icon: 'home',
'data-testid': 'homeIcon'
}, {
title: '',
icon: 'demosync',
'data-testid': 'demosyncIcon'
}, {
title: '',
icon: 'playcircle',
'data-testid': 'playcircleIcon'
}]
}));
var actualHomeIcon = _react.screen.getByTestId('homeIcon').textContent.codePointAt();
var expectedHomeIcon = 983227; // decimal converted charCode of Unicode 'home' character
var actualDemosyncIcon = _react.screen.getByTestId('demosyncIcon').textContent.codePointAt();
var expectedDemosyncIcon = 983355; // decimal converted charCode of Unicode 'demosync' character
var actualPlayCircleIcon = _react.screen.getByTestId('playcircleIcon').textContent.codePointAt();
var expectedPlayCircleIcon = 983312; // decimal converted charCode of Unicode 'playcircle' character
expect(actualHomeIcon).toBe(expectedHomeIcon);
expect(actualDemosyncIcon).toBe(expectedDemosyncIcon);
expect(actualPlayCircleIcon).toBe(expectedPlayCircleIcon);
});
test('should render sprites', function () {
var simpleAnimationProps = {
src: 'dummyimage',
rows: 2,
columns: 2
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
tabs: [{
title: '',
sprite: simpleAnimationProps,
'data-testid': 'sprite'
}]
}));
var sprite = _react.screen.getByTestId('sprite');
expect(sprite).toBeInTheDocument();
});
test('should disable the list icon when collapsed and all tabs are disabled', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
"data-testid": "tabGroup",
collapsed: true,
orientation: "vertical",
tabs: [{
title: 'Home',
disabled: true
}, {
title: 'Button',
disabled: true
}, {
title: 'Item',
disabled: true
}]
}));
var iconList = _react.screen.getByTestId('tabGroup').children.item(0);
expect(iconList).toHaveAttribute('aria-disabled', 'true');
});
test('should not disable the list icon when collapsed and all tabs are not disabled', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
"data-testid": "tabGroup",
collapsed: true,
orientation: "vertical",
tabs: [{
title: 'Home',
disabled: true
}, {
title: 'Button',
disabled: false
}, {
title: 'Item',
disabled: true
}]
}));
var iconList = _react.screen.getByTestId('tabGroup').children.item(0);
expect(iconList).toHaveAttribute('aria-disabled', 'false');
});
test('should fire `onTabClick` with `onTabClick` type when a tab is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
var handleTabClick = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
tabs: [{
title: 'Home',
icon: 'home',
onTabClick: handleTabClick
}, {
title: 'Button',
icon: 'demosync'
}, {
title: 'Item',
icon: 'playcircle'
}]
}));
yield user.click(_react.screen.getByRole('tablist').children[0]);
var expected = {
type: 'onTabClick'
};
var actual = handleTabClick.mock.calls.length && handleTabClick.mock.calls[0][0];
expect(actual).toMatchObject(expected);
}));
});