mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
extract useless function from pagination ro paginationHandler
This commit is contained in:
AllenFang
parent
297f3e0c4f
commit
620309115f
@ -2,8 +2,9 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import pageResolver from './page-resolver';
|
||||
import PaginationList from './pagination-list';
|
||||
|
||||
export default WrappedComponent =>
|
||||
const paginationListAdapter = WrappedComponent =>
|
||||
class PaginationListAdapter extends pageResolver(Component) {
|
||||
render() {
|
||||
const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
|
||||
@ -18,3 +19,6 @@ export default WrappedComponent =>
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export const PaginationListWithAdapter = paginationListAdapter(PaginationList);
|
||||
export default paginationListAdapter;
|
||||
|
||||
@ -4,89 +4,13 @@ import cs from 'classnames';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import pageResolver from './page-resolver';
|
||||
import SizePerPageDropDown from './size-per-page-dropdown';
|
||||
import PaginationList from './pagination-list';
|
||||
import paginationHandler from './pagination-handler';
|
||||
import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
|
||||
import { PaginationListWithAdapter } from './pagination-list-adapter';
|
||||
import PaginationTotal from './pagination-total';
|
||||
import Const from './const';
|
||||
|
||||
class Pagination extends pageResolver(Component) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.closeDropDown = this.closeDropDown.bind(this);
|
||||
this.toggleDropDown = this.toggleDropDown.bind(this);
|
||||
this.handleChangePage = this.handleChangePage.bind(this);
|
||||
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
|
||||
this.state = this.initialState();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const { dataSize, currSizePerPage } = nextProps;
|
||||
if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
|
||||
const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
|
||||
const lastPage = this.calculateLastPage(totalPages);
|
||||
this.setState({ totalPages, lastPage });
|
||||
}
|
||||
}
|
||||
|
||||
toggleDropDown() {
|
||||
const dropdownOpen = !this.state.dropdownOpen;
|
||||
this.setState(() => {
|
||||
return { dropdownOpen };
|
||||
});
|
||||
}
|
||||
|
||||
closeDropDown() {
|
||||
this.setState(() => {
|
||||
return { dropdownOpen: false };
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeSizePerPage(sizePerPage) {
|
||||
const { currSizePerPage, onSizePerPageChange } = this.props;
|
||||
const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
|
||||
let { currPage } = this.props;
|
||||
if (selectedSize !== currSizePerPage) {
|
||||
const newTotalPages = this.calculateTotalPage(selectedSize);
|
||||
const newLastPage = this.calculateLastPage(newTotalPages);
|
||||
if (currPage > newLastPage) currPage = newLastPage;
|
||||
onSizePerPageChange(selectedSize, currPage);
|
||||
}
|
||||
this.closeDropDown();
|
||||
}
|
||||
|
||||
handleChangePage(newPage) {
|
||||
let page;
|
||||
const {
|
||||
currPage,
|
||||
pageStartIndex,
|
||||
prePageText,
|
||||
nextPageText,
|
||||
lastPageText,
|
||||
firstPageText,
|
||||
onPageChange
|
||||
// keepSizePerPageState
|
||||
} = this.props;
|
||||
const { lastPage } = this.state;
|
||||
|
||||
if (newPage === prePageText) {
|
||||
page = this.backToPrevPage();
|
||||
} else if (newPage === nextPageText) {
|
||||
page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
|
||||
} else if (newPage === lastPageText) {
|
||||
page = lastPage;
|
||||
} else if (newPage === firstPageText) {
|
||||
page = pageStartIndex;
|
||||
} else {
|
||||
page = parseInt(newPage, 10);
|
||||
}
|
||||
|
||||
// if (keepSizePerPageState) { this.closeDropDown(); }
|
||||
|
||||
if (page !== currPage) {
|
||||
onPageChange(page);
|
||||
}
|
||||
}
|
||||
|
||||
defaultTotal = (from, to, size) => (
|
||||
<PaginationTotal
|
||||
from={ from }
|
||||
@ -103,49 +27,26 @@ class Pagination extends pageResolver(Component) {
|
||||
return this.defaultTotal(from, to, size);
|
||||
};
|
||||
|
||||
renderSizePerPageDropDown() {
|
||||
const {
|
||||
sizePerPageList,
|
||||
currSizePerPage,
|
||||
hideSizePerPage,
|
||||
sizePerPageRenderer,
|
||||
sizePerPageOptionRenderer
|
||||
} = this.props;
|
||||
const { dropdownOpen: open } = this.state;
|
||||
|
||||
if (sizePerPageList.length > 1 && !hideSizePerPage) {
|
||||
if (sizePerPageRenderer) {
|
||||
return sizePerPageRenderer({
|
||||
options: this.calculateSizePerPageStatus(),
|
||||
currSizePerPage: `${currSizePerPage}`,
|
||||
onSizePerPageChange: this.handleChangeSizePerPage
|
||||
});
|
||||
}
|
||||
return (
|
||||
<SizePerPageDropDown
|
||||
currSizePerPage={ `${currSizePerPage}` }
|
||||
options={ this.calculateSizePerPageStatus() }
|
||||
optionRenderer={ sizePerPageOptionRenderer }
|
||||
onSizePerPageChange={ this.handleChangeSizePerPage }
|
||||
onClick={ this.toggleDropDown }
|
||||
onBlur={ this.closeDropDown }
|
||||
open={ open }
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { totalPages, lastPage } = this.state;
|
||||
const {
|
||||
showTotal,
|
||||
dataSize,
|
||||
pageListRenderer,
|
||||
pageButtonRenderer,
|
||||
paginationTotalRenderer,
|
||||
hidePageListOnlyOnePage
|
||||
hidePageListOnlyOnePage,
|
||||
totalPages,
|
||||
lastPage,
|
||||
onPageChange,
|
||||
sizePerPageList,
|
||||
currSizePerPage,
|
||||
hideSizePerPage,
|
||||
sizePerPageRenderer,
|
||||
sizePerPageOptionRenderer,
|
||||
onSizePerPageChange,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
|
||||
const [from, to] = this.calculateFromTo();
|
||||
const pageListClass = cs(
|
||||
@ -156,7 +57,14 @@ class Pagination extends pageResolver(Component) {
|
||||
return (
|
||||
<div className="row react-bootstrap-table-pagination">
|
||||
<div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
|
||||
{ this.renderSizePerPageDropDown() }
|
||||
<SizePerPageDropdownAdapter
|
||||
sizePerPageList={ sizePerPageList }
|
||||
currSizePerPage={ currSizePerPage }
|
||||
hideSizePerPage={ hideSizePerPage }
|
||||
sizePerPageRenderer={ sizePerPageRenderer }
|
||||
sizePerPageOptionRenderer={ sizePerPageOptionRenderer }
|
||||
onSizePerPageChange={ onSizePerPageChange }
|
||||
/>
|
||||
{
|
||||
showTotal ?
|
||||
this.setTotal(
|
||||
@ -170,13 +78,15 @@ class Pagination extends pageResolver(Component) {
|
||||
{
|
||||
pageListRenderer ? pageListRenderer({
|
||||
pages,
|
||||
onPageChange: this.handleChangePage
|
||||
onPageChange
|
||||
}) : (
|
||||
<div className={ pageListClass }>
|
||||
<PaginationList
|
||||
pages={ pages }
|
||||
<PaginationListWithAdapter
|
||||
{ ...rest }
|
||||
lastPage={ lastPage }
|
||||
totalPages={ totalPages }
|
||||
pageButtonRenderer={ pageButtonRenderer }
|
||||
onPageChange={ this.handleChangePage }
|
||||
onPageChange={ onPageChange }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@ -239,4 +149,4 @@ Pagination.defaultProps = {
|
||||
hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE
|
||||
};
|
||||
|
||||
export default Pagination;
|
||||
export default paginationHandler(Pagination);
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import pageResolver from './page-resolver';
|
||||
import SizePerPageDropDown from './size-per-page-dropdown';
|
||||
|
||||
export default WrappedComponent =>
|
||||
const sizePerPageDropdownAdapter = WrappedComponent =>
|
||||
class SizePerPageDropdownAdapter extends pageResolver(Component) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -61,3 +62,6 @@ export default WrappedComponent =>
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
|
||||
export default sizePerPageDropdownAdapter;
|
||||
|
||||
@ -124,7 +124,7 @@ describe('PaginationDataContext', () => {
|
||||
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();
|
||||
expect(pagination.prop('paginationTotalRenderer')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -0,0 +1,203 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import paginationHandler from '../src/pagination-handler';
|
||||
|
||||
const MockComponent = () => null;
|
||||
const MockComponentWithPaginationHandler = paginationHandler(MockComponent);
|
||||
|
||||
describe('paginationHandler', () => {
|
||||
let wrapper;
|
||||
let instance;
|
||||
|
||||
const createMockProps = props => ({
|
||||
dataSize: 100,
|
||||
sizePerPageList: [10, 20, 30, 50],
|
||||
currPage: 1,
|
||||
currSizePerPage: 10,
|
||||
pageStartIndex: 1,
|
||||
paginationSize: 5,
|
||||
withFirstAndLast: true,
|
||||
firstPageText: '<<',
|
||||
prePageText: '<',
|
||||
nextPageText: '>',
|
||||
lastPageText: '>>',
|
||||
alwaysShowAllBtns: false,
|
||||
onPageChange: sinon.stub(),
|
||||
onSizePerPageChange: sinon.stub(),
|
||||
hidePageListOnlyOnePage: false,
|
||||
hideSizePerPage: false,
|
||||
...props
|
||||
});
|
||||
|
||||
describe('default pagiantion', () => {
|
||||
const props = createMockProps();
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should having correct state', () => {
|
||||
expect(instance.state).toBeDefined();
|
||||
expect(instance.state.totalPages).toEqual(instance.calculateTotalPage());
|
||||
expect(instance.state.lastPage).toEqual(
|
||||
instance.calculateLastPage(instance.state.totalPages));
|
||||
});
|
||||
|
||||
it('should rendering PaginationList component successfully', () => {
|
||||
const wrapperedComponent = wrapper.find(MockComponent);
|
||||
expect(wrapperedComponent.length).toBe(1);
|
||||
expect(wrapperedComponent.props().lastPage).toEqual(instance.state.lastPage);
|
||||
expect(wrapperedComponent.props().totalPages).toEqual(instance.state.totalPages);
|
||||
expect(wrapperedComponent.props().onPageChange).toEqual(instance.handleChangePage);
|
||||
expect(wrapperedComponent.props().onSizePerPageChange)
|
||||
.toEqual(instance.handleChangeSizePerPage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleChangePage', () => {
|
||||
const props = createMockProps();
|
||||
|
||||
beforeEach(() => {
|
||||
props.currPage = 6;
|
||||
wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
props.onPageChange.reset();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
|
||||
instance.handleChangePage(props.prePageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(5)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
|
||||
instance.handleChangePage(props.nextPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(7)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
|
||||
instance.handleChangePage(props.lastPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(10)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
|
||||
instance.handleChangePage(props.firstPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is a numeric page', () => {
|
||||
const newPage = '8';
|
||||
instance.handleChangePage(newPage);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not calling props.onPageChange correctly when page is not changed', () => {
|
||||
const newPage = props.currPage;
|
||||
instance.handleChangePage(newPage);
|
||||
expect(props.onPageChange.callCount).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleChangeSizePerPage', () => {
|
||||
const props = createMockProps();
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should always setting state.dropdownOpen to false', () => {
|
||||
instance.handleChangeSizePerPage(10);
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('when new sizePerPage is same as current one', () => {
|
||||
it('should not calling props.onSizePerPageChange callback', () => {
|
||||
instance.handleChangeSizePerPage(10);
|
||||
expect(props.onSizePerPageChange.callCount).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when new sizePerPage is diff than current one', () => {
|
||||
it('should not calling props.onSizePerPageChange callback', () => {
|
||||
instance.handleChangeSizePerPage(30);
|
||||
expect(props.onSizePerPageChange.callCount).toBe(1);
|
||||
});
|
||||
|
||||
describe('and new current page is still in the new lagination list', () => {
|
||||
it('should calling props.onSizePerPageChange with correct argument', () => {
|
||||
expect(props.onSizePerPageChange.calledWith(30, props.currPage));
|
||||
});
|
||||
});
|
||||
|
||||
describe('and new current page is still in the new lagination list', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<MockComponentWithPaginationHandler { ...createMockProps({ currPage: 10 }) } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should calling props.onSizePerPageChange with correct argument', () => {
|
||||
expect(props.onSizePerPageChange.calledWith(30, 4));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('componentWillReceiveProps', () => {
|
||||
describe('when next props.currSizePerPage is diff than current one', () => {
|
||||
const nextProps = createMockProps({ currSizePerPage: 20 });
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<MockComponentWithPaginationHandler { ...createMockProps() } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should setting correct state.totalPages', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
expect(instance.state.totalPages).toEqual(
|
||||
instance.calculateTotalPage(nextProps.currSizePerPage));
|
||||
});
|
||||
|
||||
it('should setting correct state.lastPage', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
|
||||
expect(instance.state.lastPage).toEqual(
|
||||
instance.calculateLastPage(totalPages));
|
||||
});
|
||||
});
|
||||
|
||||
describe('when next props.dataSize is diff than current one', () => {
|
||||
const nextProps = createMockProps({ dataSize: 33 });
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<MockComponentWithPaginationHandler { ...createMockProps() } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should setting correct state.totalPages', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
expect(instance.state.totalPages).toEqual(
|
||||
instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
|
||||
});
|
||||
|
||||
it('should setting correct state.lastPage', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
const totalPages = instance.calculateTotalPage(
|
||||
nextProps.currSizePerPage, nextProps.dataSize);
|
||||
expect(instance.state.lastPage).toEqual(
|
||||
instance.calculateLastPage(totalPages));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -5,6 +5,7 @@ import { shallow } from 'enzyme';
|
||||
import SizePerPageDropDown from '../src/size-per-page-dropdown';
|
||||
import PaginationList from '../src/pagination-list';
|
||||
import Pagination from '../src/pagination';
|
||||
import PaginationTotal from '../src/pagination-total';
|
||||
|
||||
describe('Pagination', () => {
|
||||
let wrapper;
|
||||
@ -40,7 +41,7 @@ describe('Pagination', () => {
|
||||
|
||||
it('should rendering correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.hasClass('react-bootstrap-table-pagination')).toBeTruthy();
|
||||
expect(wrapper.dive().hasClass('react-bootstrap-table-pagination')).toBeTruthy();
|
||||
expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(0);
|
||||
});
|
||||
|
||||
@ -51,50 +52,6 @@ describe('Pagination', () => {
|
||||
instance.calculateLastPage(instance.state.totalPages));
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should rendering PaginationList component successfully', () => {
|
||||
const paginationList = wrapper.find(PaginationList);
|
||||
const pageList = instance.calculatePages(instance.state.totalPages, instance.state.lastPage);
|
||||
expect(paginationList.length).toBe(1);
|
||||
expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(pageList, instance.state.lastPage));
|
||||
expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage);
|
||||
});
|
||||
|
||||
it('should rendering SizePerPageDropDown component successfully', () => {
|
||||
const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
|
||||
expect(sizePerPageDropDown.length).toBe(1);
|
||||
|
||||
expect(sizePerPageDropDown.prop('currSizePerPage')).toEqual(`${props.currSizePerPage}`);
|
||||
expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus());
|
||||
expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
|
||||
expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.sizePerPageList is empty array', () => {
|
||||
beforeEach(() => {
|
||||
const props = createMockProps({ sizePerPageList: [] });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should not rendering SizePerPageDropDown component', () => {
|
||||
const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
|
||||
expect(sizePerPageDropDown.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.hideSizePerPage is true', () => {
|
||||
beforeEach(() => {
|
||||
const props = createMockProps({ hideSizePerPage: true });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should not rendering SizePerPageDropDown component', () => {
|
||||
const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
|
||||
expect(sizePerPageDropDown.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.hidePageListOnlyOnePage is true', () => {
|
||||
@ -105,21 +62,22 @@ describe('Pagination', () => {
|
||||
});
|
||||
|
||||
it('should find react-bootstrap-table-pagination-list-hidden class when only one page', () => {
|
||||
expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
|
||||
expect(wrapper.dive().find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.pageListRenderer is defined', () => {
|
||||
const pageListRenderer = jest.fn().mockReturnValue(null);
|
||||
let pageListRenderer;
|
||||
beforeEach(() => {
|
||||
pageListRenderer.mockClear();
|
||||
pageListRenderer = jest.fn().mockReturnValue(null);
|
||||
const props = createMockProps({ pageListRenderer });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
wrapper.render();
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should not render PaginationList', () => {
|
||||
expect(wrapper.find(PaginationList)).toHaveLength(0);
|
||||
expect(wrapper.dive().find(PaginationList)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should call props.pageListRenderer correctly', () => {
|
||||
@ -128,16 +86,17 @@ describe('Pagination', () => {
|
||||
});
|
||||
|
||||
describe('when props.sizePerPageRenderer is defined', () => {
|
||||
const sizePerPageRenderer = jest.fn().mockReturnValue(null);
|
||||
let sizePerPageRenderer;
|
||||
beforeEach(() => {
|
||||
sizePerPageRenderer.mockClear();
|
||||
sizePerPageRenderer = jest.fn().mockReturnValue(null);
|
||||
const props = createMockProps({ sizePerPageRenderer });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
wrapper.render();
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should not render SizePerPageDropDown', () => {
|
||||
expect(wrapper.find(SizePerPageDropDown)).toHaveLength(0);
|
||||
expect(wrapper.dive().find(SizePerPageDropDown)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should call props.sizePerPageRenderer correctly', () => {
|
||||
@ -145,180 +104,36 @@ describe('Pagination', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('componentWillReceiveProps', () => {
|
||||
describe('when next props.currSizePerPage is diff than current one', () => {
|
||||
const nextProps = createMockProps({ currSizePerPage: 20 });
|
||||
describe('when props.showTotal is true', () => {
|
||||
beforeEach(() => {
|
||||
const props = createMockProps({ showTotal: true });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
wrapper.render();
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should render PaginationTotal correctly', () => {
|
||||
expect(wrapper.dive().find(PaginationTotal)).toHaveLength(1);
|
||||
});
|
||||
|
||||
describe('if props.paginationTotalRenderer is defined', () => {
|
||||
let paginationTotalRenderer;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<Pagination { ...createMockProps() } />);
|
||||
paginationTotalRenderer = jest.fn();
|
||||
const props = createMockProps({ showTotal: true, paginationTotalRenderer });
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
wrapper.render();
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should setting correct state.totalPages', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
expect(instance.state.totalPages).toEqual(
|
||||
instance.calculateTotalPage(nextProps.currSizePerPage));
|
||||
it('should not render PaginationTotal', () => {
|
||||
expect(wrapper.dive().find(PaginationTotal)).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should setting correct state.lastPage', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
|
||||
expect(instance.state.lastPage).toEqual(
|
||||
instance.calculateLastPage(totalPages));
|
||||
it('should call props.paginationTotalRenderer correctly', () => {
|
||||
expect(paginationTotalRenderer).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when next props.dataSize is diff than current one', () => {
|
||||
const nextProps = createMockProps({ dataSize: 33 });
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<Pagination { ...createMockProps() } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should setting correct state.totalPages', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
expect(instance.state.totalPages).toEqual(
|
||||
instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
|
||||
});
|
||||
|
||||
it('should setting correct state.lastPage', () => {
|
||||
instance.componentWillReceiveProps(nextProps);
|
||||
const totalPages = instance.calculateTotalPage(
|
||||
nextProps.currSizePerPage, nextProps.dataSize);
|
||||
expect(instance.state.lastPage).toEqual(
|
||||
instance.calculateLastPage(totalPages));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleDropDown', () => {
|
||||
beforeEach(() => {
|
||||
const props = createMockProps();
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should setting state.dropdownOpen as true when it is false', () => {
|
||||
instance.toggleDropDown();
|
||||
expect(instance.state.dropdownOpen).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should setting state.dropdownOpen as false when it is true', () => {
|
||||
instance.toggleDropDown();
|
||||
instance.toggleDropDown();
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('closeDropDown', () => {
|
||||
beforeEach(() => {
|
||||
const props = createMockProps();
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should always setting state.dropdownOpen as false', () => {
|
||||
instance.closeDropDown();
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
instance.closeDropDown();
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleChangeSizePerPage', () => {
|
||||
const props = createMockProps();
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should always setting state.dropdownOpen to false', () => {
|
||||
instance.handleChangeSizePerPage(10);
|
||||
expect(instance.state.dropdownOpen).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('when new sizePerPage is same as current one', () => {
|
||||
it('should not calling props.onSizePerPageChange callback', () => {
|
||||
instance.handleChangeSizePerPage(10);
|
||||
expect(props.onSizePerPageChange.callCount).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when new sizePerPage is diff than current one', () => {
|
||||
it('should not calling props.onSizePerPageChange callback', () => {
|
||||
instance.handleChangeSizePerPage(30);
|
||||
expect(props.onSizePerPageChange.callCount).toBe(1);
|
||||
});
|
||||
|
||||
describe('and new current page is still in the new lagination list', () => {
|
||||
it('should calling props.onSizePerPageChange with correct argument', () => {
|
||||
expect(props.onSizePerPageChange.calledWith(30, props.currPage));
|
||||
});
|
||||
});
|
||||
|
||||
describe('and new current page is still in the new lagination list', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<Pagination { ...createMockProps({ currPage: 10 }) } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
it('should calling props.onSizePerPageChange with correct argument', () => {
|
||||
expect(props.onSizePerPageChange.calledWith(30, 4));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleChangePage', () => {
|
||||
const props = createMockProps();
|
||||
|
||||
beforeEach(() => {
|
||||
props.currPage = 6;
|
||||
wrapper = shallow(<Pagination { ...props } />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
props.onPageChange.reset();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
|
||||
instance.handleChangePage(props.prePageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(5)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
|
||||
instance.handleChangePage(props.nextPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(7)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
|
||||
instance.handleChangePage(props.lastPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(10)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
|
||||
instance.handleChangePage(props.firstPageText);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calling props.onPageChange correctly when new page is a numeric page', () => {
|
||||
const newPage = '8';
|
||||
instance.handleChangePage(newPage);
|
||||
expect(props.onPageChange.callCount).toBe(1);
|
||||
expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not calling props.onPageChange correctly when page is not changed', () => {
|
||||
const newPage = props.currPage;
|
||||
instance.handleChangePage(newPage);
|
||||
expect(props.onPageChange.callCount).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user