mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-12 04:00:16 +00:00
patch test for editor, filter, pagination
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user