@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
475 lines (474 loc) • 19.4 kB
JavaScript
;
var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Popup = require("../Popup");
var _jsxRuntime = require("react/jsx-runtime");
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');
describe('Popup 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)(_Popup.Popup, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByText('popup');
expect(popup).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)(_Popup.Popup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.queryByText('popup');
expect(popup).toBeNull();
});
test('should set role to alert by default', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toBeInTheDocument();
});
test('should allow role to be overridden', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
role: "dialog",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('dialog');
expect(popup).toBeInTheDocument();
});
test('should set "data-webos-voice-exclusive" when popup is open', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveAttribute('data-webos-voice-exclusive');
});
test('should set "data-webos-voice-disabled" when voice control is disabled', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
"data-webos-voice-disabled": true,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveAttribute('data-webos-voice-disabled');
});
test('should fire onClose event with type and detail info when Popup is closed', function () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
onClose: handleClose,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
_react.fireEvent.keyUp(_react.screen.getByText('popup'), {
keyCode: 27
});
var expectedType = {
type: 'onClose',
detail: {
inputType: 'key'
}
};
var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
expect(actual).toMatchObject(expectedType);
});
describe('with position bottom', function () {
test('should have bottom class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "bottom",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('bottom');
});
test('should have bottom class in popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "bottom",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('bottom');
});
});
describe('with position left', function () {
test('should have left class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "left",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('left');
});
test('should have left class in popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "left",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('left');
});
});
describe('with position right', function () {
test('should have right class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "right",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('right');
});
test('should have right class in popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "right",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('right');
});
});
describe('with position top', function () {
test('should have top class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "top",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('top');
});
test('should have top class popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "top",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('top');
});
});
describe('with position center', function () {
test('should have center class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "center",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('center');
});
test('should have center class popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "center",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('center');
});
});
describe('with position fullscreen', function () {
test('should have fullscreen class', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "fullscreen",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var popup = _react.screen.getByRole('alert');
expect(popup).toHaveClass('fullscreen');
});
test('should have fullscreen class popup transition container', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "fullscreen",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(transitionContainer).toHaveClass('fullscreen');
});
});
describe('with position changes dynamically - [GT-28270]', function () {
test('should not have top class when position change from top to any other position', function () {
var firstPosition = 'top';
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: firstPosition,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
})),
rerender = _render.rerender;
var popup = _react.screen.getByRole('alert');
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
expect(popup).toHaveClass(firstPosition);
expect(transitionContainer).toHaveClass(firstPosition);
expect(popup).not.toHaveClass('fullscreen');
expect(transitionContainer).not.toHaveClass('fullscreen');
expect(popup).not.toHaveClass('center');
expect(transitionContainer).not.toHaveClass('center');
expect(popup).not.toHaveClass('bottom');
expect(transitionContainer).not.toHaveClass('bottom');
expect(popup).not.toHaveClass('right');
expect(transitionContainer).not.toHaveClass('right');
expect(popup).not.toHaveClass('left');
expect(transitionContainer).not.toHaveClass('left');
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "fullscreen",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(popup).not.toHaveClass(firstPosition);
expect(transitionContainer).not.toHaveClass(firstPosition);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "center",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(popup).not.toHaveClass(firstPosition);
expect(transitionContainer).not.toHaveClass(firstPosition);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "bottom",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(popup).not.toHaveClass(firstPosition);
expect(transitionContainer).not.toHaveClass(firstPosition);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "left",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(popup).not.toHaveClass(firstPosition);
expect(transitionContainer).not.toHaveClass(firstPosition);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
position: "right",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(popup).not.toHaveClass(firstPosition);
expect(transitionContainer).not.toHaveClass(firstPosition);
});
});
test('should apply `ease-in-out` class to transition container when noAnimation is false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: false,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
var expected = 'ease-in-out';
expect(transitionContainer).toHaveClass(expected);
});
test('should apply \'shown\' class when visible with noAnimation', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: true,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var expected = 'shown';
var actual = _react.screen.getByRole('alert').parentElement.parentElement;
expect(actual).toHaveClass(expected);
});
test('should close popup on escape', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
onClose: handleClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
_react.fireEvent.keyUp(_react.screen.getByText('popup'), {
keyCode: 27
});
yield (0, _react.waitFor)(function () {
expect(handleClose).toHaveBeenCalled();
});
}));
test('should call onShow after popup with noAnimation is opened', function () {
var handleShow = jest.fn();
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: true,
onShow: handleShow,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
})),
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: true,
onShow: handleShow,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(handleShow).toHaveBeenCalled();
});
test('should call onHide after popup with noAnimation is closed', function () {
var handleHide = jest.fn();
var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: true,
onHide: handleHide,
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
})),
rerender = _render3.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
noAnimation: true,
onHide: handleHide,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
expect(handleHide).toHaveBeenCalled();
});
test('should apply `hidden` class when popup closes', function () {
var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
open: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
})),
rerender = _render4.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "popup"
})
})
}));
var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
var expected = 'hidden';
expect(transitionContainer).toHaveClass(expected);
});
});