set sort caret to grey if not sorting

* Record all values of columns sort order in the table of sortOrder

.eslintrc

@@ -11,12 +11,11 @@
   ],
   "rules": {
     "comma-dangle": ["error", "never"],
-    "react/forbid-prop-types": 0,
     "react/jsx-curly-spacing": 0,
+    "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-space-before-closing": 0,
     "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
-    "react/require-default-props": 0,
     "import/extensions": 0, // skip import extensions
     "import/no-unresolved": [0, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup
     "import/prefer-default-export": 0,

package.json

@@ -74,11 +74,6 @@
     "testEnvironment": "node",
     "testMatch": [
       "**/test/**/*.test.js"
-    ],
-    "moduleFileExtensions": ["js", "jsx"],
-    "moduleDirectories": [
-      "node_modules",
-      "packages/react-bootstrap-table2"
     ]
   }
 }

packages/react-bootstrap-table2-example/src/index.js

@@ -1,5 +1,3 @@
-/* eslint no-console: 0 */
-
 import React from 'react';
 import ReactDom from 'react-dom';
 

packages/react-bootstrap-table2/src/body.js

@@ -1,4 +1,5 @@
 /* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
 
 import React from 'react';
 import PropTypes from 'prop-types';

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -74,7 +74,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           <Header
             columns={ columns }
             sortField={ this.store.sortField }
-            sortOrder={ this.store.sortOrder }
+            sortOrderTable={ this.store.sortOrderTable }
             onSort={ this.handleSort }
             selectRow={ headerCellSelectionInfo }
           />

packages/react-bootstrap-table2/src/const.js

@@ -1,6 +1,8 @@
 export default {
+  SORT_UNSET: 'unset',
   SORT_ASC: 'asc',
   SORT_DESC: 'desc',
+  SORT_UNSORTABLE: 'unsortable',
   UNABLE_TO_CELL_EDIT: 'none',
   CLICK_TO_CELL_EDIT: 'click',
   DBCLICK_TO_CELL_EDIT: 'dbclick',

packages/react-bootstrap-table2/src/header-cell.js

@@ -1,3 +1,4 @@
+/* eslint react/require-default-props: 0 */
 import React from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
@@ -18,7 +19,6 @@ const HeaderCell = (props) => {
   } = props;
   const {
     text,
-    sort,
     hidden,
     headerTitle,
     headerAlign,
@@ -59,7 +59,7 @@ const HeaderCell = (props) => {
 
   if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
 
-  if (sort) {
+  if (sortOrder !== Const.SORT_UNSORTABLE) {
     const customClick = cellAttrs.onClick;
     cellAttrs.onClick = (e) => {
       onSort(column);
@@ -67,10 +67,10 @@ const HeaderCell = (props) => {
     };
     cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
-    if (sorting) {
-      sortSymbol = <SortCaret order={ sortOrder } />;
-    } else {
+    if (sortOrder === Const.SORT_UNSET) {
       sortSymbol = <SortSymbol />;
+    } else {
+      sortSymbol = <SortCaret order={ sortOrder } sorting={sorting} />;
     }
   }
 
@@ -105,7 +105,9 @@ HeaderCell.propTypes = {
   index: PropTypes.number.isRequired,
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
-  sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC])
+  sortOrder: PropTypes.oneOf([
+    Const.SORT_UNSET, Const.SORT_ASC, Const.SORT_DESC, Const.SORT_UNSORTABLE
+  ])
 };
 
 export default HeaderCell;

packages/react-bootstrap-table2/src/header.js

@@ -1,3 +1,4 @@
+/* eslint react/require-default-props: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Const from './const';
@@ -12,7 +13,7 @@ const Header = (props) => {
     columns,
     onSort,
     sortField,
-    sortOrder,
+    sortOrderTable,
     selectRow
   } = props;
 
@@ -32,7 +33,7 @@ const Header = (props) => {
                 column={ column }
                 onSort={ onSort }
                 sorting={ currSort }
-                sortOrder={ sortOrder }
+                sortOrder={ sortOrderTable[column.dataField] }
               />);
           })
         }
@@ -45,7 +46,7 @@ Header.propTypes = {
   columns: PropTypes.array.isRequired,
   onSort: PropTypes.func,
   sortField: PropTypes.string,
-  sortOrder: PropTypes.string,
+  sortOrderTable: PropTypes.object,
   selectRow: PropTypes.object
 };
 

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -1,5 +1,7 @@
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-
+/* eslint
+  react/require-default-props: 0
+  jsx-a11y/no-noninteractive-element-interactions: 0
+*/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Const from '../const';

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -1,3 +1,4 @@
+/* eslint react/require-default-props: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Constant from '../const';

packages/react-bootstrap-table2/src/sort-caret.js

@@ -4,18 +4,24 @@ import PropTypes from 'prop-types';
 
 import Const from './const';
 
-const SortCaret = ({ order }) => {
+const SortCaret = ({ order, sorting }) => {
   const orderClass = cs('react-bootstrap-table-sort-order', {
     dropup: order === Const.SORT_ASC
   });
+
+  const iconClass = cs('caret', {
+    sorting
+  });
+
   return (
     <span className={ orderClass }>
-      <span className="caret" />
+      <span className={ iconClass } />
     </span>
   );
 };
 
 SortCaret.propTypes = {
-  order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
+  order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired,
+  sorting: PropTypes.bool.isRequired
 };
 export default SortCaret;

packages/react-bootstrap-table2/src/store/base.js

@@ -1,4 +1,4 @@
-import { sort } from './sort';
+import { sort, getSortOrderTable } from './sort';
 import Const from '../const';
 import _ from '../utils';
 
@@ -8,7 +8,7 @@ export default class Store {
     this.keyField = keyField;
     this.data = data ? data.slice() : [];
 
-    this.sortOrder = undefined;
+    this.sortOrderTable = getSortOrderTable(props);
     this.sortField = undefined;
     this.selected = [];
   }
@@ -18,13 +18,22 @@ export default class Store {
   }
 
   sortBy({ dataField, sortFunc }) {
-    if (dataField !== this.sortField) {
-      this.sortOrder = Const.SORT_DESC;
-    } else {
-      this.sortOrder = this.sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC;
+    let order;
+
+    switch (this.sortOrderTable[dataField]) {
+      case Const.SORT_UNSET:
+        order = Const.SORT_DESC;
+        break;
+      case Const.SORT_DESC:
+        order = Const.SORT_ASC;
+        break;
+      default:
+        order = Const.SORT_DESC;
+        break;
     }
 
-    this.data = sort(dataField, this.data, this.sortOrder, sortFunc);
+    this.sortOrderTable[dataField] = order;
+    this.data = sort(dataField, this.data, this.sortOrderTable[dataField], sortFunc);
     this.sortField = dataField;
   }
 

packages/react-bootstrap-table2/src/store/sort.js

@@ -37,4 +37,24 @@ const sort = (dataField, data, order, sortFunc) => {
   return _data;
 };
 
-export { sort };
+/**
+ *
+ * @param {Object} props - store props.
+ * @param {Object} props.columns - columns passing by user.
+ *
+ * @return {Object} - return table which contains initial sort order.
+ */
+const getSortOrderTable = ({ columns }) => {
+  const sortOrderTable = {};
+  const { SORT_UNSET, SORT_UNSORTABLE } = Const;
+
+  columns.forEach((column) => {
+    const { dataField, sort: sortable } = column;
+
+    sortOrderTable[dataField] = sortable ? SORT_UNSET : SORT_UNSORTABLE;
+  });
+
+  return sortOrderTable;
+};
+
+export { sort, getSortOrderTable };

packages/react-bootstrap-table2/style/react-bootstrap-table.scss

@@ -22,6 +22,10 @@
     margin: 10px 6.5px;
   }
 
+  th > .react-bootstrap-table-sort-order > .caret:not(.sorting) {
+    color: #cccccc;
+  }
+
   th[data-row-selection] {
     width: 30px;
   }

packages/react-bootstrap-table2/test/body.test.js

@@ -2,22 +2,33 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Body from 'src/body';
-import Row from 'src/row';
-import Const from 'src/const';
-import RowSection from 'src/row-section';
-import { baseColumns, baseData, baseProps, bodyResolvedProps } from 'test/factory';
-
-const columns = baseColumns();
-const data = baseData();
-const mockBodyResolvedProps = bodyResolvedProps();
+import Body from '../src/body';
+import Row from '../src/row';
+import Const from '../src/const';
+import RowSection from '../src/row-section';
+import mockBodyResolvedProps from '../test/mock-data/body-resolved-props';
 
 describe('Body', () => {
   let wrapper;
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
 
   describe('simplest body', () => {
     beforeEach(() => {
-      wrapper = shallow(<Body {...baseProps} {...mockBodyResolvedProps} />);
+      wrapper = shallow(<Body {...mockBodyResolvedProps} keyField="id" columns={ columns } data={ data } />);
     });
 
     it('should render successfully', () => {
@@ -31,8 +42,10 @@ describe('Body', () => {
     beforeEach(() => {
       wrapper = shallow(
         <Body
-          {...baseProps}
           {...mockBodyResolvedProps}
+          keyField="id"
+          columns={ columns }
+          data={ data }
           visibleColumnSize={ columns.length }
           isEmpty
         />);
@@ -54,8 +67,10 @@ describe('Body', () => {
           emptyIndication = 'Table is empty';
           wrapper = shallow(
             <Body
-              {...baseProps}
               {...mockBodyResolvedProps}
+              keyField="id"
+              columns={ columns }
+              data={ data }
               visibleColumnSize={ columns.length }
               noDataIndication={ emptyIndication }
               isEmpty
@@ -78,8 +93,10 @@ describe('Body', () => {
           emptyIndicationCallBack = sinon.stub().returns(content);
           wrapper = shallow(
             <Body
-              {...baseProps}
               {...mockBodyResolvedProps}
+              keyField="id"
+              columns={ columns }
+              data={ data }
               visibleColumnSize={ columns.length }
               noDataIndication={ emptyIndicationCallBack }
               isEmpty
@@ -110,8 +127,10 @@ describe('Body', () => {
     beforeEach(() => {
       wrapper = shallow(
         <Body
-          {...baseProps}
           {...mockBodyResolvedProps}
+          data={ data }
+          columns={ columns }
+          keyField={ keyField }
           cellEdit={ cellEdit }
         />
       );
@@ -131,13 +150,16 @@ describe('Body', () => {
   });
 
   describe('when selectRow.mode is checkbox or radio (row was selectable)', () => {
+    const keyField = 'id';
     const selectRow = { mode: 'checkbox' };
 
     it('props selected should be true if all rows were selected', () => {
       wrapper = shallow(
         <Body
-          {...baseProps}
           {...mockBodyResolvedProps}
+          data={ data }
+          columns={ columns }
+          keyField={ keyField }
           selectedRowKeys={[1, 2]}
           selectRow={selectRow}
         />
@@ -149,8 +171,10 @@ describe('Body', () => {
     it('props selected should be false if all rows were not selected', () => {
       wrapper = shallow(
         <Body
-          {...baseProps}
           {...mockBodyResolvedProps}
+          data={ data }
+          columns={ columns }
+          keyField={ keyField }
           selectedRowKeys={[]}
           selectRow={selectRow}
         />
@@ -162,10 +186,13 @@ describe('Body', () => {
 
   describe('when selectRow.mode is ROW_SELECT_DISABLED (row was un-selectable)', () => {
     beforeEach(() => {
+      const keyField = 'id';
       wrapper = shallow(
         <Body
-          {...baseProps}
           {...mockBodyResolvedProps}
+          data={ data }
+          columns={ columns }
+          keyField={ keyField }
           selectedRowKeys={[]}
         />
       );

packages/react-bootstrap-table2/test/bootstrap-table.test.js

@@ -2,20 +2,33 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Caption from 'src/caption';
-import BootstrapTable from 'src/bootstrap-table';
-import Header from 'src/header';
-import Body from 'src/body';
-import Const from 'src/const';
-import { baseData, baseProps } from 'test/factory';
+import Caption from '../src/caption';
+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;
-  const data = baseData();
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
 
   describe('simplest table', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable {...baseProps} />);
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } />);
     });
 
     it('should render successfully', () => {
@@ -39,7 +52,7 @@ describe('BootstrapTable', () => {
 
   describe('when hover props is true', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable {...baseProps} hover />);
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } hover />);
     });
 
     it('should have table-hover class on table', () => {
@@ -49,7 +62,7 @@ describe('BootstrapTable', () => {
 
   describe('when striped props is true', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable {...baseProps} striped />);
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } striped />);
     });
 
     it('should have table-striped class on table', () => {
@@ -59,7 +72,7 @@ describe('BootstrapTable', () => {
 
   describe('when condensed props is true', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable {...baseProps} condensed />);
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } condensed />);
     });
 
     it('should have table-condensed class on table', () => {
@@ -69,7 +82,7 @@ describe('BootstrapTable', () => {
 
   describe('when bordered props is false', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable {...baseProps} bordered={ false } />);
+      wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } bordered={ false } />);
     });
 
     it('should not have table-condensed class on table', () => {
@@ -81,8 +94,10 @@ describe('BootstrapTable', () => {
     beforeEach(() => {
       wrapper = shallow(
         <BootstrapTable
-          {...baseProps}
           caption={ <span className="table-caption">test</span> }
+          keyField="id"
+          columns={ columns }
+          data={ data }
           bordered={ false }
         />
       );
@@ -105,7 +120,9 @@ describe('BootstrapTable', () => {
     beforeEach(() => {
       wrapper = shallow(
         <BootstrapTable
-          {...baseProps}
+          keyField="id"
+          columns={ columns }
+          data={ data }
           bordered={ false }
           cellEdit={ cellEdit }
         />
@@ -131,7 +148,9 @@ describe('BootstrapTable', () => {
       beforeEach(() => {
         wrapper = shallow(
           <BootstrapTable
-            {...baseProps}
+            keyField="id"
+            columns={ columns }
+            data={ data }
             selectRow={{ mode: 'radio' }}
           />
         );
@@ -150,7 +169,9 @@ describe('BootstrapTable', () => {
       beforeEach(() => {
         wrapper = shallow(
           <BootstrapTable
-            {...baseProps}
+            keyField="id"
+            columns={ columns }
+            data={ data }
             selectRow={{ mode: 'checkbox' }}
           />
         );
@@ -176,7 +197,11 @@ describe('BootstrapTable', () => {
   describe('handleAllRowsSelect', () => {
     beforeEach(() => {
       wrapper = shallow(
-        <BootstrapTable {...baseProps} />
+        <BootstrapTable
+          keyField="id"
+          columns={ columns }
+          data={ data }
+        />
       );
     });
 

packages/react-bootstrap-table2/test/cell.test.js

@@ -2,17 +2,21 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Const from 'src/const';
-import Cell from 'src/cell';
-
-import { baseColumn, baseRow } from 'test/factory';
+import Const from '../src/const';
+import Cell from '../src/cell';
 
 describe('Cell', () => {
   let wrapper;
-  const row = baseRow();
+  const row = {
+    id: 1,
+    name: 'A'
+  };
 
   describe('simplest cell', () => {
-    const column = baseColumn();
+    const column = {
+      dataField: 'id',
+      text: 'ID'
+    };
 
     beforeEach(() => {
       wrapper = shallow(<Cell row={ row } columnIndex={ 1 } rowIndex={ 1 } column={ column } />);
@@ -26,7 +30,8 @@ describe('Cell', () => {
 
   describe('when column.hidden prop is true', () => {
     const column = {
-      ...baseColumn(),
+      dataField: 'id',
+      text: 'ID',
       hidden: true
     };
 
@@ -44,7 +49,8 @@ describe('Cell', () => {
   describe('when column.formatter prop is defined', () => {
     const rowIndex = 1;
     const column = {
-      ...baseColumn(),
+      dataField: 'id',
+      text: 'ID',
       formatExtraData: []
     };
     const formatterResult = (<h3>{ row[column.dataField] }</h3>);
@@ -79,7 +85,10 @@ describe('Cell', () => {
     const rowIndex = 1;
 
     beforeEach(() => {
-      column = baseColumn();
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
     });
 
     describe('when style is an object', () => {
@@ -130,7 +139,10 @@ describe('Cell', () => {
     const rowIndex = 1;
 
     beforeEach(() => {
-      column = baseColumn();
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
     });
 
     describe('when classes is an object', () => {
@@ -181,7 +193,10 @@ describe('Cell', () => {
     const rowIndex = 1;
 
     beforeEach(() => {
-      column = baseColumn();
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
     });
 
     describe('when title is boolean', () => {
@@ -231,7 +246,8 @@ describe('Cell', () => {
 
     beforeEach(() => {
       column = {
-        ...baseColumn(),
+        dataField: 'id',
+        text: 'ID',
         events: {
           onClick: sinon.stub()
         }
@@ -258,7 +274,10 @@ describe('Cell', () => {
     const rowIndex = 1;
 
     beforeEach(() => {
-      column = baseColumn();
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
     });
 
     describe('when align is string', () => {
@@ -307,7 +326,10 @@ describe('Cell', () => {
     const rowIndex = 1;
 
     beforeEach(() => {
-      column = baseColumn();
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
     });
 
     describe('when attrs is an object', () => {
@@ -431,7 +453,10 @@ describe('Cell', () => {
     let onStartCallBack;
     const rowIndex = 1;
     const columnIndex = 1;
-    const column = baseColumn();
+    const column = {
+      dataField: 'id',
+      text: 'ID'
+    };
 
     beforeEach(() => {
       onStartCallBack = sinon.stub().withArgs(rowIndex, columnIndex);

packages/react-bootstrap-table2/test/editing-cell.test.js

@@ -3,20 +3,24 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 
-import EditingCell from 'src/editing-cell';
-import TextEditor from 'src/text-editor';
-import EditorIndicator from 'src/editor-indicator';
-
-import { TableRowWrapper } from 'test/test-helpers/table-wrapper';
-import { baseColumn, baseRow } from 'test/factory';
+import { TableRowWrapper } from './test-helpers/table-wrapper';
+import EditingCell from '../src/editing-cell';
+import TextEditor from '../src/text-editor';
+import EditorIndicator from '../src/editor-indicator';
 
 describe('EditingCell', () => {
   let wrapper;
   let onEscape;
   let onComplete;
-  const row = baseRow();
+  const row = {
+    id: 1,
+    name: 'A'
+  };
 
-  let column = baseColumn();
+  let column = {
+    dataField: 'id',
+    text: 'ID'
+  };
 
   beforeEach(() => {
     onComplete = sinon.stub();

packages/react-bootstrap-table2/test/factory/base-props.js

@@ -1,30 +0,0 @@
-export const baseColumns = () => [{
-  dataField: 'id',
-  text: 'ID'
-}, {
-  dataField: 'name',
-  text: 'Name'
-}];
-
-export const baseColumn = () => ({ dataField: 'id', text: 'ID' });
-
-export const baseData = () => [{
-  id: 1,
-  name: 'A'
-}, {
-  id: 2,
-  name: 'B'
-}];
-
-export const baseRow = () => ({ id: 1, name: 'A' });
-
-export const baseKeyField = () => 'id';
-
-/**
- * baseProps contains those basical props marked as `required` in BootstrapTable
- */
-export const baseProps = {
-  columns: baseColumns(),
-  data: baseData(),
-  keyField: baseKeyField()
-};

packages/react-bootstrap-table2/test/factory/index.js

@@ -1,19 +0,0 @@
-import { bodyResolvedProps, headerResolvedProps } from './resolved-props';
-import {
-  baseColumns, baseColumn, baseData,
-  baseKeyField, baseRow, baseProps
-} from './base-props';
-
-/**
- * Provide the base props in order to test easiler.
- */
-export {
-  bodyResolvedProps,
-  headerResolvedProps,
-  baseColumns,
-  baseColumn,
-  baseData,
-  baseRow,
-  baseKeyField,
-  baseProps
-};

packages/react-bootstrap-table2/test/factory/resolved-props.js

@@ -1,13 +0,0 @@
-import BootstrapTable from 'src/bootstrap-table';
-import { baseProps as props } from './base-props';
-
-const bootstrapTable = new BootstrapTable(props);
-
-export const bodyResolvedProps = () => ({
-  cellEdit: bootstrapTable.resolveCellEditProps(),
-  selectRow: bootstrapTable.resolveCellSelectionProps()
-});
-
-export const headerResolvedProps = () => ({
-  selectRow: bootstrapTable.resolveHeaderCellSelectionProps()
-});

packages/react-bootstrap-table2/test/header-cell.test.js

@@ -2,19 +2,20 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Const from 'src/const';
-import SortCaret from 'src/sort-caret';
-import SortSymbol from 'src/sort-symbol';
-import HeaderCell from 'src/header-cell';
-
-import { baseColumn } from 'test/factory';
+import Const from '../src/const';
+import SortCaret from '../src/sort-caret';
+import SortSymbol from '../src/sort-symbol';
+import HeaderCell from '../src/header-cell';
 
 describe('HeaderCell', () => {
   let wrapper;
   const index = 1;
 
   describe('simplest header cell', () => {
-    const column = baseColumn();
+    const column = {
+      dataField: 'id',
+      text: 'ID'
+    };
 
     beforeEach(() => {
       wrapper = shallow(<HeaderCell column={ column } index={ index } />);
@@ -34,7 +35,8 @@ describe('HeaderCell', () => {
 
   describe('when column.hidden props is true', () => {
     const column = {
-      ...baseColumn(),
+      dataField: 'id',
+      text: 'ID',
       hidden: true
     };
 
@@ -140,8 +142,10 @@ describe('HeaderCell', () => {
   });
 
   describe('when column.headerFormatter prop is defined', () => {
-    const column = baseColumn();
-
+    const column = {
+      dataField: 'id',
+      text: 'ID'
+    };
     const formatterResult = (<h3>{ column.text }</h3>);
     const formatter = sinon.stub()
       .withArgs(column, index)

packages/react-bootstrap-table2/test/header.test.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import HeaderCell from 'src/header-cell';
-import SelectionHeaderCell from 'src/row-selection/selection-header-cell';
-import Header from 'src/header';
-import Const from 'src/const';
-import { headerResolvedProps, baseColumns } from 'test/factory';
-
-const mockHeaderResolvedProps = headerResolvedProps();
+import HeaderCell from '../src/header-cell';
+import SelectionHeaderCell from '../src//row-selection/selection-header-cell';
+import Header from '../src/header';
+import Const from '../src/const';
+import mockHeaderResolvedProps from '../test/mock-data/header-resolved-props';
 
 describe('Header', () => {
   let wrapper;
-  const columns = baseColumns();
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
 
   describe('simplest header', () => {
     beforeEach(() => {

packages/react-bootstrap-table2/test/mock-data/body-resolved-props.js

@@ -0,0 +1,16 @@
+import Const from '../../src/const';
+
+const { ROW_SELECT_DISABLED, UNABLE_TO_CELL_EDIT } = Const;
+
+export const cellSelectionResolvedProps = {
+  mode: ROW_SELECT_DISABLED
+};
+
+export const cellEditResolvedProps = {
+  mode: UNABLE_TO_CELL_EDIT
+};
+
+export default {
+  cellEdit: cellEditResolvedProps,
+  selectRow: cellSelectionResolvedProps
+};

packages/react-bootstrap-table2/test/mock-data/header-resolved-props.js

@@ -0,0 +1,11 @@
+import Const from '../../src/const';
+
+const { ROW_SELECT_DISABLED } = Const;
+
+export const headerCellSelectionResolvedProps = {
+  mode: ROW_SELECT_DISABLED
+};
+
+export default {
+  selectRow: headerCellSelectionResolvedProps
+};

packages/react-bootstrap-table2/test/props-resolver/index.test.js

@@ -2,16 +2,27 @@ import React, { Component } from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import baseResolver from 'src/props-resolver/index';
-import Const from 'src/const';
-import { extendTo } from 'test/test-helpers/mock-component';
-import { baseColumns, baseData, baseKeyField } from 'test/factory';
-
-const columns = baseColumns();
-const data = baseData();
-const keyField = baseKeyField();
+import { extendTo } from '../test-helpers/mock-component';
+import baseResolver from '../../src/props-resolver/index';
+import Const from '../../src/const';
 
 describe('TableResolver', () => {
+  const keyField = 'id';
+  const columns = [{
+    dataField: keyField,
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+
   const ExtendBase = baseResolver(Component);
   const BootstrapTableMock = extendTo(ExtendBase);
   let wrapper;

packages/react-bootstrap-table2/test/row-section.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import RowSection from 'src/row-section';
+import RowSection from '../src/row-section';
 
 describe('Row', () => {
   const colSpan = 3;

packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
-import SelectionCell from 'src/row-selection/selection-cell';
+import SelectionCell from '../../src/row-selection/selection-cell';
 
 describe('<SelectionCell />', () => {
   const mode = 'checkbox';

packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
-import Constant from 'src/const';
-import SelectionHeaderCell, { CheckBox } from 'src/row-selection/selection-header-cell';
+import Constant from '../../src/const';
+import SelectionHeaderCell, { CheckBox } from '../../src/row-selection/selection-header-cell';
 
 let wrapper;
 

packages/react-bootstrap-table2/test/row.test.js

@@ -2,21 +2,32 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Cell from 'src/cell';
-import Row from 'src/row';
-import Const from 'src/const';
-import EditingCell from 'src/editing-cell';
-import SelectionCell from 'src/row-selection/selection-cell';
-import { bodyResolvedProps, baseColumns, baseRow } from 'test/factory';
+import Cell from '../src/cell';
+import Row from '../src/row';
+import Const from '../src/const';
+import EditingCell from '../src/editing-cell';
+import SelectionCell from '../src//row-selection/selection-cell';
+import mockBodyResolvedProps from '../test/mock-data/body-resolved-props';
 
-const mockBodyResolvedProps = bodyResolvedProps();
-
-const defaultColumns = baseColumns();
+const defaultColumns = [{
+  dataField: 'id',
+  text: 'ID'
+}, {
+  dataField: 'name',
+  text: 'Name'
+}, {
+  dataField: 'price',
+  text: 'Price'
+}];
 
 describe('Row', () => {
   let wrapper;
 
-  const row = baseRow();
+  const row = {
+    id: 1,
+    name: 'A',
+    price: 1000
+  };
 
   describe('simplest row', () => {
     beforeEach(() => {

packages/react-bootstrap-table2/test/sort-caret.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Const from 'src/const';
-import SortCaret from 'src/sort-caret';
+import Const from '../src/const';
+import SortCaret from '../src/sort-caret';
 
 describe('SortCaret', () => {
   let wrapper;

packages/react-bootstrap-table2/test/sort-symbol.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SortSymbol from 'src/sort-symbol';
+import SortSymbol from '../src/sort-symbol';
 
 describe('SortSymbol', () => {
   let wrapper;

packages/react-bootstrap-table2/test/store/base.test.js

@@ -1,9 +1,6 @@
-import Base from 'src/store/base';
-import Const from 'src/const';
-import _ from 'src/utils';
-import { baseKeyField } from 'test/factory';
-
-const keyField = baseKeyField();
+import Base from '../../src/store/base';
+import Const from '../../src/const';
+import _ from '../../src/utils';
 
 describe('Store Base', () => {
   let store;
@@ -16,7 +13,7 @@ describe('Store Base', () => {
       { id: 4, name: '123tester' },
       { id: 1, name: '!@#' }
     ];
-    store = new Base({ data, keyField });
+    store = new Base({ data, keyField: 'id' });
   });
 
   describe('initialize', () => {

packages/react-bootstrap-table2/test/store/sort.test.js

@@ -1,7 +1,7 @@
 import sinon from 'sinon';
 
-import { sort } from 'src/store/sort';
-import Const from 'src/const';
+import { sort } from '../../src/store/sort';
+import Const from '../../src/const';
 
 describe('Sort Function', () => {
   const data = [

packages/react-bootstrap-table2/test/text-editor.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import TextEditor from 'src/text-editor';
+import TextEditor from '../src/text-editor';
 
 describe('TextEditor', () => {
   let wrapper;

packages/react-bootstrap-table2/test/utils.test.js

@@ -1,4 +1,4 @@
-import _ from 'src/utils';
+import _ from '../src/utils';
 
 describe('Utils', () => {
   describe('get', () => {