fixed-react-data-grid-custom
Version:
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
506 lines (500 loc) • 19.9 kB
JavaScript
import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDataGrid from '../ReactDataGrid';
import { shallow } from 'enzyme';
import helpers from '../helpers/test/GridPropHelpers';
function shallowRenderGrid({
enableCellAutoFocus = undefined,
cellNavigationMode = undefined,
numRows = helpers.rowsCount(),
onCellSelected, onCellDeSelected
}) {
const wrapper = shallow(<ReactDataGrid
columns={helpers.columns}
rowGetter={helpers.rowGetter}
rowsCount={numRows}
enableCellSelect
enableCellAutoFocus={enableCellAutoFocus}
cellNavigationMode={cellNavigationMode}
onCellSelected={onCellSelected}
onCellDeSelected={onCellDeSelected}
/>);
return {
wrapper
};
}
describe('configure enableCellAutoFocus property', () => {
it('passes enableCellAutoFocus property in the Grid cellMetaData', () => {
const enableCellAutoFocus = true;
const { wrapper } = shallowRenderGrid({ enableCellAutoFocus });
expect(wrapper.find('Grid').props().enableCellAutoFocus).toEqual(enableCellAutoFocus);
});
it('sets enableCellAutoFocus to true by default', () => {
const { wrapper } = shallowRenderGrid({});
expect(wrapper.find('Grid').props().enableCellAutoFocus).toBe(true);
});
it('sets enableCellAutoFocus to false if it is configured', () => {
const { wrapper } = shallowRenderGrid({ enableCellAutoFocus: false });
expect(wrapper.find('Grid').props().enableCellAutoFocus).toBe(false);
});
});
//
// var testProps = {
// enableCellSelect: true,
// columns:columns,
// rowGetter:rowGetter,
// rowsCount: _rows.length,
// width:300,
// onRowUpdated : function(update){},
// onCellCopyPaste : function(){},
// onCellsDragged : function(){},
// onGridSort : function(){}
// }
//
// beforeEach(() => {
// var rowsCount = 1000;
// component = TestUtils.renderIntoDocument(<Grid {...testProps}/>);
// });
//
// it('should create a new instance of Grid', () => {
// expect(component).toBeDefined();
// });
//
// it('should render a BaseGrid stub', () => {
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// expect(baseGrid).toBeDefined();
// });
//
//
// it('should render a Toolbar if passed in as props to grid', () => {
// var Toolbar = StubComponent('Toolbar');
// component = TestUtils.renderIntoDocument(<Grid {...testProps} toolbar={<Toolbar/>} />);
// var toolbarInstance = TestUtils.findRenderedComponentWithType(component, Toolbar);
// expect(toolbarInstance).toBeDefined();
// });
//
// it('onToggleFilter trigger of Toolbar should set filter state of grid and render a filterable header row', () => {
// //arrange
// var Toolbar = StubComponent('Toolbar');
// component = TestUtils.renderIntoDocument(<Grid {...testProps} toolbar={<Toolbar/>} />);
// var toolbarInstance = TestUtils.findRenderedComponentWithType(component, Toolbar);
// //act
// toolbarInstance.props.onToggleFilter();
// //assert
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// expect(component.state.canFilter).toBe(true);
// expect(baseGrid.props.headerRows.length).toEqual(2);
// var filterableHeaderRow = baseGrid.props.headerRows[1];
// expect(filterableHeaderRow.ref).toEqual("filterRow");
// });
//
//
// it("should be initialized with correct state", () => {
// expect(component.state).toEqual({
// selectedRows : [],
// selected : {rowIdx : 0, idx : 0},
// copied : null,
// canFilter : false,
// expandedRows : [],
// columnFilters : {},
// sortDirection : null,
// sortColumn : null,
// dragged : null
// });
// });
//
// describe("When cell selection disabled", () => {
//
// it("grid should be initialized with selected state of {rowIdx : -1, idx : -1}", () => {
// component = TestUtils.renderIntoDocument(<Grid
// enableCellSelect={false}
// columns={columns}
// rowGetter={rowGetter}
// rowsCount={_rows.length}
// width={300}/>);
// expect(component.state.selected).toEqual({
// rowIdx : -1,
// idx : -1
// });
// });
//
// });
//
// describe("When row selection enabled", () => {
//
// beforeEach(() => {
// component = TestUtils.renderIntoDocument(<Grid {...testProps} enableRowSelect={true} />);
// });
//
// afterEach(() => {
// component.setState({selectedRows : []});
// });
//
// it("should render an additional Select Row column", () => {
//
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var selectRowCol = baseGrid.props.columns[0];
// expect(baseGrid.props.columns.length).toEqual(columns.length + 1);
// expect(selectRowCol.key).toEqual('select-row');
// expect(TestUtils.isElementOfType(selectRowCol.formatter, CheckboxEditorStub)).toBe(true);
// });
//
// it("clicking header checkbox should toggle select all rows", () => {
// //arrange
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var selectRowCol = baseGrid.props.columns[0];
// var headerCheckbox = selectRowCol.headerRenderer;
// var checkbox = document.createElement('input');
// checkbox.type = "checkbox";
// checkbox.value = "value";
// checkbox.checked = true;
// var fakeEvent = {currentTarget : checkbox};
// //act
// headerCheckbox.props.onChange(fakeEvent);
// //assert
// var selectedRows = component.state.selectedRows;
// expect(selectedRows.length).toEqual(_rows.length);
// selectedRows.forEach(function(selected){
// expect(selected).toBe(true);
// });
// //trigger unselect
// checkbox.checked = false;
// headerCheckbox.props.onChange(fakeEvent);
// component.state.selectedRows.forEach(function(selected){
// expect(selected).toBe(false);
// });
// });
//
// it("should be able to select an individual row when selected = false", () => {
// component.setState({selectedRows : [false, false, false, false]});
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var selectRowCol = baseGrid.props.columns[0];
// selectRowCol.onRowSelect(3);
// expect(component.state.selectedRows[3]).toBe(true);
// });
//
// it("should be able to select an individual row when selected = null", () => {
// component.setState({selectedRows : [null, null, null, null]});
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var selectRowCol = baseGrid.props.columns[0];
// selectRowCol.onRowSelect(2);
// expect(component.state.selectedRows[2]).toBe(true);
// });
//
// it("should be able to unselect an individual row ", () => {
// component.setState({selectedRows : [null, true, true, true]});
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var selectRowCol = baseGrid.props.columns[0];
//
// selectRowCol.onRowSelect(3);
// expect(component.state.selectedRows[3]).toBe(false);
// });
// });
//
//
// describe("User Interaction",() => {
//
// afterEach(() => {
// component.setState({selected : {idx : 0, rowIdx : 0}});
// });
//
// function SimulateGridKeyDown(component, key, ctrlKey){
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var fakeEvent = {key : key, keyCode :key, ctrlKey: ctrlKey, preventDefault : function(){}, stopPropagation : function(){}};
// baseGrid.props.onViewportKeydown(fakeEvent);
// }
//
// it("hitting TAB should decrement selected cell index by 1", () => {
// SimulateGridKeyDown(component, 'Tab');
// expect(component.state.selected).toEqual({
// idx : 1,
// rowIdx : 0
// });
// });
//
// describe("When selected cell is in top corner of grid", () => {
//
// beforeEach(() => {
// component.setState({selected : {idx : 0, rowIdx : 0}});
// });
//
// it("on ArrowUp keyboard event should not change selected index", () => {
// SimulateGridKeyDown(component, 'ArrowUp');
// expect(component.state.selected).toEqual({
// idx : 0,
// rowIdx : 0
// });
// });
//
// it("on ArrowLeft keyboard event should not change selected index", () => {
// SimulateGridKeyDown(component, 'ArrowLeft');
// expect(component.state.selected).toEqual({
// idx : 0,
// rowIdx : 0
// });
// });
//
// });
//
// describe("When selected cell has adjacent cells on all sides", () => {
//
//
// beforeEach(() => {
// component.setState({selected : {idx : 1, rowIdx : 1}});
// });
//
// it("on ArrowRight keyboard event should increment selected cell index by 1", () => {
// SimulateGridKeyDown(component, 'ArrowRight');
// expect(component.state.selected).toEqual({
// idx : 2,
// rowIdx : 1
// });
// });
//
// it("on ArrowDown keyboard event should increment selected row index by 1", () => {
// SimulateGridKeyDown(component, 'ArrowDown');
// expect(component.state.selected).toEqual({
// idx : 1,
// rowIdx : 2
// });
// });
//
// it("on ArrowLeft keyboard event should decrement selected row index by 1", () => {
// SimulateGridKeyDown(component, 'ArrowLeft');
// expect(component.state.selected).toEqual({
// idx : 0,
// rowIdx : 1
// });
// });
//
// it("on ArrowUp keyboard event should decrement selected row index by 1", () => {
// SimulateGridKeyDown(component, 'ArrowUp');
// expect(component.state.selected).toEqual({
// idx : 1,
// rowIdx : 0
// });
// });
// });
//
// describe("When column is editable", () => {
//
// beforeEach(() => {
// columns[1].editable = true;
// });
//
//
//
//
// it("copy a cell value should store the value in grid state", () => {
// //arrange
// var selectedCellIndex = 1, selectedRowIndex = 1;
// component.setState({selected : {idx : selectedCellIndex, rowIdx : selectedRowIndex}});
// var keyCode_c = '99';
// var expectedCellValue = _rows[selectedRowIndex].title;
// //act
// SimulateGridKeyDown(component, keyCode_c, true);
// //assert
// expect(component.state.textToCopy).toEqual(expectedCellValue);
// expect(component.state.copied).toEqual({idx : selectedCellIndex, rowIdx : selectedRowIndex});
// });
//
// it("paste a cell value should call onCellCopyPaste of component with correct params", () => {
// //arrange
// spyOn(testProps, 'onCellCopyPaste');
// component = TestUtils.renderIntoDocument(<Grid {...testProps}/>);
// component.setState({
// textToCopy : 'banana',
// selected : {idx : 1, rowIdx : 5},
// copied : {idx : 1, rowIdx : 1}
// });
// var keyCode_v = '118';
// SimulateGridKeyDown(component, keyCode_v, true);
// expect(testProps.onCellCopyPaste).toHaveBeenCalled();
// expect(testProps.onCellCopyPaste.calls.mostRecent().args[0]).toEqual({cellKey: "title", rowIdx: 5, value: "banana", fromRow: 1, toRow: 5})
// });
//
// it("cell commit cancel should set grid state inactive", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : true}})
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var meta = baseGrid.props.cellMetaData;
// meta.onCommitCancel();
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : false });
// });
//
// it("pressing escape should set grid state inactive", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : true}})
// SimulateGridKeyDown(component, 'Escape');
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : false });
// });
//
// it("pressing enter should set grid state active", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : false}})
// SimulateGridKeyDown(component, 'Enter');
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : true, initialKeyCode : 'Enter' });
// });
//
// it("pressing delete should set grid state active", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : false}})
// SimulateGridKeyDown(component, 'Delete');
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : true, initialKeyCode : 'Delete' });
// });
//
// it("pressing backspace should set grid state active", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : false}})
// SimulateGridKeyDown(component, 'Backspace');
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : true, initialKeyCode : 'Backspace' });
// });
//
// it("typing a char should set grid state active and store the typed value", () =>{
// component.setState({selected : {idx : 1, rowIdx:1, active : false}})
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var fakeEvent = {keyCode : 66, key :"Unidentified", preventDefault : function(){}, stopPropagation : function(){}};
// baseGrid.props.onViewportKeydown(fakeEvent);
// expect(component.state.selected).toEqual({idx : 1, rowIdx : 1, active : true, initialKeyCode : 66 });
// });
//
// });
//
// describe("When column is not editable", () => {
// beforeEach(() => {
// columns[1].editable = false;
// });
//
// it("double click on grid should not activate current selected cell", () => {
// component.setState({selected : {idx : 1, rowIdx : 1}});
// columns[1].editable = false;
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// baseGrid.props.onViewportDoubleClick();
// expect(component.state.selected).toEqual({
// idx : 1,
// rowIdx : 1
// })
// });
// });
//
//
// describe("Cell Meta Data", () => {
//
// function getCellMetaData(component){
//
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
//
// return baseGrid.props.cellMetaData;
// }
//
// it('creates a cellMetaData object and passes to baseGrid as props', () => {
// var meta = getCellMetaData(component)
// expect(meta).toEqual(jasmine.objectContaining({
// selected : {rowIdx : 0, idx : 0},
// dragged : null,
// copied : null
// }));
// expect(typeof meta.onCellClick === 'function').toBe(true);
// expect(typeof meta.onCommit === 'function').toBe(true);
// expect(typeof meta.onCommitCancel === 'function').toBe(true);
// expect(typeof meta.handleDragEnterRow === 'function').toBe(true);
// expect(typeof meta.handleTerminateDrag === 'function').toBe(true);
// });
//
// it("Changing Grid state should update cellMetaData", () => {
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var newState = {selected : {idx : 2, rowIdx : 2}, dragged : {idx : 2, rowIdx : 2}}
// component.setState(newState);
// var meta = baseGrid.props.cellMetaData;
// expect(meta).toEqual(jasmine.objectContaining(newState));
// });
//
// it("cell commit should trigger onRowUpdated with correct params", () => {
// spyOn(testProps, 'onRowUpdated');
// component = TestUtils.renderIntoDocument(<Grid {...testProps}/>);
// var meta = getCellMetaData(component);
// var fakeCellUpdate = {cellKey: "title", rowIdx: 0, updated: {title : 'some new title'}, key: "Enter"}
// meta.onCommit(fakeCellUpdate);
// expect(testProps.onRowUpdated.calls.count()).toEqual(1);
// expect(testProps.onRowUpdated.argsForCall[0][0]).toEqual({
// cellKey: "title", rowIdx: 0, updated: {title : 'some new title'}, key: "Enter"
// })
// });
//
// it("cell commit should deactivate selected cell", () => {
// component.setState({selected : {idx : 3, rowIdx : 3, active : true}});
// var meta = getCellMetaData(component);
// var fakeCellUpdate = {cellKey: "title", rowIdx: 0, updated: {title : 'some new title'}, key: "Enter"}
// meta.onCommit(fakeCellUpdate);
// expect(component.state.selected).toEqual({
// idx : 3,
// rowIdx : 3,
// active : false
// });
// });
//
// it("cell commit after TAB should select next cell", () => {
// component.setState({selected : {idx : 1, rowIdx : 1, active : true}});
// var meta = getCellMetaData(component);
// var fakeCellUpdate = {cellKey: "title", rowIdx: 1, updated: {title : 'some new title'}, keyCode: "Tab"}
// meta.onCommit(fakeCellUpdate);
// expect(component.state.selected).toEqual({
// idx : 2,
// rowIdx : 1,
// active : false
// });
// });
//
//
// it("Cell click should set selected state of grid", () =>{
// var meta = getCellMetaData(component);
// meta.onCellClick({idx : 2, rowIdx : 2 });
// expect(component.state.selected).toEqual({idx : 2, rowIdx : 2 });
// });
//
//
// })
//
//
// describe("When column is sortable", () => {
//
// var sortableColIdx =1;
// beforeEach(() => {
// columns[sortableColIdx].sortable = true;
// component = TestUtils.renderIntoDocument(<Grid {...testProps}/>);
// })
//
// afterEach(() => {
// columns[sortableColIdx].sortable = false;
// })
//
// it("should provide column with a sortableHeaderRenderer", () => {
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var sortableColumn = baseGrid.props.columns[sortableColIdx];
// expect(TestUtils.isElementOfType(sortableColumn.headerRenderer, SortableHeaderCellStub)).toBe(true);
// });
//
// it("should pass sort direction as props to headerRenderer when column is sortColumn", () => {
// component.setState({sortDirection : 'ASC', sortColumn : columns[1].key});
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var sortableHeaderRenderer = baseGrid.props.columns[sortableColIdx].headerRenderer;
// expect(sortableHeaderRenderer.props.sortDirection).toEqual('ASC');
// });
//
// it("should call onGridSort when headerRender click", () => {
// //arrange
// spyOn(testProps, 'onGridSort');
// component = TestUtils.renderIntoDocument(<Grid {...testProps}/>);
// component.setState({sortDirection : 'ASC', sortColumn : columns[1].key});
// var baseGrid = TestUtils.findRenderedComponentWithType(component, BaseGridStub);
// var sortableHeaderRenderer = baseGrid.props.columns[sortableColIdx].headerRenderer;
// //act
// sortableHeaderRenderer.props.onSort('title', 'DESC');
// //assert
// expect(testProps.onGridSort).toHaveBeenCalled();
// expect(testProps.onGridSort.calls.mostRecent().args[0]).toEqual('title');
// expect(testProps.onGridSort.calls.mostRecent().args[1]).toEqual('DESC');
// });
//
//
// });
//
//
//
//
// });