mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-10-06 18:16:54 +00:00
refine cell edit tests
This commit is contained in:
+15
-4
@@ -1,12 +1,23 @@
|
||||
/* eslint react/prop-types: 0 */
|
||||
import 'jsdom-global/register';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow, mount } from 'enzyme';
|
||||
|
||||
import { TableRowWrapper } from '../test-helpers/table-wrapper';
|
||||
import EditingCell from '../../src/cell-edit/editing-cell';
|
||||
import TextEditor from '../../src/cell-edit/text-editor';
|
||||
import EditorIndicator from '../../src/cell-edit/editor-indicator';
|
||||
import _ from 'react-bootstrap-table2/src/utils';
|
||||
import editingCellFactory from '../src/editing-cell';
|
||||
import TextEditor from '../src/text-editor';
|
||||
import EditorIndicator from '../src/editor-indicator';
|
||||
|
||||
const EditingCell = editingCellFactory(_);
|
||||
const TableRowWrapper = props => (
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>{ props.children }</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
|
||||
describe('EditingCell', () => {
|
||||
let wrapper;
|
||||
+1
-1
@@ -2,7 +2,7 @@ import 'jsdom-global/register';
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import TextEditor from '../../src/cell-edit/text-editor';
|
||||
import TextEditor from '../src/text-editor';
|
||||
|
||||
describe('TextEditor', () => {
|
||||
let wrapper;
|
||||
@@ -0,0 +1,330 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import _ from 'react-bootstrap-table2/src/utils';
|
||||
import remoteResolver from 'react-bootstrap-table2/src/props-resolver/remote-resolver';
|
||||
import Store from 'react-bootstrap-table2/src/store';
|
||||
import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
|
||||
import cellEditFactory from '../src';
|
||||
import * as Const from '../src/const';
|
||||
import wrapperFactory from '../src/wrapper';
|
||||
|
||||
describe('CellEditWrapper', () => {
|
||||
let wrapper;
|
||||
let instance;
|
||||
const onTableChangeCB = sinon.stub();
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Name'
|
||||
}];
|
||||
const data = [{
|
||||
id: 1,
|
||||
name: 'A'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'B'
|
||||
}];
|
||||
|
||||
const createTableProps = (props = {}) => {
|
||||
const { cellEdit, ...rest } = props;
|
||||
const tableProps = {
|
||||
keyField: 'id',
|
||||
columns,
|
||||
data,
|
||||
_,
|
||||
store: new Store('id'),
|
||||
cellEdit: cellEditFactory(cellEdit),
|
||||
onTableChange: onTableChangeCB,
|
||||
...rest
|
||||
};
|
||||
tableProps.store.data = data;
|
||||
return tableProps;
|
||||
};
|
||||
|
||||
const CellEditWrapper = wrapperFactory(BootstrapTable, {
|
||||
_,
|
||||
remoteResolver
|
||||
});
|
||||
|
||||
const createCellEditWrapper = (props, renderFragment = true) => {
|
||||
wrapper = shallow(<CellEditWrapper { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
if (renderFragment) {
|
||||
const fragment = instance.render();
|
||||
wrapper = shallow(<div>{ fragment }</div>);
|
||||
}
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
onTableChangeCB.reset();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
const props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
});
|
||||
|
||||
it('should render CellEditWrapper correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(BootstrapTable)).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have correct state', () => {
|
||||
expect(instance.state.ridx).toBeNull();
|
||||
expect(instance.state.cidx).toBeNull();
|
||||
expect(instance.state.message).toBeNull();
|
||||
expect(instance.state.isDataChanged).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should inject correct props to base component', () => {
|
||||
const base = wrapper.find(BootstrapTable);
|
||||
expect(base.props().cellEdit).toBeDefined();
|
||||
expect(base.props().cellEdit.onStart).toBeDefined();
|
||||
expect(base.props().cellEdit.onEscape).toBeDefined();
|
||||
expect(base.props().cellEdit.onUpdate).toBeDefined();
|
||||
expect(base.props().cellEdit.EditingCell).toBeDefined();
|
||||
expect(base.props().cellEdit.ridx).toBeNull();
|
||||
expect(base.props().cellEdit.cidx).toBeNull();
|
||||
expect(base.props().cellEdit.message).toBeNull();
|
||||
expect(base.props().isDataChanged).toBe(instance.state.isDataChanged);
|
||||
});
|
||||
|
||||
describe('when receive new cellEdit prop', () => {
|
||||
const spy = jest.spyOn(CellEditWrapper.prototype, 'escapeEditing');
|
||||
|
||||
describe('and cellEdit is not work on remote', () => {
|
||||
beforeEach(() => {
|
||||
const props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
wrapper.setProps({ cellEdit: props.cellEdit });
|
||||
});
|
||||
|
||||
it('should always setting state.isDataChanged as false', () => {
|
||||
expect(instance.state.isDataChanged).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('and cellEdit is work on remote', () => {
|
||||
let errorMessage;
|
||||
let props;
|
||||
beforeEach(() => {
|
||||
props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
|
||||
remote: true
|
||||
});
|
||||
});
|
||||
|
||||
describe('and cellEdit.errorMessage is defined', () => {
|
||||
beforeEach(() => {
|
||||
createCellEditWrapper(props, false);
|
||||
errorMessage = 'test';
|
||||
const newCellEdit = {
|
||||
...props.cellEdit,
|
||||
options: { ...props.cellEdit.options, errorMessage }
|
||||
};
|
||||
wrapper.setProps({ cellEdit: newCellEdit });
|
||||
});
|
||||
|
||||
it('should setting correct state', () => {
|
||||
expect(instance.state.isDataChanged).toBeFalsy();
|
||||
expect(instance.state.message).toEqual(errorMessage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('and cellEdit.errorMessage is undefined', () => {
|
||||
beforeEach(() => {
|
||||
errorMessage = null;
|
||||
createCellEditWrapper(props, false);
|
||||
const newCellEdit = {
|
||||
...props.cellEdit,
|
||||
options: { ...props.cellEdit.options, errorMessage }
|
||||
};
|
||||
wrapper.setProps({ cellEdit: newCellEdit });
|
||||
});
|
||||
|
||||
it('should setting correct state', () => {
|
||||
expect(wrapper.state().isDataChanged).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should escape current editing', () => {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('call escapeEditing function', () => {
|
||||
it('should set state correctly', () => {
|
||||
instance.escapeEditing();
|
||||
expect(instance.state.ridx).toBeNull();
|
||||
expect(instance.state.cidx).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('call startEditing function', () => {
|
||||
const ridx = 1;
|
||||
const cidx = 3;
|
||||
|
||||
it('should set state correctly', () => {
|
||||
instance.startEditing(ridx, cidx);
|
||||
expect(instance.state.ridx).toEqual(ridx);
|
||||
expect(instance.state.cidx).toEqual(cidx);
|
||||
expect(instance.state.isDataChanged).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('if selectRow.clickToSelect is defined', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox', clickToSelect: true };
|
||||
const props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
|
||||
selectRow
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
});
|
||||
|
||||
it('should not set state', () => {
|
||||
instance.startEditing(ridx, cidx);
|
||||
expect(instance.state.ridx).toBeNull();
|
||||
expect(instance.state.cidx).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('if selectRow.clickToSelect and selectRow.clickToEdit is defined', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox', clickToSelect: true, clickToEdit: true };
|
||||
const props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
|
||||
selectRow
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
});
|
||||
|
||||
it('should set state correctly', () => {
|
||||
instance.startEditing(ridx, cidx);
|
||||
expect(instance.state.ridx).toEqual(ridx);
|
||||
expect(instance.state.cidx).toEqual(cidx);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('call completeEditing function', () => {
|
||||
it('should set state correctly', () => {
|
||||
instance.completeEditing();
|
||||
expect(instance.state.ridx).toBeNull();
|
||||
expect(instance.state.cidx).toBeNull();
|
||||
expect(instance.state.message).toBeNull();
|
||||
expect(instance.state.isDataChanged).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('call handleCellUpdate function', () => {
|
||||
let props;
|
||||
const row = data[0];
|
||||
const column = columns[1];
|
||||
const newValue = 'new name';
|
||||
|
||||
describe('when cell edit is work on remote', () => {
|
||||
const spy = jest.spyOn(CellEditWrapper.prototype, 'handleCellChange');
|
||||
|
||||
beforeEach(() => {
|
||||
props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
|
||||
remote: true
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
instance.handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling handleCellChange correctly', () => {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
expect(spy.mock.calls).toHaveLength(1);
|
||||
expect(spy.mock.calls[0]).toHaveLength(3);
|
||||
expect(spy.mock.calls[0][0]).toEqual(row.id);
|
||||
expect(spy.mock.calls[0][1]).toEqual(column.dataField);
|
||||
expect(spy.mock.calls[0][2]).toEqual(newValue);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when cell edit is not work on remote', () => {
|
||||
const spyOnCompleteEditing = jest.spyOn(CellEditWrapper.prototype, 'completeEditing');
|
||||
const spyOnStoreEdit = jest.spyOn(Store.prototype, 'edit');
|
||||
|
||||
beforeEach(() => {
|
||||
props = createTableProps({
|
||||
cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
instance.handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
spyOnStoreEdit.mockReset();
|
||||
spyOnCompleteEditing.mockReset();
|
||||
});
|
||||
|
||||
it('should calling props.store.edit', () => {
|
||||
expect(spyOnStoreEdit).toHaveBeenCalled();
|
||||
expect(spyOnStoreEdit.mock.calls).toHaveLength(1);
|
||||
expect(spyOnStoreEdit.mock.calls[0]).toHaveLength(3);
|
||||
expect(spyOnStoreEdit.mock.calls[0][0]).toEqual(row.id);
|
||||
expect(spyOnStoreEdit.mock.calls[0][1]).toEqual(column.dataField);
|
||||
expect(spyOnStoreEdit.mock.calls[0][2]).toEqual(newValue);
|
||||
});
|
||||
|
||||
it('should calling completeEditing function', () => {
|
||||
expect(spyOnCompleteEditing).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('if cellEdit.afterSaveCell prop defined', () => {
|
||||
const aftereSaveCellCallBack = sinon.stub();
|
||||
|
||||
beforeEach(() => {
|
||||
props = createTableProps({
|
||||
cellEdit: {
|
||||
mode: Const.CLICK_TO_CELL_EDIT,
|
||||
afterSaveCell: aftereSaveCellCallBack
|
||||
}
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
instance.handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling cellEdit.afterSaveCell correctly', () => {
|
||||
expect(aftereSaveCellCallBack.callCount).toBe(1);
|
||||
expect(aftereSaveCellCallBack.calledWith(
|
||||
row[column.dataField], newValue, row, column)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('if cellEdit.beforeSaveCell prop defined', () => {
|
||||
const beforeSaveCellCallBack = sinon.stub();
|
||||
beforeEach(() => {
|
||||
props = createTableProps({
|
||||
cellEdit: {
|
||||
mode: Const.CLICK_TO_CELL_EDIT,
|
||||
beforeSaveCell: beforeSaveCellCallBack
|
||||
}
|
||||
});
|
||||
createCellEditWrapper(props);
|
||||
instance.handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling cellEdit.beforeSaveCell correctly', () => {
|
||||
expect(beforeSaveCellCallBack.callCount).toBe(1);
|
||||
expect(beforeSaveCellCallBack.calledWith(
|
||||
row[column.dataField], newValue, row, column)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Caption from '../src/caption';
|
||||
@@ -7,7 +6,6 @@ import Store from '../src/store';
|
||||
import Header from '../src/header';
|
||||
import Body from '../src/body';
|
||||
import BootstrapTable from '../src/bootstrap-table';
|
||||
import Const from '../src/const';
|
||||
|
||||
describe('BootstrapTable', () => {
|
||||
let wrapper;
|
||||
@@ -116,49 +114,4 @@ describe('BootstrapTable', () => {
|
||||
expect(wrapper.find('.table-caption').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when cellEdit props is defined', () => {
|
||||
const nonEditableRows = [data[1].id];
|
||||
const currEditCell = {
|
||||
ridx: 1,
|
||||
cidx: 2,
|
||||
message: null,
|
||||
editing: false
|
||||
};
|
||||
const cellEdit = {
|
||||
mode: Const.CLICK_TO_CELL_EDIT,
|
||||
onEditing: sinon.stub(),
|
||||
nonEditableRows: () => nonEditableRows
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
columns={ columns }
|
||||
data={ data }
|
||||
bordered={ false }
|
||||
store={ store }
|
||||
cellEdit={ cellEdit }
|
||||
onCellUpdate={ sinon.stub() }
|
||||
onStartEditing={ sinon.stub() }
|
||||
onEscapeEditing={ sinon.stub() }
|
||||
currEditCell={ currEditCell }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should resolve correct cellEdit object to Body component', () => {
|
||||
const body = wrapper.find(Body);
|
||||
expect(body.length).toBe(1);
|
||||
expect(body.props().cellEdit.nonEditableRows).toEqual(nonEditableRows);
|
||||
expect(body.props().cellEdit.ridx).toEqual(currEditCell.ridx);
|
||||
expect(body.props().cellEdit.cidx).toEqual(currEditCell.cidx);
|
||||
expect(body.props().cellEdit.message).toEqual(currEditCell.message);
|
||||
expect(body.props().cellEdit.editing).toEqual(currEditCell.editing);
|
||||
expect(body.props().cellEdit.onStart).toBeDefined();
|
||||
expect(body.props().cellEdit.onEscape).toBeDefined();
|
||||
expect(body.props().cellEdit.onUpdate).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,346 +0,0 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Store from '../../src/store';
|
||||
import Container from '../../src';
|
||||
import BootstrapTable from '../../src/bootstrap-table';
|
||||
import wrapperFactory from '../../src/cell-edit/wrapper';
|
||||
|
||||
describe('CellEditWrapper', () => {
|
||||
let wrapper;
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Name'
|
||||
}];
|
||||
|
||||
const data = [{
|
||||
id: 1,
|
||||
name: 'A'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'B'
|
||||
}];
|
||||
|
||||
const cellEdit = {
|
||||
mode: 'click'
|
||||
};
|
||||
|
||||
const keyField = 'id';
|
||||
const store = new Store(keyField);
|
||||
store.data = data;
|
||||
|
||||
const CellEditWrapper = wrapperFactory(Container);
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render CellEditWrapper correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(BootstrapTable)).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have correct state', () => {
|
||||
expect(wrapper.state().ridx).toBeNull();
|
||||
expect(wrapper.state().cidx).toBeNull();
|
||||
expect(wrapper.state().message).toBeNull();
|
||||
expect(wrapper.state().isDataChanged).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should inject correct props to base component', () => {
|
||||
expect(wrapper.props().onCellUpdate).toBeDefined();
|
||||
expect(wrapper.props().onStartEditing).toBeDefined();
|
||||
expect(wrapper.props().onEscapeEditing).toBeDefined();
|
||||
expect(wrapper.props().isDataChanged).toBe(wrapper.state().isDataChanged);
|
||||
expect(wrapper.props().currEditCell).toBeDefined();
|
||||
expect(wrapper.props().currEditCell.ridx).toBeNull();
|
||||
expect(wrapper.props().currEditCell.cidx).toBeNull();
|
||||
expect(wrapper.props().currEditCell.message).toBeNull();
|
||||
});
|
||||
|
||||
describe('when receive new cellEdit prop', () => {
|
||||
const spy = jest.spyOn(CellEditWrapper.prototype, 'escapeEditing');
|
||||
|
||||
describe('and cellEdit is not work on remote', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
wrapper.setProps({ cellEdit: { ...cellEdit } });
|
||||
});
|
||||
|
||||
it('should always setting state.isDataChanged as false', () => {
|
||||
expect(wrapper.state().isDataChanged).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('and cellEdit is work on remote', () => {
|
||||
let errorMessage;
|
||||
const ridx = 1;
|
||||
const cidx = 2;
|
||||
|
||||
describe('and cellEdit.errorMessage is defined', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
remote={ { cellEdit: true } }
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
errorMessage = 'test';
|
||||
wrapper.setState({ ridx, cidx });
|
||||
wrapper.setProps({ cellEdit: { ...cellEdit, errorMessage } });
|
||||
});
|
||||
|
||||
it('should setting correct state', () => {
|
||||
expect(wrapper.state().ridx).toEqual(ridx);
|
||||
expect(wrapper.state().cidx).toEqual(cidx);
|
||||
expect(wrapper.state().isDataChanged).toBeFalsy();
|
||||
expect(wrapper.state().message).toEqual(errorMessage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('and cellEdit.errorMessage is undefined', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
remote={ { cellEdit: true } }
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
errorMessage = null;
|
||||
wrapper.setState({ ridx, cidx });
|
||||
wrapper.setProps({ cellEdit: { ...cellEdit, errorMessage } });
|
||||
});
|
||||
|
||||
it('should setting correct state', () => {
|
||||
expect(wrapper.state().isDataChanged).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should escape current editing', () => {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('call escapeEditing function', () => {
|
||||
it('should set state correctly', () => {
|
||||
wrapper.instance().escapeEditing();
|
||||
expect(wrapper.state().ridx).toBeNull();
|
||||
expect(wrapper.state().cidx).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('call startEditing function', () => {
|
||||
const ridx = 1;
|
||||
const cidx = 3;
|
||||
it('should set state correctly', () => {
|
||||
wrapper.instance().startEditing(ridx, cidx);
|
||||
expect(wrapper.state().ridx).toEqual(ridx);
|
||||
expect(wrapper.state().cidx).toEqual(cidx);
|
||||
expect(wrapper.state().isDataChanged).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('if selectRow.clickToSelect is defined', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox', clickToSelect: true };
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
selectRow={ selectRow }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should not set state', () => {
|
||||
wrapper.instance().startEditing(ridx, cidx);
|
||||
expect(wrapper.state().ridx).toBeNull();
|
||||
expect(wrapper.state().cidx).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('if selectRow.clickToSelect and selectRow.clickToEdit is defined', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox', clickToSelect: true, clickToEdit: true };
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
selectRow={ selectRow }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should set state correctly', () => {
|
||||
wrapper.instance().startEditing(ridx, cidx);
|
||||
expect(wrapper.state().ridx).toEqual(ridx);
|
||||
expect(wrapper.state().cidx).toEqual(cidx);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('call completeEditing function', () => {
|
||||
it('should set state correctly', () => {
|
||||
wrapper.instance().completeEditing();
|
||||
expect(wrapper.state().ridx).toBeNull();
|
||||
expect(wrapper.state().cidx).toBeNull();
|
||||
expect(wrapper.state().message).toBeNull();
|
||||
expect(wrapper.state().isDataChanged).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('call handleCellUpdate function', () => {
|
||||
const row = data[0];
|
||||
const column = columns[1];
|
||||
const newValue = 'new name';
|
||||
|
||||
describe('when cell edit is work on remote', () => {
|
||||
const spy = jest.spyOn(CellEditWrapper.prototype, 'handleCellChange');
|
||||
const onTableChangeCB = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
remote={ { cellEdit: true } }
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
onTableChange={ onTableChangeCB }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
wrapper.instance().handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling handleCellChange correctly', () => {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
expect(spy.mock.calls).toHaveLength(1);
|
||||
expect(spy.mock.calls[0]).toHaveLength(3);
|
||||
expect(spy.mock.calls[0][0]).toEqual(row[keyField]);
|
||||
expect(spy.mock.calls[0][1]).toEqual(column.dataField);
|
||||
expect(spy.mock.calls[0][2]).toEqual(newValue);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when cell edit is not work on remote', () => {
|
||||
const spyOnCompleteEditing = jest.spyOn(CellEditWrapper.prototype, 'completeEditing');
|
||||
const spyOnStoreEdit = jest.spyOn(Store.prototype, 'edit');
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
wrapper.instance().handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
spyOnStoreEdit.mockReset();
|
||||
spyOnCompleteEditing.mockReset();
|
||||
});
|
||||
|
||||
it('should calling props.store.edit', () => {
|
||||
expect(spyOnStoreEdit).toHaveBeenCalled();
|
||||
expect(spyOnStoreEdit.mock.calls).toHaveLength(1);
|
||||
expect(spyOnStoreEdit.mock.calls[0]).toHaveLength(3);
|
||||
expect(spyOnStoreEdit.mock.calls[0][0]).toEqual(row[keyField]);
|
||||
expect(spyOnStoreEdit.mock.calls[0][1]).toEqual(column.dataField);
|
||||
expect(spyOnStoreEdit.mock.calls[0][2]).toEqual(newValue);
|
||||
});
|
||||
|
||||
it('should calling completeEditing function', () => {
|
||||
expect(spyOnCompleteEditing).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('if cellEdit.afterSaveCell prop defined', () => {
|
||||
const aftereSaveCellCallBack = sinon.stub();
|
||||
|
||||
beforeEach(() => {
|
||||
cellEdit.afterSaveCell = aftereSaveCellCallBack;
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
wrapper.instance().handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling cellEdit.afterSaveCell correctly', () => {
|
||||
expect(aftereSaveCellCallBack.callCount).toBe(1);
|
||||
expect(aftereSaveCellCallBack.calledWith(
|
||||
row[column.dataField], newValue, row, column)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('if cellEdit.beforeSaveCell prop defined', () => {
|
||||
const beforeSaveCellCallBack = sinon.stub();
|
||||
beforeEach(() => {
|
||||
cellEdit.beforeSaveCell = beforeSaveCellCallBack;
|
||||
wrapper = shallow(
|
||||
<CellEditWrapper
|
||||
keyField={ keyField }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEdit }
|
||||
store={ store }
|
||||
/>
|
||||
);
|
||||
wrapper.instance().handleCellUpdate(row, column, newValue);
|
||||
});
|
||||
|
||||
it('should calling cellEdit.beforeSaveCell correctly', () => {
|
||||
expect(beforeSaveCellCallBack.callCount).toBe(1);
|
||||
expect(beforeSaveCellCallBack.calledWith(
|
||||
row[column.dataField], newValue, row, column)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Const from '../src/const';
|
||||
import Cell from '../src/cell';
|
||||
|
||||
describe('Cell', () => {
|
||||
@@ -462,7 +461,7 @@ describe('Cell', () => {
|
||||
onStartCallBack = sinon.stub().withArgs(rowIndex, columnIndex);
|
||||
});
|
||||
|
||||
describe(`and editMode is ${Const.CLICK_TO_CELL_EDIT}`, () => {
|
||||
describe('and clickToEdit is true', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<Cell
|
||||
@@ -471,7 +470,7 @@ describe('Cell', () => {
|
||||
column={ column }
|
||||
columnIndex={ columnIndex }
|
||||
editable
|
||||
editMode={ Const.CLICK_TO_CELL_EDIT }
|
||||
clickToEdit
|
||||
onStart={ onStartCallBack }
|
||||
/>
|
||||
);
|
||||
@@ -502,7 +501,7 @@ describe('Cell', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe(`and editMode is ${Const.DBCLICK_TO_CELL_EDIT}`, () => {
|
||||
describe('and dbclickToEdit is true', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<Cell
|
||||
@@ -511,7 +510,7 @@ describe('Cell', () => {
|
||||
column={ column }
|
||||
columnIndex={ 1 }
|
||||
editable
|
||||
editMode={ Const.DBCLICK_TO_CELL_EDIT }
|
||||
dbclickToEdit
|
||||
onStart={ onStartCallBack }
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -51,8 +51,15 @@ describe('container', () => {
|
||||
});
|
||||
|
||||
describe('when cellEdit prop is defined', () => {
|
||||
const wrapperFactory = Base => class CellEditWrapper extends React.Component {
|
||||
render() { return <Base { ...this.props } />; }
|
||||
};
|
||||
|
||||
const cellEdit = {
|
||||
mode: 'click'
|
||||
wrapperFactory,
|
||||
options: {
|
||||
mode: 'click'
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -72,64 +72,6 @@ describe('TableResolver', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('resolveCellEditProps', () => {
|
||||
describe('if cellEdit prop not defined', () => {
|
||||
beforeEach(() => {
|
||||
const mockElement = React.createElement(BootstrapTableMock, {
|
||||
data, keyField, columns
|
||||
}, null);
|
||||
wrapper = shallow(mockElement);
|
||||
});
|
||||
|
||||
it('should resolve a default cellEdit instance', () => {
|
||||
const cellEdit = wrapper.instance().resolveCellEditProps();
|
||||
expect(cellEdit).toBeDefined();
|
||||
expect(cellEdit.mode).toEqual(Const.UNABLE_TO_CELL_EDIT);
|
||||
expect(cellEdit.nonEditableRows.length).toEqual(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('if cellEdit prop defined', () => {
|
||||
const expectNonEditableRows = [1, 2];
|
||||
const cellEdit = {
|
||||
mode: Const.DBCLICK_TO_CELL_EDIT,
|
||||
blurToSave: true,
|
||||
beforeSaveCell: sinon.stub(),
|
||||
afterSaveCell: sinon.stub(),
|
||||
nonEditableRows: sinon.stub().returns(expectNonEditableRows)
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const mockElement = React.createElement(BootstrapTableMock, {
|
||||
data, keyField, columns, cellEdit
|
||||
}, null);
|
||||
wrapper = shallow(mockElement);
|
||||
});
|
||||
|
||||
it('should resolve a cellEdit correctly', () => {
|
||||
const cellEditInfo = wrapper.instance().resolveCellEditProps();
|
||||
expect(cellEditInfo).toBeDefined();
|
||||
expect(cellEditInfo.mode).toEqual(cellEdit.mode);
|
||||
expect(cellEditInfo.onUpdate).toEqual(cellEdit.onUpdate);
|
||||
expect(cellEditInfo.blurToSave).toEqual(cellEdit.blurToSave);
|
||||
expect(cellEditInfo.beforeSaveCell).toEqual(cellEdit.beforeSaveCell);
|
||||
expect(cellEditInfo.afterSaveCell).toEqual(cellEdit.afterSaveCell);
|
||||
expect(cellEditInfo.nonEditableRows).toEqual(expectNonEditableRows);
|
||||
});
|
||||
|
||||
it('should attach options to cellEdit props', () => {
|
||||
const something = {
|
||||
test: 1,
|
||||
cb: sinon.stub()
|
||||
};
|
||||
const cellEditInfo = wrapper.instance().resolveCellEditProps(something);
|
||||
expect(cellEditInfo).toBeDefined();
|
||||
expect(cellEditInfo.test).toEqual(something.test);
|
||||
expect(cellEditInfo.cb).toEqual(something.cb);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('resolveSelectRowProps', () => {
|
||||
let cellSelectionInfo;
|
||||
let selectRow;
|
||||
|
||||
@@ -5,7 +5,6 @@ import { shallow } from 'enzyme';
|
||||
import Cell from '../src/cell';
|
||||
import Row from '../src/row';
|
||||
import Const from '../src/const';
|
||||
import EditingCell from '../src/cell-edit/editing-cell';
|
||||
import SelectionCell from '../src//row-selection/selection-cell';
|
||||
import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
|
||||
|
||||
@@ -97,7 +96,9 @@ describe('Row', () => {
|
||||
beforeEach(() => {
|
||||
columns = defaultColumns;
|
||||
cellEdit = {
|
||||
mode: Const.CLICK_TO_CELL_EDIT
|
||||
mode: 'click',
|
||||
CLICK_TO_CELL_EDIT: 'click',
|
||||
DBCLICK_TO_CELL_EDIT: 'dbclick'
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
@@ -128,13 +129,50 @@ describe('Row', () => {
|
||||
}
|
||||
});
|
||||
|
||||
it('Cell component should receive correct editMode props', () => {
|
||||
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.editMode).toEqual(cellEdit.mode);
|
||||
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(() => {
|
||||
@@ -266,6 +304,7 @@ describe('Row', () => {
|
||||
|
||||
// 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(() => {
|
||||
@@ -273,6 +312,7 @@ describe('Row', () => {
|
||||
cellEdit.cidx = editingColIndex;
|
||||
cellEdit.onUpdate = sinon.stub();
|
||||
cellEdit.onEscape = sinon.stub();
|
||||
cellEdit.EditingCell = EditingCell;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
/* eslint react/prop-types: 0 */
|
||||
import React from 'react';
|
||||
|
||||
export const TableRowWrapper = props => (
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>{ props.children }</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user