@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
285 lines (284 loc) • 12.7 kB
JavaScript
;
var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _Item = require("../../Item");
var _PopupTabLayout = require("../PopupTabLayout");
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); }); }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var keyDown = function keyDown(keyCode) {
return function (elm) {
return _react.fireEvent.keyDown(elm, {
keyCode: keyCode
});
};
};
var enterKeyDown = keyDown(13);
var escapeKeyDown = keyDown(27);
var leftKeyDown = keyDown(37);
var downKeyDown = keyDown(40);
var keyUp = function keyUp(keyCode) {
return function (elm) {
return _react.fireEvent.keyUp(elm, {
keyCode: keyCode
});
};
};
var enterKeyUp = keyUp(13);
var escapeKeyUp = keyUp(27);
var downKeyUp = keyUp(40);
describe('PopupTabLayout specs', function () {
test('should be rendered opened if open is set to true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popupTabLayout"
})
})
}));
var popupTabLayout = _react.screen.getByText('popupTabLayout');
expect(popupTabLayout).toBeInTheDocument();
});
test('should not be rendered if open is set to false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popupTabLayout"
})
})
}));
var popupTabLayout = _react.screen.queryByText('popupTabLayout');
expect(popupTabLayout).toBeNull();
});
test('should apply \'ease-in-out\' class when noAnimation is false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
"data-testid": "popupTabLayout",
noAnimation: false,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popupTabLayout"
})
})
}));
var expected = 'ease-in-out';
var actual = _react.screen.getByTestId('popupTabLayout').parentElement.parentElement.parentElement.parentElement;
expect(actual).toHaveClass(expected);
});
test('should not apply \'ease-in-out\' class when noAnimation is true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
"data-testid": "popupTabLayout",
noAnimation: true,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popupTabLayout"
})
})
}));
var expected = 'ease-in-out';
var actual = _react.screen.getByTestId('popupTabLayout').parentElement.parentElement.parentElement.parentElement;
expect(actual).not.toHaveClass(expected);
});
test('should not close popupTabLayout on escape if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
noAutoDismiss: true,
onClose: handleClose,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popupTabLayout"
})
})
}));
_react.fireEvent.keyUp(_react.screen.getByText('popupTabLayout'), {
keyCode: 27
});
yield (0, _react.waitFor)(function () {
expect(handleClose).not.toHaveBeenCalled();
});
}));
test('should display items from second tab', /*#__PURE__*/_asyncToGenerator(function* () {
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "First Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 2"
})]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "Second Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 4"
})]
})
})
})]
})
}));
var thirdItem = _react.screen.queryByText('Item 3');
var fourthItem = _react.screen.queryByText('Item 4');
expect(thirdItem).not.toBeInTheDocument();
expect(fourthItem).not.toBeInTheDocument();
var secondTab = _react.screen.getByText('Second Tab Title');
yield user.click(secondTab);
thirdItem = _react.screen.getByText('Item 3');
fourthItem = _react.screen.getByText('Item 4');
expect(thirdItem).toBeInTheDocument();
expect(fourthItem).toBeInTheDocument();
}));
test('should fire onTabClick event for 5-way Select on tab element', function () {
var onTabClick = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
onTabClick: onTabClick,
title: "First Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 2"
})]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "Second Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 4"
})]
})
})
})]
})
}));
var firstTab = _react.screen.getByText('First Tab Title');
enterKeyDown(firstTab);
enterKeyUp(firstTab);
expect(onTabClick).toHaveBeenCalled();
});
test('should fire onBack event when returning to previous tab', function () {
var handleOnBack = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanels, {
index: 1,
onBack: handleOnBack,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 2"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 4"
})]
})]
})
})
})
}));
var tab = _react.screen.getByText('Tab Title');
escapeKeyDown(tab);
escapeKeyUp(tab);
expect(handleOnBack).toHaveBeenCalled();
});
test('should fire onKeyDown event for 5-way navigation inside Tab element', function () {
var onKeyDown = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "First Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
onKeyDown: onKeyDown,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 2"
})]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "Second Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 4"
})]
})
})
})]
})
}));
var firstItem = _react.screen.getByText('Item 1');
downKeyDown(firstItem);
downKeyUp(firstItem);
expect(onKeyDown).toHaveBeenCalled();
});
test('should fire onBack event when left key pressed from the second TabPanel', function () {
var onBack = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
title: "Tab Title",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanels, {
index: 1,
onBack: onBack,
rtl: false,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 2"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
children: "Item 4"
})]
})]
})
})
})
}));
var firstItem = _react.screen.getByText('Item 3');
leftKeyDown(firstItem);
expect(onBack).toHaveBeenCalled();
});
});