mirror of
https://github.com/wu736139669/ASHEBShop-h5.git
synced 2026-10-07 19:26:23 +00:00
475 lines
17 KiB
JavaScript
475 lines
17 KiB
JavaScript
import _Object$keys from 'babel-runtime/core-js/object/keys';
|
|
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
|
|
import _extends from 'babel-runtime/helpers/extends';
|
|
import React from 'react';
|
|
import { findDOMNode } from 'react-dom';
|
|
import { render } from '../TestUtils';
|
|
import MultiGrid from './MultiGrid';
|
|
import { CellMeasurerCache } from '../CellMeasurer';
|
|
|
|
// These tests only focus on what MultiGrid does specifically.
|
|
// The inner Grid component is tested in depth elsewhere.
|
|
describe('MultiGrid', function () {
|
|
function defaultCellRenderer(_ref) {
|
|
var columnIndex = _ref.columnIndex,
|
|
key = _ref.key,
|
|
rowIndex = _ref.rowIndex,
|
|
style = _ref.style;
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{
|
|
className: 'gridItem',
|
|
key: key,
|
|
style: style
|
|
},
|
|
'row:' + rowIndex + ', column:' + columnIndex
|
|
);
|
|
}
|
|
|
|
function getMarkup() {
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
|
|
return React.createElement(MultiGrid, _extends({
|
|
cellRenderer: defaultCellRenderer,
|
|
columnCount: 50,
|
|
columnWidth: 50,
|
|
fixedColumnCount: 2,
|
|
fixedRowCount: 1,
|
|
height: 300,
|
|
overscanColumnCount: 0,
|
|
overscanRowCount: 0,
|
|
autoHeight: false,
|
|
rowHeight: 20,
|
|
rowCount: 100,
|
|
width: 400
|
|
}, props));
|
|
}
|
|
|
|
describe('fixed columns and rows', function () {
|
|
it('should render 4 Grids when configured for fixed columns and rows', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 1
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(grids.length).toEqual(4);
|
|
|
|
var _grids = _slicedToArray(grids, 4),
|
|
topLeft = _grids[0],
|
|
topRight = _grids[1],
|
|
bottomLeft = _grids[2],
|
|
bottomRight = _grids[3];
|
|
|
|
expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden');
|
|
expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden');
|
|
expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden');
|
|
expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden');
|
|
expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden');
|
|
expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden');
|
|
expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto');
|
|
expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto');
|
|
});
|
|
|
|
it('should render 2 Grids when configured for fixed columns only', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 0
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(grids.length).toEqual(2);
|
|
|
|
var _grids2 = _slicedToArray(grids, 2),
|
|
bottomLeft = _grids2[0],
|
|
bottomRight = _grids2[1];
|
|
|
|
expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden');
|
|
expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden');
|
|
expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto');
|
|
expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto');
|
|
});
|
|
|
|
it('should render 2 Grids when configured for fixed rows only', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 1
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(grids.length).toEqual(2);
|
|
|
|
var _grids3 = _slicedToArray(grids, 2),
|
|
topRight = _grids3[0],
|
|
bottomRight = _grids3[1];
|
|
|
|
expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden');
|
|
expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden');
|
|
expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto');
|
|
expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto');
|
|
});
|
|
|
|
it('should render 1 Grid when configured for neither fixed columns and rows', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 0
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(grids.length).toEqual(1);
|
|
|
|
var _grids4 = _slicedToArray(grids, 1),
|
|
bottomRight = _grids4[0];
|
|
|
|
expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto');
|
|
expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto');
|
|
});
|
|
|
|
it('should adjust the number of Grids when fixed column or row counts change', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 2,
|
|
fixedRowCount: 1
|
|
})));
|
|
expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(4);
|
|
rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 0
|
|
})));
|
|
expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(1);
|
|
rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 2
|
|
})));
|
|
expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(2);
|
|
});
|
|
});
|
|
|
|
describe('#recomputeGridSize', function () {
|
|
it('should clear calculated cached styles in recomputeGridSize', function () {
|
|
var fixedRowHeight = 75;
|
|
var fixedColumnWidth = 100;
|
|
|
|
function variableRowHeight(_ref2) {
|
|
var index = _ref2.index;
|
|
|
|
if (index === 0) {
|
|
return fixedRowHeight;
|
|
}
|
|
return 20;
|
|
}
|
|
function variableColumnWidth(_ref3) {
|
|
var index = _ref3.index;
|
|
|
|
if (index === 0) {
|
|
return fixedColumnWidth;
|
|
}
|
|
return 50;
|
|
}
|
|
|
|
var multiGrid = void 0;
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 1,
|
|
rowHeight: variableRowHeight,
|
|
columnWidth: variableColumnWidth,
|
|
ref: function ref(_ref4) {
|
|
multiGrid = _ref4;
|
|
}
|
|
})));
|
|
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(grids.length).toEqual(4);
|
|
|
|
var _grids5 = _slicedToArray(grids, 4),
|
|
topLeft = _grids5[0],
|
|
topRight = _grids5[1],
|
|
bottomLeft = _grids5[2],
|
|
bottomRight = _grids5[3];
|
|
|
|
expect(topLeft.style.getPropertyValue('height')).toEqual('75px');
|
|
expect(topRight.style.getPropertyValue('height')).toEqual('75px');
|
|
expect(bottomLeft.style.getPropertyValue('height')).toEqual('225px');
|
|
expect(bottomRight.style.getPropertyValue('height')).toEqual('225px');
|
|
|
|
expect(topLeft.style.getPropertyValue('width')).toEqual('100px');
|
|
expect(topRight.style.getPropertyValue('width')).toEqual('300px');
|
|
expect(bottomLeft.style.getPropertyValue('width')).toEqual('100px');
|
|
expect(bottomRight.style.getPropertyValue('width')).toEqual('300px');
|
|
|
|
expect(multiGrid._topGridHeight).toEqual(75);
|
|
expect(multiGrid._leftGridWidth).toEqual(100);
|
|
|
|
fixedRowHeight = 125;
|
|
fixedColumnWidth = 75;
|
|
multiGrid.recomputeGridSize();
|
|
expect(multiGrid._topGridHeight).toEqual(125);
|
|
expect(multiGrid._leftGridWidth).toEqual(75);
|
|
|
|
multiGrid.forceUpdate();
|
|
|
|
var gridsAfter = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
expect(gridsAfter.length).toEqual(4);
|
|
|
|
var _gridsAfter = _slicedToArray(gridsAfter, 4),
|
|
topLeftAfter = _gridsAfter[0],
|
|
topRightAfter = _gridsAfter[1],
|
|
bottomLeftAfter = _gridsAfter[2],
|
|
bottomRightAfter = _gridsAfter[3];
|
|
|
|
expect(topLeftAfter.style.getPropertyValue('height')).toEqual('125px');
|
|
expect(topRightAfter.style.getPropertyValue('height')).toEqual('125px');
|
|
expect(bottomLeftAfter.style.getPropertyValue('height')).toEqual('175px');
|
|
expect(bottomRightAfter.style.getPropertyValue('height')).toEqual('175px');
|
|
|
|
expect(topLeftAfter.style.getPropertyValue('width')).toEqual('75px');
|
|
expect(topRightAfter.style.getPropertyValue('width')).toEqual('325px');
|
|
expect(bottomLeftAfter.style.getPropertyValue('width')).toEqual('75px');
|
|
expect(bottomRightAfter.style.getPropertyValue('width')).toEqual('325px');
|
|
});
|
|
});
|
|
|
|
describe('scrollToColumn and scrollToRow', function () {
|
|
it('should adjust :scrollLeft for the main Grid when scrollToColumn is used', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
columnWidth: 50,
|
|
fixedColumnCount: 2,
|
|
scrollToAlignment: 'start',
|
|
scrollToColumn: 19
|
|
})));
|
|
// Bottom-right Grid is the last Grid
|
|
var grid = rendered.querySelectorAll('.ReactVirtualized__Grid')[3];
|
|
// 20th column, less 2 for the fixed-column Grid, 50px column width
|
|
expect(grid.scrollLeft).toEqual(850);
|
|
});
|
|
|
|
it('should adjust :scrollTop for the main Grid when scrollToRow is used', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedRowCount: 1,
|
|
rowHeight: 50,
|
|
scrollToAlignment: 'start',
|
|
scrollToRow: 19
|
|
})));
|
|
// Bottom-right Grid is the last Grid
|
|
var grid = rendered.querySelectorAll('.ReactVirtualized__Grid')[3];
|
|
// 20th row, less 1 for the fixed-row Grid, 50px row width
|
|
expect(grid.scrollTop).toEqual(900);
|
|
});
|
|
});
|
|
|
|
describe('#forceUpdateGrids', function () {
|
|
it('should call forceUpdate() on inner Grids', function () {
|
|
var cellRenderer = jest.fn();
|
|
cellRenderer.mockImplementation(function (_ref5) {
|
|
var key = _ref5.key;
|
|
return React.createElement('div', { key: key, style: {} });
|
|
});
|
|
|
|
var rendered = render(getMarkup({
|
|
cellRenderer: cellRenderer,
|
|
columnCount: 2,
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 1,
|
|
rowCount: 2
|
|
}));
|
|
|
|
expect(cellRenderer.mock.calls).toHaveLength(4);
|
|
|
|
cellRenderer.mockReset();
|
|
rendered.forceUpdateGrids();
|
|
|
|
expect(cellRenderer.mock.calls).toHaveLength(4);
|
|
});
|
|
});
|
|
|
|
describe('#invalidateCellSizeAfterRender', function () {
|
|
it('should call invalidateCellSizeAfterRender() on inner Grids', function () {
|
|
var cellRenderer = jest.fn();
|
|
cellRenderer.mockImplementation(function (_ref6) {
|
|
var key = _ref6.key;
|
|
return React.createElement('div', { key: key, style: {} });
|
|
});
|
|
|
|
var rendered = render(getMarkup({
|
|
cellRenderer: cellRenderer,
|
|
columnCount: 2,
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 1,
|
|
rowCount: 2
|
|
}));
|
|
|
|
cellRenderer.mockReset();
|
|
rendered.invalidateCellSizeAfterRender({
|
|
columnIndex: 0,
|
|
rowIndex: 0
|
|
});
|
|
|
|
rendered.forceUpdate();
|
|
|
|
expect(cellRenderer.mock.calls).toHaveLength(4);
|
|
});
|
|
|
|
it('should specify itself as the :parent for CellMeasurer rendered cells', function () {
|
|
// HACK For some reason, using Jest mock broke here
|
|
var savedParent = void 0;
|
|
function cellRenderer(_ref7) {
|
|
var key = _ref7.key,
|
|
parent = _ref7.parent;
|
|
|
|
savedParent = parent;
|
|
return React.createElement('div', { key: key, style: {} });
|
|
}
|
|
|
|
var rendered = render(getMarkup({
|
|
cellRenderer: cellRenderer,
|
|
columnCount: 2,
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 1,
|
|
rowCount: 2
|
|
}));
|
|
|
|
expect(savedParent).toBe(rendered);
|
|
});
|
|
});
|
|
|
|
describe('styles', function () {
|
|
it('should support custom style for the outer MultiGrid wrapper element', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
style: { backgroundColor: 'black' }
|
|
})));
|
|
expect(rendered.style.backgroundColor).toEqual('black');
|
|
});
|
|
|
|
it('should support custom styles for each Grid', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
fixedColumnCount: 2,
|
|
fixedRowCount: 1,
|
|
styleBottomLeftGrid: { backgroundColor: 'green' },
|
|
styleBottomRightGrid: { backgroundColor: 'red' },
|
|
styleTopLeftGrid: { backgroundColor: 'blue' },
|
|
styleTopRightGrid: { backgroundColor: 'purple' }
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
var topLeftGrid = grids[0];
|
|
var topRightGrid = grids[1];
|
|
var bottomLeftGrid = grids[2];
|
|
var bottomRightGrid = grids[3];
|
|
expect(topLeftGrid.style.backgroundColor).toEqual('blue');
|
|
expect(topRightGrid.style.backgroundColor).toEqual('purple');
|
|
expect(bottomLeftGrid.style.backgroundColor).toEqual('green');
|
|
expect(bottomRightGrid.style.backgroundColor).toEqual('red');
|
|
});
|
|
});
|
|
describe('scrollTop and scrollLeft', function () {
|
|
it('should adjust :scrollLeft for top-right and main grids when scrollLeft is used', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
columnWidth: 50,
|
|
fixedColumnCount: 2,
|
|
scrollLeft: 850
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
var topRightGrid = grids[1];
|
|
var bottomRightGrid = grids[3];
|
|
expect(topRightGrid.scrollLeft).toEqual(850);
|
|
expect(bottomRightGrid.scrollLeft).toEqual(850);
|
|
});
|
|
|
|
it('should adjust :scrollTop for bottom-left and main grids when scrollTop is used', function () {
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
columnWidth: 50,
|
|
fixedColumnCount: 2,
|
|
scrollTop: 500
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
var bottomLeftGrid = grids[2];
|
|
var bottomRightGrid = grids[3];
|
|
expect(bottomLeftGrid.scrollTop).toEqual(500);
|
|
expect(bottomRightGrid.scrollTop).toEqual(500);
|
|
});
|
|
|
|
it('should adjust :scrollTop and :scrollLeft when scrollTop and scrollLeft change', function () {
|
|
render(getMarkup());
|
|
var rendered = findDOMNode(render(getMarkup({
|
|
scrollTop: 750,
|
|
scrollLeft: 900
|
|
})));
|
|
var grids = rendered.querySelectorAll('.ReactVirtualized__Grid');
|
|
var topRightGrid = grids[1];
|
|
var bottomLeftGrid = grids[2];
|
|
var bottomRightGrid = grids[3];
|
|
expect(topRightGrid.scrollLeft).toEqual(900);
|
|
expect(bottomRightGrid.scrollLeft).toEqual(900);
|
|
expect(bottomLeftGrid.scrollTop).toEqual(750);
|
|
expect(bottomRightGrid.scrollTop).toEqual(750);
|
|
});
|
|
});
|
|
|
|
describe('deferredMeasurementCache', function () {
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
|
|
function getDeferredMeasurementCache() {
|
|
var deferredMeasurementCache = new CellMeasurerCache({
|
|
fixedHeight: true,
|
|
fixedWidth: true
|
|
});
|
|
|
|
deferredMeasurementCache._columnIndices = {};
|
|
deferredMeasurementCache._rowIndices = {};
|
|
deferredMeasurementCache.has = function (rowIndex, columnIndex) {
|
|
deferredMeasurementCache._columnIndices[columnIndex] = columnIndex;
|
|
deferredMeasurementCache._rowIndices[rowIndex] = rowIndex;
|
|
return true;
|
|
};
|
|
|
|
return deferredMeasurementCache;
|
|
}
|
|
|
|
it('should wrap top-right and bottom-right deferredMeasurementCache if fixedColumnCount is > 0', function () {
|
|
var deferredMeasurementCache = getDeferredMeasurementCache();
|
|
render(getMarkup({
|
|
deferredMeasurementCache: deferredMeasurementCache,
|
|
columnCount: 3,
|
|
fixedColumnCount: 1,
|
|
fixedRowCount: 0,
|
|
rowCount: 1
|
|
}));
|
|
|
|
expect(_Object$keys(deferredMeasurementCache._columnIndices)).toEqual(['0', '1', '2']);
|
|
});
|
|
|
|
it('should not wrap top-right and bottom-right deferredMeasurementCache if fixedColumnCount is 0', function () {
|
|
var deferredMeasurementCache = getDeferredMeasurementCache();
|
|
render(getMarkup({
|
|
deferredMeasurementCache: deferredMeasurementCache,
|
|
columnCount: 2,
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 0,
|
|
rowCount: 1
|
|
}));
|
|
|
|
expect(_Object$keys(deferredMeasurementCache._columnIndices)).toEqual(['0', '1']);
|
|
});
|
|
|
|
it('should wrap bottom-left and bottom-right deferredMeasurementCache if fixedRowCount is > 0', function () {
|
|
var deferredMeasurementCache = getDeferredMeasurementCache();
|
|
render(getMarkup({
|
|
deferredMeasurementCache: deferredMeasurementCache,
|
|
columnCount: 1,
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 1,
|
|
rowCount: 3
|
|
}));
|
|
|
|
expect(_Object$keys(deferredMeasurementCache._rowIndices)).toEqual(['0', '1', '2']);
|
|
});
|
|
|
|
it('should not wrap bottom-left and bottom-right deferredMeasurementCache if fixedRowCount is 0', function () {
|
|
var deferredMeasurementCache = getDeferredMeasurementCache();
|
|
render(getMarkup({
|
|
deferredMeasurementCache: deferredMeasurementCache,
|
|
columnCount: 1,
|
|
fixedColumnCount: 0,
|
|
fixedRowCount: 0,
|
|
rowCount: 2
|
|
}));
|
|
|
|
expect(_Object$keys(deferredMeasurementCache._rowIndices)).toEqual(['0', '1']);
|
|
});
|
|
});
|
|
}); |