vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-12 20:00:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

patch tests for refactoring cell edit with consumer

Browse Source
This commit is contained in:
AllenFang
2018-10-09 00:18:16 +08:00
parent 73a5c34535
commit 640ada7659
10 changed files with 638 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2-editor/test/cell-binder.test.js
+210
View File
@@ -0,0 +1,210 @@
import 'jsdom-global/register';
import React from 'react';
import { mount } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import op from 'react-bootstrap-table-next/src/store/operators';
import cellEditFactory from '../index';
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from '../src/const';
import createCellEditContext from '../src/context';
import bindCellEditing from '../src/cell-binder';
describe('Cell Binder', () => {
let wrapper;
let cellEdit;
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
let columns;
const rowIndex = 1;
const row = { id: 1, name: 'A' };
const keyField = 'id';
const columnIndex = 1;
const { Provider } = createCellEditContext(_, op, false, jest.fn());
const BaseComponent = () => null;
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
keyField,
_
);
beforeEach(() => {
columns = [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name'
}];
});
describe(`if cellEdit.mode is ${CLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject correct props to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeTruthy();
expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeFalsy();
});
});
describe(`if cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject correct props to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeFalsy();
expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeTruthy();
});
});
describe('if column prop is a key column', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[0] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
describe('if editable prop is true(Row Level)', () => {
describe('but column.editable prop is false', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = false;
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
describe('and column.editable prop is true or not defined', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject positive editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
});
});
});
describe('if editable prop is false(Row Level)', () => {
describe('even if column.editable prop is true or not defined', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = true;
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable={ false }
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
});
describe('if column.editable prop is a function', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = jest.fn().mockReturnValue(false);
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should call column.editable function correctly', () => {
expect(columns[1].editable).toHaveBeenCalledTimes(1);
});
it('should inject correct editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
});
packages/react-bootstrap-table2-editor/test/context.test.js
+9 -24
View File
@@ -3,14 +3,13 @@ import React from 'react';
import { shallow } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import dataOperator from 'react-bootstrap-table-next/src/store/operators';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import {
CLICK_TO_CELL_EDIT,
DBCLICK_TO_CELL_EDIT,
DELAY_FOR_DBCLICK
} from '../src/const';
import createCellEditContext from '../src/context';
import createCellEditContext, { Consumer } from '../src/context';
import cellEditFactory from '../index';
describe('CellEditContext', () => {
@@ -42,14 +41,7 @@ describe('CellEditContext', () => {
const defaultSelectRow = undefined;
const mockBase = jest.fn((props => (
<BootstrapTable
data={ data }
columns={ columns }
keyField={ keyField }
{ ...props }
/>
)));
const mockBase = jest.fn((() => null));
const handleCellChange = jest.fn();
@@ -75,11 +67,11 @@ describe('CellEditContext', () => {
selectRow={ selectRow }
data={ data }
>
<CellEditContext.Consumer>
<Consumer>
{
cellEditProps => mockBase(cellEditProps)
}
</CellEditContext.Consumer>
</Consumer>
</CellEditContext.Provider>
);
}
@@ -94,10 +86,6 @@ describe('CellEditContext', () => {
expect(CellEditContext.Provider).toBeDefined();
});
it('should have correct Consumer property after calling createCellEditContext', () => {
expect(CellEditContext.Consumer).toBeDefined();
});
it('should have correct state.ridx', () => {
expect(wrapper.state().ridx).toBeNull();
});
@@ -113,14 +101,11 @@ describe('CellEditContext', () => {
it('should pass correct cell editing props to children element', () => {
expect(wrapper.length).toBe(1);
expect(JSON.stringify(mockBase.mock.calls[0])).toEqual(JSON.stringify([{
cellEdit: {
...defaultCellEdit,
CLICK_TO_CELL_EDIT,
DBCLICK_TO_CELL_EDIT,
DELAY_FOR_DBCLICK,
...wrapper.state(),
nonEditableRows: []
}
...defaultCellEdit,
DBCLICK_TO_CELL_EDIT,
DELAY_FOR_DBCLICK,
...wrapper.state(),
nonEditableRows: []
}]));
});
});
packages/react-bootstrap-table2-editor/test/editing-cell-binder.test.js
+147
View File
@@ -0,0 +1,147 @@
import 'jsdom-global/register';
import React from 'react';
import { mount, shallow } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import cellEditFactory from '../index';
import { CLICK_TO_CELL_EDIT } from '../src/const';
import createCellEditContext from '../src/context';
import bindEditingCell from '../src/editing-cell-binder';
describe('Cell Binder', () => {
let wrapper;
let cellEdit;
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
let columns;
const rowIndex = 1;
const row = { id: 1, name: 'A' };
const keyField = 'id';
const columnIndex = 1;
const { Provider } = createCellEditContext(_);
const WithCellEditComponent = bindEditingCell(_);
beforeEach(() => {
columns = [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name'
}];
});
describe('if column.editCellClasses is defined as string', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editCellClasses = 'test-class-1';
wrapper = shallow(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
wrapper = wrapper.render();
});
it('should inject className target component correctly', () => {
expect(wrapper.hasClass(`${columns[1].editCellClasses}`)).toBeTruthy();
});
});
describe('if column.editCellStyle is defined as object', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editCellStyle = { color: 'pink' };
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject style target component correctly', () => {
expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(columns[1].editCellStyle);
});
});
describe('if column.editCellClasses is defined as function', () => {
const className = 'test-class-1';
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editCellClasses = jest.fn().mockReturnValue(className);
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject empty className and style to target component', () => {
expect(wrapper.find(className)).toBeTruthy();
});
it('should call column.editCellClasses function correctly', () => {
expect(columns[1].editCellClasses).toHaveBeenCalledTimes(1);
expect(columns[1].editCellClasses).toHaveBeenCalledWith(
_.get(row, columns[1].dataField),
row,
rowIndex,
columnIndex
);
});
});
describe('if column.editCellStyle is defined as function', () => {
const style = { color: 'blue' };
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editCellStyle = jest.fn().mockReturnValue(style);
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject style target component correctly', () => {
expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(style);
});
it('should call column.editCellStyle function correctly', () => {
expect(columns[1].editCellStyle).toHaveBeenCalledTimes(1);
expect(columns[1].editCellStyle).toHaveBeenCalledWith(
_.get(row, columns[1].dataField),
row,
rowIndex,
columnIndex
);
});
});
});
packages/react-bootstrap-table2-editor/test/row-binder.test.js
+138
View File
@@ -0,0 +1,138 @@
import 'jsdom-global/register';
import React from 'react';
import { mount } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import op from 'react-bootstrap-table-next/src/store/operators';
import cellEditFactory from '../index';
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT, DELAY_FOR_DBCLICK } from '../src/const';
import createCellEditContext from '../src/context';
import bindCellEditing from '../src/row-binder';
describe('Row Binder', () => {
let wrapper;
let cellEdit;
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
const row = { id: 1, name: 'A' };
const keyField = 'id';
const value = _.get(row, keyField);
const { Provider } = createCellEditContext(_, op, false, jest.fn());
const BaseComponent = () => null;
describe('if cellEdit.nonEditableRows is undefined', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
false
);
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent value={ value } />
</Provider>
);
});
it('should inject correct props to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toBeNull();
expect(wrapper.find(BaseComponent).prop('editingColIdx')).toBeNull();
expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
});
});
describe('if cellEdit.nonEditableRows is defined', () => {
const nonEditableRows = jest.fn().mockReturnValue([value]);
describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
false
);
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent value={ value } />
</Provider>
);
});
it('should inject correct editable prop as false to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
false
);
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent value={ 2 } />
</Provider>
);
});
it('should inject correct editable prop as false to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
});
});
});
describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
true
);
cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent value={ value } />
</Provider>
);
});
it('should inject correct DELAY_FOR_DBCLICK prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('DELAY_FOR_DBCLICK')).toEqual(DELAY_FOR_DBCLICK);
});
});
describe('if cellEdit.ridx and cellEdit.cidx are defined', () => {
const ridx = 0;
const cidx = 1;
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
false
);
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent value={ value } />
</Provider>
);
wrapper.instance().startEditing(ridx, cidx);
wrapper.update();
});
it('should inject correct editable prop as false to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toEqual(ridx);
expect(wrapper.find(BaseComponent).prop('editingColIdx')).toEqual(cidx);
});
});
});
packages/react-bootstrap-table2/test/body.test.js
+16 -13
View File
@@ -254,11 +254,15 @@ describe('Body', () => {
});
});
describe('when cellEdit.nonEditableRows props is defined', () => {
const nonEditableRows = [data[1].id];
describe('when cellEdit.createContext props is defined', () => {
const CellComponent = () => null;
const EditingCellComponent = () => null;
const RowComponent = props => <Row { ...props } />;
const cellEdit = {
mode: Const.CLICK_TO_CELL_EDIT,
nonEditableRows
createContext: jest.fn(),
bindCellLevelCellEdit: jest.fn().mockReturnValue(CellComponent),
createEditingCell: jest.fn().mockReturnValue(EditingCellComponent),
bindRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
};
beforeEach(() => {
wrapper = shallow(
@@ -272,16 +276,15 @@ describe('Body', () => {
);
});
it('should render Row component with correct editable prop', () => {
it('should render Row Component correctly', () => {
expect(wrapper.length).toBe(1);
const rows = wrapper.find(Row);
for (let i = 0; i < rows.length; i += 1) {
if (nonEditableRows.indexOf(rows.get(i).props.row[keyField]) > -1) {
expect(rows.get(i).props.editable).toBeFalsy();
} else {
expect(rows.get(i).props.editable).toBeTruthy();
}
}
expect(cellEdit.bindCellLevelCellEdit).toHaveBeenCalledTimes(1);
expect(cellEdit.createEditingCell).toHaveBeenCalledTimes(1);
expect(cellEdit.bindRowLevelCellEdit).toHaveBeenCalledTimes(1);
expect(wrapper.find(RowComponent)).toHaveLength(2);
const aRowElement = wrapper.find(RowComponent).get(0);
expect(aRowElement.props.CellComponent).toBeDefined();
expect(aRowElement.props.EditingCellComponent).toBeDefined();
});
});
packages/react-bootstrap-table2/test/contexts/index.test.js
+4 -1
View File
@@ -111,7 +111,10 @@ describe('Context', () => {
createContext: jest.fn().mockReturnValue({
Provider: CellEditContext.Provider,
Consumer: CellEditContext.Consumer
})
}),
bindCellLevelCellEdit: jest.fn().mockReturnValue(() => null),
createEditingCell: jest.fn().mockReturnValue(() => null),
bindRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
};
wrapper = shallow(
<BootstrapTable
packages/react-bootstrap-table2/test/row-aggregator.test.js
+1
View File
@@ -40,6 +40,7 @@ describe('Row Aggregator', () => {
const getBaseProps = () => ({
row,
value: row[keyField],
columns,
keyField,
rowIndex,
packages/react-bootstrap-table2/test/row-selection/row-binder.test.js
+77 -12
View File
@@ -24,13 +24,19 @@ describe('Selection Row Binder', () => {
const rowIndex = 1;
const row = data[rowIndex];
const keyField = 'id';
const value = row[keyField];
describe('if current row is selected', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]] };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -46,7 +52,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', selected: [] };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -62,7 +73,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', nonSelectable: [] };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -78,7 +94,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', nonSelectable: [data[rowIndex][keyField]] };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -96,7 +117,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: selectedStyle };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -113,6 +139,7 @@ describe('Selection Row Binder', () => {
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
style={ componentStype }
@@ -135,7 +162,12 @@ describe('Selection Row Binder', () => {
selectRow.bgColor = 'gray';
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -155,7 +187,12 @@ describe('Selection Row Binder', () => {
selectRow.bgColor = jest.fn().mockReturnValue(color);
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -180,7 +217,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: jest.fn().mockReturnValue(selectedStyle) };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -202,6 +244,7 @@ describe('Selection Row Binder', () => {
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
style={ componentStype }
@@ -224,7 +267,12 @@ describe('Selection Row Binder', () => {
selectRow.bgColor = 'gray';
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -244,7 +292,12 @@ describe('Selection Row Binder', () => {
selectRow.bgColor = jest.fn().mockReturnValue(color);
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -272,7 +325,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: selectedClassName };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -289,6 +347,7 @@ describe('Selection Row Binder', () => {
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
className={ componentClassName }
@@ -309,7 +368,12 @@ describe('Selection Row Binder', () => {
selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: jest.fn().mockReturnValue(selectedClassName) };
wrapper = mount(
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
/>
</SelectionContext.Provider>
);
});
@@ -331,6 +395,7 @@ describe('Selection Row Binder', () => {
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
<WithSelectionComponent
row={ row }
value={ value }
keyField={ keyField }
rowIndex={ rowIndex }
className={ componentClassName }
packages/react-bootstrap-table2/test/row.test.js
+33 -380
View File
@@ -4,8 +4,6 @@ import { shallow } from 'enzyme';
import Cell from '../src/cell';
import Row from '../src/row';
import Const from '../src/const';
import SelectionCell from '../src//row-selection/selection-cell';
import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
let defaultColumns = [{
@@ -102,395 +100,50 @@ describe('Row', () => {
});
});
describe('when cellEdit prop is defined', () => {
let columns;
let cellEdit;
describe('when CellComponent prop is defined', () => {
const CellComponent = () => null;
beforeEach(() => {
columns = defaultColumns;
cellEdit = {
mode: 'click',
CLICK_TO_CELL_EDIT: 'click',
DBCLICK_TO_CELL_EDIT: 'dbclick'
};
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
columns={ defaultColumns }
row={ row }
CellComponent={ CellComponent }
/>);
});
afterEach(() => {
columns = undefined;
cellEdit = undefined;
});
it('Cell component should receive correct editable props', () => {
it('should render CellComponent successfully', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
const column = columns[i];
if (column.dataField === keyField) {
expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
} else {
expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
}
}
expect(wrapper.find(CellComponent)).toHaveLength(defaultColumns.length);
});
});
describe('when editingRowIdx and editingColIdx prop is defined', () => {
const editingRowIdx = rowIndex;
const editingColIdx = 1;
const EditingCellComponent = () => null;
beforeEach(() => {
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
EditingCellComponent={ EditingCellComponent }
editingRowIdx={ editingRowIdx }
editingColIdx={ editingColIdx }
/>);
});
it('Cell component should receive correct clickToEdit props', () => {
it('should render EditingCell component correctly', () => {
const EditingCell = wrapper.find(EditingCellComponent);
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
expect(wrapper.find(Cell).get(i).props.clickToEdit).toBeTruthy();
}
});
it('Cell component should receive correct dbclickToEdit props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
expect(wrapper.find(Cell).get(i).props.dbclickToEdit).toBeFalsy();
}
});
describe('when props.cellEdit.mode is dbclick', () => {
beforeEach(() => {
cellEdit.mode = cellEdit.DBCLICK_TO_CELL_EDIT;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('Cell component should receive correct clickToEdit props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
expect(wrapper.find(Cell).get(i).props.clickToEdit).toBeFalsy();
}
});
it('Cell component should receive correct dbclickToEdit props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
expect(wrapper.find(Cell).get(i).props.dbclickToEdit).toBeTruthy();
}
});
});
describe('and column.editable defined false', () => {
const nonEditableColIndex = 1;
beforeEach(() => {
columns[nonEditableColIndex].editable = false;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('Cell component should receive correct editable props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
const column = columns[i];
if (i === nonEditableColIndex || column.dataField === keyField) {
expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
} else {
expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
}
}
});
});
describe('and column.editable defined as function', () => {
const nonEditableColIndex = 1;
let editableCallBack;
afterEach(() => {
editableCallBack.reset();
});
describe('which return false', () => {
beforeEach(() => {
editableCallBack = sinon.stub().returns(false);
columns[nonEditableColIndex].editable = editableCallBack;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('column.editable callback function should be called once', () => {
expect(editableCallBack.callCount).toBe(1);
});
it('Cell component should receive correct editable props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
const column = columns[i];
if (i === nonEditableColIndex || column.dataField === keyField) {
expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
} else {
expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
}
}
});
});
describe('which return true', () => {
beforeEach(() => {
editableCallBack = sinon.stub().returns(true);
columns[nonEditableColIndex].editable = editableCallBack;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('column.editable callback function should be called once', () => {
expect(editableCallBack.callCount).toBe(1);
});
it('Cell component should receive correct editable props', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
const column = columns[i];
if (column.dataField === keyField) {
expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
} else {
expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
}
}
});
});
});
// Means user defined cellEdit.nonEditableRows
// and some rows will be treated as noneditable by this rules
describe('when editable prop is false', () => {
beforeEach(() => {
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
editable={ false }
/>
);
});
it('All the Cell components should be noneditable', () => {
expect(wrapper.length).toBe(1);
for (let i = 0; i < columns.length; i += 1) {
expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
}
});
});
// Means a cell now is undering editing
describe('when cellEdit.ridx and cellEdit.cidx is defined', () => {
const EditingCell = () => null;
describe('and cellEdit.ridx is match to current row index', () => {
const editingColIndex = 1;
beforeEach(() => {
cellEdit.ridx = rowIndex;
cellEdit.cidx = editingColIndex;
cellEdit.onUpdate = sinon.stub();
cellEdit.onEscape = sinon.stub();
cellEdit.EditingCell = EditingCell;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
editable={ false }
/>
);
});
it('should render EditingCell correctly', () => {
const complexComponents = wrapper.find('tr').children().findWhere(
n => n.type().name === 'Cell' || n.type().name === 'EditingCell');
expect(wrapper.length).toBe(1);
expect(wrapper.find(EditingCell).length).toBe(1);
expect(complexComponents.at(editingColIndex).type()).toEqual(EditingCell);
});
describe('if column.editCellStyle defined as object', () => {
const definedStyleColIndex = editingColIndex;
beforeEach(() => {
columns[definedStyleColIndex].editCellStyle = { backgroundColor: 'red' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('should also rendering EditingCell with correct style object', () => {
expect(wrapper.find(EditingCell).length).toBe(1);
expect(wrapper.find(EditingCell).props().style)
.toEqual(columns[definedStyleColIndex].editCellStyle);
});
});
describe('if column.editCellStyle defined as function', () => {
const definedStyleColIndex = editingColIndex;
const customStyle = { backgroundColor: 'red' };
let editCellStyleCallBack;
beforeEach(() => {
editCellStyleCallBack = sinon.stub().returns(customStyle);
columns[definedStyleColIndex].editCellStyle = editCellStyleCallBack;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('should calling custom column.editCellStyle callback correctly', () => {
expect(editCellStyleCallBack.callCount).toBe(1);
expect(
editCellStyleCallBack.calledWith(
row[columns[editingColIndex].dataField], row, rowIndex, editingColIndex)
).toBe(true);
});
it('should also rendering EditingCell with correct style object', () => {
expect(wrapper.find(EditingCell).length).toBe(1);
expect(wrapper.find(EditingCell).props().style).toEqual(customStyle);
});
});
describe('if column.editCellClasses defined as string', () => {
const definedStyleColIndex = editingColIndex;
beforeEach(() => {
columns[definedStyleColIndex].editCellClasses = 'custom-class';
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('should also rendering EditingCell with correct class', () => {
expect(wrapper.find(EditingCell).length).toBe(1);
expect(wrapper.find(EditingCell).props().className)
.toEqual(columns[definedStyleColIndex].editCellClasses);
});
});
describe('if column.editCellClasses defined as function', () => {
const definedStyleColIndex = editingColIndex;
const customClass = 'custom-class';
let editCellClassesCallBack;
beforeEach(() => {
editCellClassesCallBack = sinon.stub().returns(customClass);
columns[definedStyleColIndex].editCellClasses = editCellClassesCallBack;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ rowIndex }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
/>
);
});
it('should calling custom column.editCellStyle callback correctly', () => {
expect(editCellClassesCallBack.callCount).toBe(1);
expect(
editCellClassesCallBack.calledWith(
row[columns[editingColIndex].dataField], row, rowIndex, editingColIndex)
).toBe(true);
});
it('should also rendering EditingCell with correct class', () => {
expect(wrapper.find(EditingCell).length).toBe(1);
expect(wrapper.find(EditingCell).props().className).toEqual(customClass);
});
});
});
describe('and cellEdit.ridx is not match to current row index', () => {
const editingColIndex = 1;
beforeEach(() => {
cellEdit.ridx = 3;
cellEdit.cidx = editingColIndex;
cellEdit.onUpdate = sinon.stub();
cellEdit.onEscape = sinon.stub();
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
row={ row }
rowIndex={ 1 }
columns={ columns }
keyField={ keyField }
cellEdit={ cellEdit }
editable={ false }
/>
);
});
it('should not render any EditingCell component', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find(EditingCell).length).toBe(0);
expect(wrapper.find(Cell).length).toBe(columns.length);
});
});
expect(EditingCell).toHaveLength(1);
expect(EditingCell.prop('row')).toEqual(row);
expect(EditingCell.prop('rowIndex')).toEqual(editingRowIdx);
expect(EditingCell.prop('column')).toEqual(defaultColumns[editingColIdx]);
expect(EditingCell.prop('columnIndex')).toEqual(editingColIdx);
});
});
packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js
Vendored
+3 -2
View File
@@ -1,6 +1,6 @@
import Const from '../../../src/const';
const { ROW_SELECT_DISABLED, UNABLE_TO_CELL_EDIT } = Const;
const { ROW_SELECT_DISABLED } = Const;
export const rowSelectionResolvedProps = {
mode: ROW_SELECT_DISABLED,
@@ -14,7 +14,8 @@ export const expandRowResolvedProps = {
};
export const cellEditResolvedProps = {
mode: UNABLE_TO_CELL_EDIT
mode: null,
nonEditableRows: []
};
export default {