From 9428f2d9b7cca72c3d7659e6ac2dcb7c0602c77d Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 7 Jan 2018 11:15:11 +0800
Subject: [PATCH] refine cell edit tests

---
 .../test}/editing-cell.test.js                |  19 +-
 .../test}/text-editor.test.js                 |   2 +-
 .../test/wrapper.test.js                      | 330 +++++++++++++++++
 .../test/bootstrap-table.test.js              |  47 ---
 .../test/cell-edit/wrapper.test.js            | 346 ------------------
 .../react-bootstrap-table2/test/cell.test.js  |   9 +-
 .../test/container.test.js                    |   9 +-
 .../test/props-resolver/index.test.js         |  58 ---
 .../react-bootstrap-table2/test/row.test.js   |  48 ++-
 .../test/test-helpers/table-wrapper.js        |  11 -
 10 files changed, 402 insertions(+), 477 deletions(-)
 rename packages/{react-bootstrap-table2/test/cell-edit => react-bootstrap-table2-editor/test}/editing-cell.test.js (94%)
 rename packages/{react-bootstrap-table2/test/cell-edit => react-bootstrap-table2-editor/test}/text-editor.test.js (94%)
 create mode 100644 packages/react-bootstrap-table2-editor/test/wrapper.test.js
 delete mode 100644 packages/react-bootstrap-table2/test/cell-edit/wrapper.test.js
 delete mode 100644 packages/react-bootstrap-table2/test/test-helpers/table-wrapper.js

diff --git a/packages/react-bootstrap-table2/test/cell-edit/editing-cell.test.js b/packages/react-bootstrap-table2-editor/test/editing-cell.test.js
similarity index 94%
rename from packages/react-bootstrap-table2/test/cell-edit/editing-cell.test.js
rename to packages/react-bootstrap-table2-editor/test/editing-cell.test.js
index 190d759..5eda210 100644
--- a/packages/react-bootstrap-table2/test/cell-edit/editing-cell.test.js
+++ b/packages/react-bootstrap-table2-editor/test/editing-cell.test.js
@@ -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;
diff --git a/packages/react-bootstrap-table2/test/cell-edit/text-editor.test.js b/packages/react-bootstrap-table2-editor/test/text-editor.test.js
similarity index 94%
rename from packages/react-bootstrap-table2/test/cell-edit/text-editor.test.js
rename to packages/react-bootstrap-table2-editor/test/text-editor.test.js
index e9d9119..845d788 100644
--- a/packages/react-bootstrap-table2/test/cell-edit/text-editor.test.js
+++ b/packages/react-bootstrap-table2-editor/test/text-editor.test.js
@@ -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;
diff --git a/packages/react-bootstrap-table2-editor/test/wrapper.test.js b/packages/react-bootstrap-table2-editor/test/wrapper.test.js
new file mode 100644
index 0000000..4e2426e
--- /dev/null
+++ b/packages/react-bootstrap-table2-editor/test/wrapper.test.js
@@ -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);
+      });
+    });
+  });
+});
diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
index 458f456..3e5e0e1 100644
--- a/packages/react-bootstrap-table2/test/bootstrap-table.test.js
+++ b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
@@ -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();
-    });
-  });
 });
diff --git a/packages/react-bootstrap-table2/test/cell-edit/wrapper.test.js b/packages/react-bootstrap-table2/test/cell-edit/wrapper.test.js
deleted file mode 100644
index c195b16..0000000
--- a/packages/react-bootstrap-table2/test/cell-edit/wrapper.test.js
+++ /dev/null
@@ -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);
-      });
-    });
-  });
-});
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index 49d9458..b83bcc9 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/packages/react-bootstrap-table2/test/cell.test.js
@@ -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 }
           />
         );
diff --git a/packages/react-bootstrap-table2/test/container.test.js b/packages/react-bootstrap-table2/test/container.test.js
index 066a948..291e4cc 100644
--- a/packages/react-bootstrap-table2/test/container.test.js
+++ b/packages/react-bootstrap-table2/test/container.test.js
@@ -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(() => {
diff --git a/packages/react-bootstrap-table2/test/props-resolver/index.test.js b/packages/react-bootstrap-table2/test/props-resolver/index.test.js
index 7f4cf59..1b6bf8c 100644
--- a/packages/react-bootstrap-table2/test/props-resolver/index.test.js
+++ b/packages/react-bootstrap-table2/test/props-resolver/index.test.js
@@ -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;
diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js
index a44e52f..955a421 100644
--- a/packages/react-bootstrap-table2/test/row.test.js
+++ b/packages/react-bootstrap-table2/test/row.test.js
@@ -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 }
diff --git a/packages/react-bootstrap-table2/test/test-helpers/table-wrapper.js b/packages/react-bootstrap-table2/test/test-helpers/table-wrapper.js
deleted file mode 100644
index e2decdb..0000000
--- a/packages/react-bootstrap-table2/test/test-helpers/table-wrapper.js
+++ /dev/null
@@ -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>
-);
-