react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
347 lines (298 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
/**
* @jest-environment jest-environment-puppeteer
*/
var bootstrap = function bootstrap() {
var page, scripts, _i, _scripts, path;
return _regenerator["default"].async(function bootstrap$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return _regenerator["default"].awrap(global.browser.newPage());
case 2:
page = _context.sent;
scripts = ['./node_modules/react/umd/react.development.js', './node_modules/react-dom/umd/react-dom.development.js', './dist/umd/react-virtualized.js'];
_i = 0, _scripts = scripts;
case 5:
if (!(_i < _scripts.length)) {
_context.next = 12;
break;
}
path = _scripts[_i];
_context.next = 9;
return _regenerator["default"].awrap(page.addScriptTag({
path: path
}));
case 9:
_i++;
_context.next = 5;
break;
case 12:
return _context.abrupt("return", page);
case 13:
case "end":
return _context.stop();
}
}
});
};
var renderWindowScroller = function renderWindowScroller(_ref) {
var scrollElement = _ref.scrollElement;
var render = window.ReactDOM.render;
var createElement = window.React.createElement;
var WindowScroller = window.ReactVirtualized.WindowScroller;
var container = document.createElement('div');
container.id = 'container';
container.style.margin = '100px';
container.style.padding = '50px';
document.body.appendChild(container);
document.body.style.margin = 0;
if (scrollElement === 'container') {
container.style.width = '100%';
container.style.height = '100%';
container.style.overflow = 'auto';
}
render(createElement(WindowScroller, {
scrollElement: scrollElement === 'container' ? container : window,
onScroll: window.scrollFn,
onResize: window.resizeFn
}, function () {
return createElement('div', {
style: {
width: 2000,
height: 3000
}
});
}), container);
};
var delay = function delay(time) {
return new Promise(function (resolve) {
return setTimeout(resolve, time);
});
};
test('save position after resize and then scroll in window', function _callee() {
var page, scrollFn, resizeFn;
return _regenerator["default"].async(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return _regenerator["default"].awrap(bootstrap());
case 2:
page = _context2.sent;
scrollFn = jest.fn();
resizeFn = jest.fn();
_context2.next = 7;
return _regenerator["default"].awrap(page.exposeFunction('scrollFn', scrollFn));
case 7:
_context2.next = 9;
return _regenerator["default"].awrap(page.exposeFunction('resizeFn', resizeFn));
case 9:
_context2.next = 11;
return _regenerator["default"].awrap(page.setViewport({
width: 400,
height: 600
}));
case 11:
_context2.next = 13;
return _regenerator["default"].awrap(page.evaluate(renderWindowScroller, {
scrollElement: 'window'
}));
case 13:
_context2.next = 15;
return _regenerator["default"].awrap(page.evaluate(function () {
return window.scrollTo(610, 830);
}));
case 15:
_context2.next = 17;
return _regenerator["default"].awrap(delay(100));
case 17:
_context2.next = 19;
return _regenerator["default"].awrap(page.setViewport({
width: 300,
height: 500
}));
case 19:
_context2.next = 21;
return _regenerator["default"].awrap(delay(100));
case 21:
_context2.next = 23;
return _regenerator["default"].awrap(page.evaluate(function () {
return window.scrollTo(620, 840);
}));
case 23:
_context2.next = 25;
return _regenerator["default"].awrap(delay(100));
case 25:
_context2.next = 27;
return _regenerator["default"].awrap(page.close());
case 27:
expect(scrollFn.mock.calls).toEqual([[{
scrollLeft: 610 - 150,
scrollTop: 830 - 150
}], [{
scrollLeft: 620 - 150,
scrollTop: 840 - 150
}]]);
expect(resizeFn.mock.calls).toEqual([[{
width: 300,
height: 500
}]]);
case 29:
case "end":
return _context2.stop();
}
}
});
});
test('save position after resize and then scroll in container', function _callee2() {
var page, scrollFn, resizeFn;
return _regenerator["default"].async(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return _regenerator["default"].awrap(bootstrap());
case 2:
page = _context3.sent;
scrollFn = jest.fn();
resizeFn = jest.fn();
_context3.next = 7;
return _regenerator["default"].awrap(page.exposeFunction('scrollFn', scrollFn));
case 7:
_context3.next = 9;
return _regenerator["default"].awrap(page.exposeFunction('resizeFn', resizeFn));
case 9:
_context3.next = 11;
return _regenerator["default"].awrap(page.setViewport({
width: 400,
height: 600
}));
case 11:
_context3.next = 13;
return _regenerator["default"].awrap(page.evaluate(renderWindowScroller, {
scrollElement: 'container'
}));
case 13:
_context3.next = 15;
return _regenerator["default"].awrap(page.$eval('#container', function (el) {
return el.scrollTo(610, 830);
}));
case 15:
_context3.next = 17;
return _regenerator["default"].awrap(delay(100));
case 17:
_context3.next = 19;
return _regenerator["default"].awrap(page.setViewport({
width: 300,
height: 500
}));
case 19:
_context3.next = 21;
return _regenerator["default"].awrap(delay(100));
case 21:
_context3.next = 23;
return _regenerator["default"].awrap(page.$eval('#container', function (el) {
return el.scrollTo(620, 840);
}));
case 23:
_context3.next = 25;
return _regenerator["default"].awrap(delay(100));
case 25:
_context3.next = 27;
return _regenerator["default"].awrap(page.close());
case 27:
expect(scrollFn.mock.calls).toEqual([[{
scrollLeft: 610 - 50,
scrollTop: 830 - 50
}], [{
scrollLeft: 620 - 50,
scrollTop: 840 - 50
}]]);
expect(resizeFn.mock.calls).toEqual([[{
width: 500,
height: 700
}], [{
width: 400,
height: 600
}]]);
case 29:
case "end":
return _context3.stop();
}
}
});
});
test('react on container resize without window changing', function _callee3() {
var page, resizeFn;
return _regenerator["default"].async(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return _regenerator["default"].awrap(bootstrap());
case 2:
page = _context4.sent;
resizeFn = jest.fn();
_context4.next = 6;
return _regenerator["default"].awrap(page.exposeFunction('resizeFn', resizeFn));
case 6:
_context4.next = 8;
return _regenerator["default"].awrap(page.evaluate(function () {
var render = window.ReactDOM.render;
var createElement = window.React.createElement;
var WindowScroller = window.ReactVirtualized.WindowScroller;
var wrapper = document.createElement('div');
wrapper.id = 'wrapper';
Object.assign(wrapper.style, {
width: '1000px',
height: '800px',
display: 'flex'
});
var container = document.createElement('div');
Object.assign(container.style, {
flex: '1'
});
wrapper.appendChild(container);
document.body.style.margin = 0;
document.body.appendChild(wrapper);
render(createElement(WindowScroller, {
scrollElement: container,
onResize: window.resizeFn
}, function () {
return null;
}), container);
}));
case 8:
_context4.next = 10;
return _regenerator["default"].awrap(delay(100));
case 10:
_context4.next = 12;
return _regenerator["default"].awrap(page.$eval('#wrapper', function (el) {
el.style.width = '500px';
el.style.height = '700px';
}));
case 12:
_context4.next = 14;
return _regenerator["default"].awrap(delay(100));
case 14:
_context4.next = 16;
return _regenerator["default"].awrap(page.close());
case 16:
expect(resizeFn.mock.calls).toEqual([[{
width: 1000,
height: 800
}], [{
width: 500,
height: 700
}]]);
case 17:
case "end":
return _context4.stop();
}
}
});
});