patch test for editor, filter, pagination

This commit is contained in:
AllenFang
2018-08-01 20:26:00 +08:00
parent 167352f199
commit c13b3fa197
7 changed files with 995 additions and 1210 deletions
@@ -1,330 +0,0 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
import Store from 'react-bootstrap-table-next/src/store';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import cellEditFactory from '..';
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);
});
});
});
});
@@ -0,0 +1,197 @@
import 'jsdom-global/register';
import React from 'react';
import { shallow } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import {
FILTER_TYPE
} from '../src/const';
import createFilterContext from '../src/context';
import { textFilter } from '../index';
describe('FilterContext', () => {
let wrapper;
// let filter;
let FilterContext;
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
const columns = [{
dataField: 'id',
text: 'ID',
filter: textFilter()
}, {
dataField: 'name',
text: 'Name',
filter: textFilter()
}];
// const defaultFilter = {};
const mockBase = jest.fn((props => (
<BootstrapTable
keyField="id"
data={ data }
columns={ columns }
{ ...props }
/>
)));
const handleFilterChange = jest.fn();
function shallowContext(
// customFilter = defaultFilter,
enableRemote = false
) {
mockBase.mockReset();
handleFilterChange.mockReset();
FilterContext = createFilterContext(
_,
jest.fn().mockReturnValue(enableRemote),
handleFilterChange
);
return (
<FilterContext.Provider
columns={ columns }
data={ data }
>
<FilterContext.Consumer>
{
filterProps => mockBase(filterProps)
}
</FilterContext.Consumer>
</FilterContext.Provider>
);
}
describe('default render', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
wrapper.render();
});
it('should have correct Provider property after calling createFilterContext', () => {
expect(FilterContext.Provider).toBeDefined();
});
it('should have correct Consumer property after calling createFilterContext', () => {
expect(FilterContext.Consumer).toBeDefined();
});
it('should have correct currFilters', () => {
expect(wrapper.instance().currFilters).toEqual({});
});
it('should pass correct cell editing props to children element', () => {
expect(wrapper.length).toBe(1);
expect(mockBase).toHaveBeenCalledWith({
data,
onFilter: wrapper.instance().onFilter
});
});
});
describe('when remote filter is enable', () => {
beforeEach(() => {
wrapper = shallow(shallowContext(true));
wrapper.render();
wrapper.instance().currFilters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
});
it('should pass original data without internal filtering', () => {
expect(wrapper.length).toBe(1);
expect(mockBase).toHaveBeenCalledWith({
data,
onFilter: wrapper.instance().onFilter
});
});
});
describe('onFilter', () => {
let instance;
describe('when filterVal is empty or undefined', () => {
const filterVals = ['', undefined, []];
beforeEach(() => {
wrapper = shallow(shallowContext());
wrapper.render();
instance = wrapper.instance();
});
it('should correct currFilters', () => {
filterVals.forEach((filterVal) => {
instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(Object.keys(instance.currFilters)).toHaveLength(0);
});
});
});
describe('when filterVal is existing', () => {
const filterVal = '3';
beforeEach(() => {
wrapper = shallow(shallowContext());
wrapper.render();
instance = wrapper.instance();
});
it('should correct currFilters', () => {
instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(Object.keys(instance.currFilters)).toHaveLength(1);
});
});
describe('when remote filter is enabled', () => {
const filterVal = '3';
beforeEach(() => {
wrapper = shallow(shallowContext(true));
wrapper.render();
instance = wrapper.instance();
instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
});
it('should correct currFilters', () => {
expect(Object.keys(instance.currFilters)).toHaveLength(1);
});
it('should calling handleFilterChange correctly', () => {
expect(handleFilterChange).toHaveBeenCalledTimes(1);
expect(handleFilterChange).toHaveBeenCalledWith(instance.currFilters);
});
});
describe('combination', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
wrapper.render();
instance = wrapper.instance();
});
it('should set correct currFilters', () => {
instance.onFilter(columns[0], FILTER_TYPE.TEXT)('3');
expect(Object.keys(instance.currFilters)).toHaveLength(1);
instance.onFilter(columns[0], FILTER_TYPE.TEXT)('2');
expect(Object.keys(instance.currFilters)).toHaveLength(1);
instance.onFilter(columns[1], FILTER_TYPE.TEXT)('2');
expect(Object.keys(instance.currFilters)).toHaveLength(2);
instance.onFilter(columns[1], FILTER_TYPE.TEXT)('');
expect(Object.keys(instance.currFilters)).toHaveLength(1);
instance.onFilter(columns[0], FILTER_TYPE.TEXT)('');
expect(Object.keys(instance.currFilters)).toHaveLength(0);
});
});
});
});
@@ -1,5 +1,4 @@
import _ from 'react-bootstrap-table-next/src/utils';
import Store from 'react-bootstrap-table-next/src/store';
import { filters } from '../src/filter';
import { FILTER_TYPE } from '../src/const';
@@ -16,14 +15,10 @@ for (let i = 0; i < 20; i += 1) {
}
describe('filter', () => {
let store;
let filterFn;
let currFilters;
let columns;
beforeEach(() => {
store = new Store('id');
store.data = data;
currFilters = {};
columns = [{
dataField: 'id',
@@ -41,10 +36,6 @@ describe('filter', () => {
});
describe('filterByText', () => {
beforeEach(() => {
filterFn = filters(store, columns, _);
});
describe('when filter value is not a String', () => {
it('should transform to string and do the filter', () => {
currFilters.name = {
@@ -52,7 +43,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.TEXT
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(2);
});
@@ -65,7 +56,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.TEXT
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(2);
});
@@ -79,7 +70,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.TEXT
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(0);
});
@@ -93,7 +84,7 @@ describe('filter', () => {
comparator: EQ
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(1);
});
@@ -102,7 +93,6 @@ describe('filter', () => {
describe('column.filterValue is defined', () => {
beforeEach(() => {
columns[1].filterValue = jest.fn();
filterFn = filters(store, columns, _);
});
it('should calling custom filterValue callback correctly', () => {
@@ -111,7 +101,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.TEXT
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(columns[1].filterValue).toHaveBeenCalledTimes(data.length);
// const calls = columns[1].filterValue.mock.calls;
@@ -124,10 +114,6 @@ describe('filter', () => {
});
describe('filterByArray', () => {
beforeEach(() => {
filterFn = filters(store, columns, _);
});
describe('when filter value is empty array', () => {
it('should return original data', () => {
currFilters.name = {
@@ -135,9 +121,9 @@ describe('filter', () => {
filterType: FILTER_TYPE.MULTISELECT
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(store.data.length);
expect(result).toHaveLength(data.length);
});
});
@@ -150,7 +136,7 @@ describe('filter', () => {
comparator: EQ
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(2);
});
@@ -164,7 +150,7 @@ describe('filter', () => {
comparator: LIKE
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toBeDefined();
expect(result).toHaveLength(3);
});
@@ -173,10 +159,6 @@ describe('filter', () => {
});
describe('filterByNumber', () => {
beforeEach(() => {
filterFn = filters(store, columns, _);
});
describe('when currFilters.filterVal.comparator is empty', () => {
it('should returning correct result', () => {
currFilters.price = {
@@ -184,11 +166,11 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
let result = filterFn(currFilters);
let result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(data.length);
currFilters.price.filterVal.comparator = undefined;
result = filterFn(currFilters);
result = filters(result, columns, _)(currFilters);
expect(result).toHaveLength(data.length);
});
});
@@ -200,7 +182,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(data.length);
});
});
@@ -212,11 +194,11 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
let result = filterFn(currFilters);
let result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(1);
currFilters.price.filterVal.number = '0';
result = filterFn(currFilters);
result = filters(result, columns, _)(currFilters);
expect(result).toHaveLength(0);
});
});
@@ -228,7 +210,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(16);
});
});
@@ -240,7 +222,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(17);
});
});
@@ -252,7 +234,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(3);
});
});
@@ -264,7 +246,7 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(4);
});
});
@@ -276,15 +258,16 @@ describe('filter', () => {
filterType: FILTER_TYPE.NUMBER
};
const result = filterFn(currFilters);
const result = filters(data, columns, _)(currFilters);
expect(result).toHaveLength(19);
});
});
});
describe('filterByDate', () => {
let filterFn;
beforeEach(() => {
filterFn = filters(store, columns, _);
filterFn = filters(data, columns, _);
});
describe('when currFilters.filterVal.comparator is empty', () => {
@@ -1,252 +0,0 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import Store from 'react-bootstrap-table-next/src/store';
import filter, { textFilter } from '..';
import wrapperFactory from '../src/wrapper';
import { FILTER_TYPE } from '../src/const';
const data = [];
for (let i = 0; i < 20; i += 1) {
data.push({
id: i,
name: `itme name ${i}`,
price: 200 + i
});
}
describe('Wrapper', () => {
let wrapper;
let instance;
const onTableChangeCB = sinon.stub();
afterEach(() => {
onTableChangeCB.reset();
});
const createTableProps = (props) => {
const tableProps = {
keyField: 'id',
columns: [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name',
filter: textFilter()
}, {
dataField: 'price',
text: 'Price',
filter: textFilter()
}],
data,
filter: filter(),
_,
store: new Store('id'),
onTableChange: onTableChangeCB,
...props
};
tableProps.store.data = data;
return tableProps;
};
const FilterWrapper = wrapperFactory(BootstrapTable, {
_,
remoteResolver
});
const createFilterWrapper = (props, renderFragment = true) => {
wrapper = shallow(<FilterWrapper { ...props } />);
instance = wrapper.instance();
if (renderFragment) {
const fragment = instance.render();
wrapper = shallow(<div>{ fragment }</div>);
}
};
describe('default filter wrapper', () => {
const props = createTableProps();
beforeEach(() => {
createFilterWrapper(props);
});
it('should rendering correctly', () => {
expect(wrapper.length).toBe(1);
});
it('should initializing state correctly', () => {
expect(instance.state.isDataChanged).toBeFalsy();
expect(instance.state.currFilters).toEqual({});
});
it('should rendering BootstraTable correctly', () => {
const table = wrapper.find(BootstrapTable);
expect(table.length).toBe(1);
expect(table.prop('onFilter')).toBeDefined();
expect(table.prop('isDataChanged')).toEqual(instance.state.isDataChanged);
});
});
describe('componentWillReceiveProps', () => {
let nextProps;
describe('when props.store.filters is same as current state.currFilters', () => {
beforeEach(() => {
nextProps = createTableProps();
instance.componentWillReceiveProps(nextProps);
});
it('should setting isDataChanged as false (Temporary solution)', () => {
expect(instance.state.isDataChanged).toBeFalsy();
});
});
describe('when props.isDataChanged is true', () => {
beforeEach(() => {
nextProps = createTableProps({ isDataChanged: true });
instance.componentWillReceiveProps(nextProps);
});
it('should setting isDataChanged as true', () => {
expect(instance.state.isDataChanged).toBeTruthy();
});
});
describe('when props.store.filters is different from current state.currFilters', () => {
const nextData = [];
beforeEach(() => {
nextProps = createTableProps();
nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
nextProps.store.setAllData(nextData);
instance.componentWillReceiveProps(nextProps);
});
it('should setting states correctly', () => {
expect(nextProps.store.filteredData).toEqual(nextData);
expect(instance.state.isDataChanged).toBeTruthy();
expect(instance.state.currFilters).toBe(nextProps.store.filters);
});
});
describe('when remote filter is enabled', () => {
let props;
const nextData = [];
beforeEach(() => {
props = createTableProps({ remote: { filter: true } });
createFilterWrapper(props);
nextProps = createTableProps({ remote: { filter: true } });
nextProps.store.setAllData(nextData);
instance.componentWillReceiveProps(nextProps);
});
it('should setting states correctly', () => {
expect(nextProps.store.filteredData).toEqual(nextData);
expect(instance.state.isDataChanged).toBeTruthy();
expect(instance.state.currFilters).toBe(nextProps.store.filters);
});
});
});
describe('onFilter', () => {
let props;
beforeEach(() => {
props = createTableProps();
createFilterWrapper(props);
});
describe('when filterVal is empty or undefined', () => {
const filterVals = ['', undefined, []];
it('should setting store object correctly', () => {
filterVals.forEach((filterVal) => {
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(props.store.filtering).toBeFalsy();
});
});
it('should setting state correctly', () => {
filterVals.forEach((filterVal) => {
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
});
});
});
describe('when filterVal is existing', () => {
const filterVal = '3';
it('should setting store object correctly', () => {
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(props.store.filters).toEqual(instance.state.currFilters);
});
it('should setting state correctly', () => {
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
});
});
describe('when remote filter is enabled', () => {
const filterVal = '3';
beforeEach(() => {
props = createTableProps();
props.remote = { filter: true };
createFilterWrapper(props);
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
});
it('should not setting store object correctly', () => {
expect(props.store.filters).not.toEqual(instance.state.currFilters);
});
it('should not setting state', () => {
expect(instance.state.isDataChanged).toBeFalsy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
});
it('should calling props.onRemoteFilterChange correctly', () => {
expect(onTableChangeCB.calledOnce).toBeTruthy();
});
});
describe('combination', () => {
it('should setting store object correctly', () => {
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('3');
expect(props.store.filters).toEqual(instance.state.currFilters);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('2');
expect(props.store.filters).toEqual(instance.state.currFilters);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('2');
expect(props.store.filters).toEqual(instance.state.currFilters);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('');
expect(props.store.filters).toEqual(instance.state.currFilters);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('');
expect(props.store.filters).toEqual(instance.state.currFilters);
expect(instance.state.isDataChanged).toBeTruthy();
expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
});
});
});
});
@@ -0,0 +1,769 @@
import 'jsdom-global/register';
import React from 'react';
import { shallow } from 'enzyme';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import Pagination from '../src/pagination';
import Const from '../src/const';
import createPaginationContext from '../src/context';
import paginationFactory from '../index';
const data = [];
for (let i = 0; i < 100; i += 1) {
data.push({
id: i,
name: `itme name ${i}`
});
}
describe('PaginationContext', () => {
let wrapper;
let PaginationContext;
const columns = [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name'
}];
const defaultPagination = { options: {} };
const mockBase = jest.fn((props => (
<BootstrapTable
keyField="id"
data={ data }
columns={ columns }
{ ...props }
/>
)));
const handleRemotePaginationChange = jest.fn();
function shallowContext(
customPagination = defaultPagination,
enableRemote = false
) {
mockBase.mockReset();
handleRemotePaginationChange.mockReset();
PaginationContext = createPaginationContext(
jest.fn().mockReturnValue(enableRemote),
handleRemotePaginationChange
);
return (
<PaginationContext.Provider
pagination={ paginationFactory(customPagination) }
columns={ columns }
data={ data }
>
<PaginationContext.Consumer>
{
paginationProps => mockBase(paginationProps)
}
</PaginationContext.Consumer>
</PaginationContext.Provider>
);
}
describe('default render', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
wrapper.render();
});
it('should have correct Provider property after calling createPaginationContext', () => {
expect(PaginationContext.Provider).toBeDefined();
});
it('should have correct Consumer property after calling createPaginationContext', () => {
expect(PaginationContext.Consumer).toBeDefined();
});
it('should have correct currPage', () => {
expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
});
it('should have correct currSizePerPage', () => {
expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
});
it('should render Pagination component correctly', () => {
expect(wrapper.length).toBe(1);
const instance = wrapper.instance();
const pagination = wrapper.find(Pagination);
expect(pagination).toHaveLength(1);
expect(pagination.prop('dataSize')).toEqual(data.length);
expect(pagination.prop('currPage')).toEqual(instance.currPage);
expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
expect(pagination.prop('paginationTotalRenderer')).toBeNull();
});
it('should pass correct cell editing props to children element', () => {
expect(mockBase.mock.calls[0][0].data).toHaveLength(Const.SIZE_PER_PAGE_LIST[0]);
});
});
describe('componentWillReceiveProps', () => {
let instance;
let nextProps;
describe('when nextProps.pagination.options.page is existing', () => {
const onPageChange = jest.fn();
afterEach(() => {
onPageChange.mockReset();
});
describe('and if it is different with currPage', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
wrapper.render();
nextProps = {
pagination: {
options: {
page: 2,
onPageChange
}
}
};
instance.componentWillReceiveProps(nextProps);
});
it('should call options.onPageChange', () => {
expect(onPageChange).toHaveBeenCalledTimes(1);
expect(onPageChange).toHaveBeenCalledWith(
instance.currPage,
instance.currSizePerPage
);
});
it('should set correct currPage', () => {
expect(instance.currPage).toEqual(nextProps.pagination.options.page);
});
});
describe('and if it is same as currPage', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
wrapper.render();
nextProps = {
pagination: {
options: {
page: 1,
onPageChange
}
}
};
instance.componentWillReceiveProps(nextProps);
});
it('shouldn\'t call options.onPageChange', () => {
expect(onPageChange).not.toHaveBeenCalled();
});
it('should have correct currPage', () => {
expect(instance.currPage).toEqual(nextProps.pagination.options.page);
});
});
});
describe('when nextProps.pagination.options.page is not existing', () => {
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
page: 3
}));
instance = wrapper.instance();
wrapper.render();
nextProps = { pagination: defaultPagination };
instance.componentWillReceiveProps(nextProps);
});
it('should not set currPage', () => {
expect(instance.currPage).toEqual(3);
});
});
describe('when nextProps.pagination.options.sizePerPage is existing', () => {
const onPageChange = jest.fn();
afterEach(() => {
onPageChange.mockReset();
});
describe('and if it is different with currSizePerPage', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
wrapper.render();
nextProps = {
pagination: {
options: {
sizePerPage: Const.SIZE_PER_PAGE_LIST[2],
onPageChange
}
}
};
instance.componentWillReceiveProps(nextProps);
});
it('should call options.onPageChange', () => {
expect(onPageChange).toHaveBeenCalledTimes(1);
expect(onPageChange).toHaveBeenCalledWith(
instance.currPage,
instance.currSizePerPage
);
});
it('should set correct currSizePerPage', () => {
expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
});
});
describe('and if it is same as currSizePerPage', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
wrapper.render();
nextProps = {
pagination: {
options: {
sizePerPage: Const.SIZE_PER_PAGE_LIST[0],
onPageChange
}
}
};
instance.componentWillReceiveProps(nextProps);
});
it('shouldn\'t call options.onPageChange', () => {
expect(onPageChange).not.toHaveBeenCalled();
});
it('should have correct currSizePerPage', () => {
expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
});
});
});
describe('when nextProps.pagination.options.sizePerPage is not existing', () => {
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
sizePerPage: Const.SIZE_PER_PAGE_LIST[2]
}));
instance = wrapper.instance();
wrapper.render();
nextProps = { pagination: defaultPagination };
instance.componentWillReceiveProps(nextProps);
});
it('should not set currPage', () => {
expect(instance.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[2]);
});
});
});
describe('handleChangePage', () => {
let instance;
const newPage = 3;
describe('should update component correctly', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangePage(newPage);
});
it('', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
});
});
describe('if options.onPageChange is defined', () => {
const onPageChange = jest.fn();
beforeEach(() => {
onPageChange.mockClear();
wrapper = shallow(shallowContext({
...defaultPagination,
onPageChange
}));
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangePage(newPage);
});
it('should still update component correctly', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
});
it('should call options.onPageChange correctly', () => {
expect(onPageChange).toHaveBeenCalledTimes(1);
expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
});
});
describe('if remote pagination is enable', () => {
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination
}, true));
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangePage(newPage);
});
it('should still update component correctly', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
});
it('should call handleRemotePageChange correctly', () => {
expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
expect(handleRemotePaginationChange)
.toHaveBeenCalledWith(newPage, instance.currSizePerPage);
});
});
});
describe('handleChangeSizePerPage', () => {
let instance;
const newPage = 2;
const newSizePerPage = 15;
describe('should update component correctly', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangeSizePerPage(newSizePerPage, newPage);
});
it('', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.currSizePerPage).toEqual(newSizePerPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
});
});
describe('if options.onSizePerPageChange is defined', () => {
const onSizePerPageChange = jest.fn();
beforeEach(() => {
onSizePerPageChange.mockClear();
wrapper = shallow(shallowContext({
...defaultPagination,
onSizePerPageChange
}));
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangeSizePerPage(newSizePerPage, newPage);
});
it('should still update component correctly', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.currSizePerPage).toEqual(newSizePerPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
});
it('should call options.onSizePerPageChange correctly', () => {
expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
});
});
describe('if remote pagination is enable', () => {
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination
}, true));
instance = wrapper.instance();
jest.spyOn(instance, 'forceUpdate');
instance.handleChangeSizePerPage(newSizePerPage, newPage);
});
it('should still update component correctly', () => {
expect(instance.currPage).toEqual(newPage);
expect(instance.currSizePerPage).toEqual(newSizePerPage);
expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
});
it('should call handleRemotePageChange correctly', () => {
expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
expect(handleRemotePaginationChange)
.toHaveBeenCalledWith(newPage, newSizePerPage);
});
});
});
describe('when options.page is defined', () => {
const page = 3;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
page
}));
wrapper.render();
});
it('should set correct currPage', () => {
expect(wrapper.instance().currPage).toEqual(page);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('currPage')).toEqual(page);
});
});
describe('when options.sizePerPage is defined', () => {
const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
sizePerPage
}));
wrapper.render();
});
it('should set correct currSizePerPage', () => {
expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
});
});
describe('when options.totalSize is defined', () => {
const totalSize = 100;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
totalSize
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('dataSize')).toEqual(totalSize);
});
});
describe('when options.showTotal is defined', () => {
const showTotal = true;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
showTotal
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('showTotal')).toEqual(showTotal);
});
});
describe('when options.pageStartIndex is defined', () => {
const pageStartIndex = -1;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
pageStartIndex
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
});
});
describe('when options.sizePerPageList is defined', () => {
const sizePerPageList = [10, 40];
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
sizePerPageList
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
});
});
describe('when options.paginationSize is defined', () => {
const paginationSize = 10;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
paginationSize
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('paginationSize')).toEqual(paginationSize);
});
});
describe('when options.withFirstAndLast is defined', () => {
const withFirstAndLast = false;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
withFirstAndLast
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
});
});
describe('when options.alwaysShowAllBtns is defined', () => {
const alwaysShowAllBtns = true;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
alwaysShowAllBtns
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
});
});
describe('when options.firstPageText is defined', () => {
const firstPageText = '1st';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
firstPageText
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('firstPageText')).toEqual(firstPageText);
});
});
describe('when options.prePageText is defined', () => {
const prePageText = 'PRE';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
prePageText
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('prePageText')).toEqual(prePageText);
});
});
describe('when options.nextPageText is defined', () => {
const nextPageText = 'NEXT';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
nextPageText
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('nextPageText')).toEqual(nextPageText);
});
});
describe('when options.lastPageText is defined', () => {
const lastPageText = 'LAST';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
lastPageText
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('lastPageText')).toEqual(lastPageText);
});
});
describe('when options.firstPageTitle is defined', () => {
const firstPageTitle = '1st';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
firstPageTitle
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
});
});
describe('when options.prePageTitle is defined', () => {
const prePageTitle = 'PRE';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
prePageTitle
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
});
});
describe('when options.nextPageTitle is defined', () => {
const nextPageTitle = 'NEXT';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
nextPageTitle
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
});
});
describe('when options.lastPageTitle is defined', () => {
const lastPageTitle = 'nth';
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
lastPageTitle
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
});
});
describe('when options.hideSizePerPage is defined', () => {
const hideSizePerPage = true;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
hideSizePerPage
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
});
});
describe('when options.hidePageListOnlyOnePage is defined', () => {
const hidePageListOnlyOnePage = true;
beforeEach(() => {
wrapper = shallow(shallowContext({
...defaultPagination,
hidePageListOnlyOnePage
}));
wrapper.render();
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
});
});
});
@@ -1,9 +1,8 @@
import Store from 'react-bootstrap-table-next/src/store';
import { getByCurrPage, alignPage } from '../src/page';
describe('Page Functions', () => {
let data;
let store;
const params = [
// [page, sizePerPage, pageStartIndex]
[1, 10, 1],
@@ -23,27 +22,21 @@ describe('Page Functions', () => {
for (let i = 0; i < 100; i += 1) {
data.push({ id: i, name: `test_name${i}` });
}
store = new Store('id');
store.data = data;
});
it('should always return correct data', () => {
params.forEach(([page, sizePerPage, pageStartIndex]) => {
store.page = page;
store.sizePerPage = sizePerPage;
const rows = getByCurrPage(store, pageStartIndex);
const rows = getByCurrPage(data, page, sizePerPage, pageStartIndex);
expect(rows).toBeDefined();
expect(Array.isArray(rows)).toBeTruthy();
expect(rows.every(row => !!row)).toBeTruthy();
});
});
it('should return empty array when store.data is empty', () => {
store.data = [];
it('should return empty array when data is empty', () => {
data = [];
params.forEach(([page, sizePerPage, pageStartIndex]) => {
store.page = page;
store.sizePerPage = sizePerPage;
const rows = getByCurrPage(store, pageStartIndex);
const rows = getByCurrPage(data, page, sizePerPage, pageStartIndex);
expect(rows).toHaveLength(0);
});
});
@@ -52,19 +45,17 @@ describe('Page Functions', () => {
describe('alignPage', () => {
const pageStartIndex = 1;
const sizePerPage = 10;
const page = 2;
describe('if the length of store.data is less than the end page index', () => {
beforeEach(() => {
data = [];
for (let i = 0; i < 15; i += 1) {
data.push({ id: i, name: `test_name${i}` });
}
store = new Store('id');
store.data = data;
store.page = 2;
});
it('should return pageStartIndex argument', () => {
expect(alignPage(store, pageStartIndex, sizePerPage)).toEqual(pageStartIndex);
expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
});
});
@@ -74,13 +65,10 @@ describe('Page Functions', () => {
for (let i = 0; i < 30; i += 1) {
data.push({ id: i, name: `test_name${i}` });
}
store = new Store('id');
store.data = data;
store.page = 2;
});
it('should return current page', () => {
expect(alignPage(store, pageStartIndex, sizePerPage)).toEqual(store.page);
expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(page);
});
});
});
@@ -1,570 +0,0 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
import Store from 'react-bootstrap-table-next/src/store';
import paginator from '..';
import wrapperFactory from '../src/wrapper';
import Pagination from '../src/pagination';
import Const from '../src/const';
const data = [];
for (let i = 0; i < 100; i += 1) {
data.push({
id: i,
name: `item name ${i}`
});
}
describe('Wrapper', () => {
let wrapper;
let instance;
const onTableChangeCB = sinon.stub();
afterEach(() => {
onTableChangeCB.reset();
});
const createTableProps = (props = {}) => {
const tableProps = {
keyField: 'id',
columns: [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name'
}],
data,
pagination: paginator(props.options),
store: new Store('id'),
onTableChange: onTableChangeCB
};
tableProps.store.data = data;
return tableProps;
};
const PaginationWrapper = wrapperFactory(BootstrapTable, {
remoteResolver
});
const createPaginationWrapper = (props, renderFragment = true) => {
wrapper = shallow(<PaginationWrapper { ...props } />);
instance = wrapper.instance();
if (renderFragment) {
const fragment = instance.render();
wrapper = shallow(<div>{ fragment }</div>);
}
};
describe('default pagination', () => {
const props = createTableProps();
beforeEach(() => {
createPaginationWrapper(props);
});
it('should render correctly', () => {
expect(wrapper.length).toBe(1);
});
it('should initialize state correctly', () => {
expect(instance.state.currPage).toBeDefined();
expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX);
expect(instance.state.currSizePerPage).toBeDefined();
expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
});
it('should save page and sizePerPage to the store correctly', () => {
expect(props.store.page).toBe(instance.state.currPage);
expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
});
it('should render BootstrapTable correctly', () => {
const table = wrapper.find(BootstrapTable);
expect(table.length).toBe(1);
expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
});
it('should render Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(pagination.length).toBe(1);
expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
expect(pagination.prop('currPage')).toEqual(instance.state.currPage);
expect(pagination.prop('currSizePerPage')).toEqual(instance.state.currSizePerPage);
expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
expect(pagination.prop('showTotal')).toBeFalsy();
});
describe('componentWillReceiveProps', () => {
let nextProps;
beforeEach(() => {
nextProps = createTableProps();
});
describe('when options.page is existing', () => {
beforeEach(() => {
nextProps.pagination.options.page = 2;
instance.componentWillReceiveProps(nextProps);
});
it('should setting currPage state correctly', () => {
expect(instance.state.currPage).toEqual(nextProps.pagination.options.page);
});
it('should saving store.page correctly', () => {
expect(props.store.page).toEqual(instance.state.currPage);
});
});
it('should not setting currPage state if options.page not existing', () => {
const { currPage } = instance.state;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currPage).toBe(currPage);
});
describe('when options.sizePerPage is existing', () => {
beforeEach(() => {
nextProps.pagination.options.sizePerPage = 20;
instance.componentWillReceiveProps(nextProps);
});
it('should setting currSizePerPage state correctly', () => {
expect(instance.state.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
});
it('should saving store.sizePerPage correctly', () => {
expect(props.store.sizePerPage).toEqual(instance.state.currSizePerPage);
});
});
it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
const { currSizePerPage } = instance.state;
instance.componentWillReceiveProps(nextProps);
expect(instance.state.currSizePerPage).toBe(currSizePerPage);
});
describe('when nextProps.isDataChanged is true', () => {
beforeEach(() => {
nextProps.isDataChanged = true;
instance.componentWillReceiveProps(nextProps);
});
it('should setting currPage state correctly', () => {
expect(instance.state.currPage).toBe(Const.PAGE_START_INDEX);
});
it('should saving store.page correctly', () => {
expect(props.store.page).toEqual(instance.state.currPage);
});
});
});
});
describe('when options.page is defined', () => {
const page = 3;
const props = createTableProps({ options: { page } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should setting correct state.currPage', () => {
expect(instance.state.currPage).toEqual(page);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('currPage')).toEqual(page);
});
});
describe('when options.sizePerPage is defined', () => {
const sizePerPage = 30;
const props = createTableProps({ options: { sizePerPage } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should setting correct state.currPage', () => {
expect(instance.state.currSizePerPage).toEqual(sizePerPage);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
});
});
describe('when options.totalSize is defined', () => {
const totalSize = 100;
const props = createTableProps({ options: { totalSize } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('dataSize')).toEqual(totalSize);
});
});
describe('when options.showTotal is defined', () => {
const props = createTableProps({ options: { showTotal: true } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should render Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('showTotal')).toBeTruthy();
});
});
describe('when options.pageStartIndex is defined', () => {
const pageStartIndex = -1;
const props = createTableProps({ options: { pageStartIndex } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should setting correct state.currPage', () => {
expect(instance.state.currPage).toEqual(pageStartIndex);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
});
});
describe('when options.sizePerPageList is defined', () => {
const sizePerPageList = [10, 40];
const props = createTableProps({ options: { sizePerPageList } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
});
});
describe('when options.paginationSize is defined', () => {
const paginationSize = 10;
const props = createTableProps({ options: { paginationSize } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('paginationSize')).toEqual(paginationSize);
});
});
describe('when options.withFirstAndLast is defined', () => {
const withFirstAndLast = false;
const props = createTableProps({ options: { withFirstAndLast } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
});
});
describe('when options.alwaysShowAllBtns is defined', () => {
const alwaysShowAllBtns = true;
const props = createTableProps({ options: { alwaysShowAllBtns } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
});
});
describe('when options.firstPageText is defined', () => {
const firstPageText = '1st';
const props = createTableProps({ options: { firstPageText } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('firstPageText')).toEqual(firstPageText);
});
});
describe('when options.prePageText is defined', () => {
const prePageText = 'PRE';
const props = createTableProps({ options: { prePageText } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('prePageText')).toEqual(prePageText);
});
});
describe('when options.nextPageText is defined', () => {
const nextPageText = 'NEXT';
const props = createTableProps({ options: { nextPageText } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('nextPageText')).toEqual(nextPageText);
});
});
describe('when options.lastPageText is defined', () => {
const lastPageText = 'nth';
const props = createTableProps({ options: { lastPageText } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('lastPageText')).toEqual(lastPageText);
});
});
describe('when options.firstPageTitle is defined', () => {
const firstPageTitle = '1st';
const props = createTableProps({ options: { firstPageTitle } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
});
});
describe('when options.prePageTitle is defined', () => {
const prePageTitle = 'PRE';
const props = createTableProps({ options: { prePageTitle } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
});
});
describe('when options.nextPageTitle is defined', () => {
const nextPageTitle = 'NEXT';
const props = createTableProps({ options: { nextPageTitle } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
});
});
describe('when options.lastPageTitle is defined', () => {
const lastPageTitle = 'nth';
const props = createTableProps({ options: { lastPageTitle } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
});
});
describe('when options.hideSizePerPage is defined', () => {
const hideSizePerPage = true;
const props = createTableProps({ options: { hideSizePerPage } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
});
});
describe('when options.hidePageListOnlyOnePage is defined', () => {
const hidePageListOnlyOnePage = true;
const props = createTableProps({ options: { hidePageListOnlyOnePage } });
beforeEach(() => {
createPaginationWrapper(props);
});
it('should rendering Pagination correctly', () => {
const pagination = wrapper.find(Pagination);
expect(wrapper.length).toBe(1);
expect(pagination.length).toBe(1);
expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
});
});
describe('handleChangePage', () => {
const newPage = 3;
const props = createTableProps({ options: { onPageChange: sinon.stub() } });
beforeEach(() => {
createPaginationWrapper(props, false);
instance.handleChangePage(newPage);
});
afterEach(() => {
props.pagination.options.onPageChange.reset();
});
it('should setting state.currPage correctly', () => {
expect(instance.state.currPage).toEqual(newPage);
});
it('should calling options.onPageChange correctly when it is defined', () => {
const { onPageChange } = props.pagination.options;
expect(onPageChange.calledOnce).toBeTruthy();
expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy();
});
it('should saving page and sizePerPage to store correctly', () => {
expect(props.store.page).toBe(newPage);
expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
});
describe('when pagination remote is enable', () => {
beforeEach(() => {
props.remote = true;
createPaginationWrapper(props, false);
onTableChangeCB.reset();
instance.handleChangePage(newPage);
});
it('should not setting state.currPage', () => {
expect(instance.state.currPage).not.toEqual(newPage);
});
it('should calling props.onRemotePageChange correctly', () => {
expect(onTableChangeCB.calledOnce).toBeTruthy();
});
});
});
describe('handleChangeSizePerPage', () => {
const newPage = 2;
const newSizePerPage = 30;
const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } });
beforeEach(() => {
createPaginationWrapper(props, false);
instance.handleChangeSizePerPage(newSizePerPage, newPage);
});
afterEach(() => {
props.pagination.options.onSizePerPageChange.reset();
});
it('should setting state.currPage and state.currSizePerPage correctly', () => {
expect(instance.state.currPage).toEqual(newPage);
expect(instance.state.currSizePerPage).toEqual(newSizePerPage);
});
it('should calling options.onSizePerPageChange correctly when it is defined', () => {
const { onSizePerPageChange } = props.pagination.options;
expect(onSizePerPageChange.calledOnce).toBeTruthy();
expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy();
});
it('should saving page and sizePerPage to store correctly', () => {
expect(props.store.page).toBe(newPage);
expect(props.store.sizePerPage).toBe(newSizePerPage);
});
describe('when pagination remote is enable', () => {
beforeEach(() => {
props.remote = true;
createPaginationWrapper(props, false);
onTableChangeCB.reset();
instance.handleChangeSizePerPage(newSizePerPage, newPage);
});
it('should not setting state.currPage', () => {
expect(instance.state.currPage).not.toEqual(newPage);
expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage);
});
it('should calling props.onRemotePageChange correctly', () => {
expect(onTableChangeCB.calledOnce).toBeTruthy();
});
});
});
});