@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
621 lines (620 loc) • 24.9 kB
JavaScript
"use strict";
var _pointer = require("@enact/spotlight/src/pointer");
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 _Button = _interopRequireDefault(require("../../Button"));
var _ContextualPopupDecorator = require("../ContextualPopupDecorator");
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 ContextualButton = (0, _ContextualPopupDecorator.ContextualPopupDecorator)(_Button["default"]);
var keyDown = function keyDown(keyCode) {
return function (picker) {
return _react.fireEvent.keyDown(picker, {
keyCode: keyCode
});
};
};
var leftKeyDown = keyDown(37);
describe('ContextualPopupDecorator Specs', function () {
beforeEach(function () {
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
return {
width: 1800,
height: 1000,
top: 500,
left: 500,
bottom: 0,
right: 0
};
});
});
test('should emit onOpen event with type when opening', function () {
var handleOpen = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
onOpen: handleOpen,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var expected = 1;
var expectedType = {
type: 'onOpen'
};
var actual = handleOpen.mock.calls.length && handleOpen.mock.calls[0][0];
expect(handleOpen).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should emit onClose event with type when clicking on contextual button', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualButton = _react.screen.getByRole('button');
yield user.click(contextualButton);
var expected = 1;
var expectedType = {
type: 'onClose'
};
var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
expect(handleClose).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
}));
test('should render component into FloatingLayer if open', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = message;
var actual = contextualPopup.children.item(0);
expect(actual).toHaveTextContent(expected);
});
test('should not render into FloatingLayer if not open', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var popup = _react.screen.queryByText(message);
expect(popup).toBeNull();
});
test('should not close popup when clicking outside if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
"data-testid": "outsideArea",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
noAutoDismiss: true,
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var outsideArea = _react.screen.getByTestId('outsideArea');
yield user.click(outsideArea);
expect(handleClose).not.toHaveBeenCalled();
}));
test('should have \'below\' className when direction is set to \'below\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "below",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'below';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'below center\' className when direction is set to \'below center\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "below center",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'below center';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'below left\' className when direction is set to \'below left\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "below left",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'below left';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'below right\' className when direction is set to \'below right\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "below right",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'below right';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'right bottom\' className when direction is set to \'right bottom\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "right bottom",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'right bottom';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'right middle\' className when direction is set to \'right middle\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "right middle",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'right middle';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'right top\' className when direction is set to \'right top\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "right top",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'right top';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'above\' className when direction is set to \'above\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "above",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'above';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'above center\' className when direction is set to \'above center\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "above center",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'above center';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'above left\' className when direction is set to \'above left\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "above left",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'above left';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'above right\' className when direction is set to \'above right\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "above right",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'above right';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'left bottom\' className when direction is set to \'left bottom\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "left bottom",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'left bottom';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'left middle\' className when direction is set to \'left middle\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "left middle",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'left middle';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should have \'left top\' className when direction is set to \'left top\'', function () {
var handleClose = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var message = 'goodbye';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "left top",
onClose: handleClose,
open: true,
popupComponent: function popupComponent() {
return message;
},
children: "Hello"
})
}));
var contextualPopup = _react.screen.getByRole('alert');
var expected = 'left top';
var actual = contextualPopup.children.item(0);
expect(actual).toHaveClass(expected);
});
test('should set pointerMode to be false when directional key is pressed', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
}));
var contextualButton = _react.screen.getByRole('alert');
leftKeyDown(contextualButton);
var expected = false;
var pointerMode = (0, _pointer.getPointerMode)();
expect(pointerMode).toBe(expected);
});
test('should close popup if prop \'open\' is omitted on rerender', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
})),
rerender = _render.rerender;
var firstRender = _react.screen.getAllByRole('button').length;
var expectedFirst = 3;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
}));
var secondRender = _react.screen.getAllByRole('button').length;
var expectedSecond = 1;
expect(firstRender).toBe(expectedFirst);
expect(secondRender).toBe(expectedSecond);
});
test('should open popup if prop \'open\' is added on rerender', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
})),
rerender = _render2.rerender;
var firstRender = _react.screen.getAllByRole('button').length;
var expectedFirst = 1;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
}));
var secondRender = _react.screen.getAllByRole('button').length;
var expectedSecond = 3;
expect(firstRender).toBe(expectedFirst);
expect(secondRender).toBe(expectedSecond);
});
test('should capture \'onKeyDown\' event from outside of popup', function () {
var handleOnKeyDown = jest.fn();
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
onKeyDown: handleOnKeyDown,
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "first"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "second"
})]
});
},
children: "Hello"
})
}));
var button = _react.screen.getAllByRole('button')[0];
leftKeyDown(button);
expect(handleOnKeyDown).toHaveBeenCalled();
});
test('should render floatingLayer according to prop \'scrimType\'', function () {
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
scrimType: "holepunch",
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "Button"
})
});
},
children: "Hello"
})
})),
rerender = _render3.rerender;
var scrimDivFirst = _react.screen.getByRole('alert').previousElementSibling;
var expectedFirst = 'holePunchScrim';
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
scrimType: "transparent",
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "Button"
})
});
},
children: "Hello"
})
}));
var scrimDivSecond = _react.screen.getByRole('alert').previousElementSibling;
var expectedSecond = 'transparent';
expect(scrimDivFirst).toHaveClass(expectedFirst);
expect(scrimDivSecond).toHaveClass(expectedSecond);
});
test('should create and observe with `ResizeObserver` when the popup opened and disconnect when the popup closed', function () {
var originalObserver = global.ResizeObserver;
var MockObserverInstance = {
observe: jest.fn(),
disconnect: jest.fn()
};
global.ResizeObserver = jest.fn().mockImplementation(function () {
return MockObserverInstance;
});
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
"data-testid": "contextualButton",
open: true,
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "Button"
})
});
},
children: "Hello"
})
})),
rerender = _render4.rerender;
var contextualButton = _react.screen.getByTestId('contextualButton');
expect(contextualButton).toBeInTheDocument();
expect(MockObserverInstance.observe).toHaveBeenCalled();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
"data-testid": "contextualButton",
popupComponent: function popupComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "Button"
})
});
},
children: "Hello"
})
}));
expect(MockObserverInstance.disconnect).toHaveBeenCalled();
global.ResizeObserver = originalObserver;
});
});