Skip to content

Commit 3259edc

Browse files
author
cjmafei
committed
pagination
1 parent f62f82e commit 3259edc

2 files changed

Lines changed: 192 additions & 192 deletions

File tree

‎src/components/pagination/__test__/index.test.js‎

Lines changed: 191 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,206 @@
1-
/* eslint-disable */
1+
/* eslint-disable react/state-in-constructor */
22
import React, { Component } from 'react';
33
import { render, mount } from 'enzyme';
44
import mountTest from '@tests/shared/mountTest';
55

66
import Pagination from '../index';
77

88
describe('Pagination', () => {
9-
class Test extends Component {
9+
class Test extends Component {
1010
state = { current: 1, pageSize: 10 };
1111

1212
onChange = (current, pageSize) => {
13-
this.setState({ current, pageSize });
13+
this.setState({ current, pageSize });
1414
};
1515

1616
render() {
17-
return <Pagination total={50} current={this.state.current} pageSize={this.state.pageSize} onChange={this.onChange} {...this.props} />;
17+
return <Pagination total={50} current={this.state.current} pageSize={this.state.pageSize} onChange={this.onChange} {...this.props} />;
1818
}
19-
}
20-
21-
mountTest(Pagination);
22-
23-
it('renders correctly', () => {
24-
const wrapper = render(<Pagination />);
25-
expect(wrapper).toMatchSnapshot();
26-
});
27-
28-
it('should jump next page or preview page', () => {
29-
const wrapper = mount(<Test />);
30-
expect(wrapper.find('li:first-child.nomore')).toHaveLength(1);
31-
32-
wrapper.find('li:first-child').simulate('click');
33-
expect(wrapper.state().current).toBe(1);
34-
35-
wrapper.setState({ current: 5 });
36-
expect(wrapper.find('li:last-child.nomore')).toHaveLength(1);
37-
38-
wrapper.find('li:last-child').simulate('click');
39-
expect(wrapper.state().current).toBe(5);
40-
41-
wrapper.find('li:first-child').simulate('click');
42-
expect(wrapper.state().current).toBe(4);
43-
44-
wrapper.find('li:last-child').simulate('click');
45-
expect(wrapper.state().current).toBe(5);
46-
47-
wrapper
48-
.find('li')
49-
.at(2)
50-
.simulate('click');
51-
expect(wrapper.state().current).toBe(2);
52-
53-
wrapper.unmount();
54-
});
55-
56-
it('support pageSizeOptions', () => {
57-
const wrapper = mount(<Test showPageSizeOptions pageSizeOptions={[10, 20, 30, 50, 100]} />);
58-
wrapper.setState({ pageSize: 20 });
59-
const { length } = wrapper.find('li');
60-
expect(
61-
wrapper
62-
.find('li')
63-
.at(length - 2)
64-
.getDOMNode().textContent
65-
).toBe('3');
66-
wrapper.unmount();
67-
68-
const wrapper1 = mount(<Test showPageSizeOptions pageSizeOptions={[20, 30, 50, 100]} />);
69-
expect(wrapper1.props().pageSizeOptions.indexOf(10) === 0).toBeTruthy();
70-
wrapper1.unmount();
71-
});
72-
73-
it('should not show ellipse when pageLength is less than 10', () => {
74-
const wrapper = mount(<Test total={90} current={5} />);
75-
expect(wrapper.find('li.ellips')).toHaveLength(0);
76-
wrapper.unmount();
77-
});
78-
79-
it('should show right ellipse when pageLength is more than 9 and current is less than 5', () => {
80-
const wrapper = mount(<Test total={500} current={4} />);
81-
const lis = wrapper.find('li');
82-
expect(
83-
lis
84-
.at(lis.length - 3)
85-
.getDOMNode()
86-
.classList.contains('ellips')
87-
).toBeTruthy();
88-
89-
wrapper.unmount();
90-
});
91-
92-
it('should show left ellipse when pageLength is more than 9 and current is less than (pageLength - 3)', () => {
93-
const wrapper = mount(<Test total={500} current={48} />);
94-
expect(
95-
wrapper
96-
.find('li')
97-
.at(2)
98-
.getDOMNode()
99-
.classList.contains('ellips')
100-
).toBeTruthy();
101-
102-
wrapper.unmount();
103-
});
104-
105-
it('should show left ellipse and right ellipse when current is more than 4 and current is less than (pageLength - 3)', () => {
106-
const wrapper = mount(<Test total={500} current={5} />);
107-
expect(wrapper.find('li.ellips')).toHaveLength(2);
108-
wrapper.unmount();
109-
});
110-
111-
it('should support click when ellipse is shown', () => {
112-
[1, 4, 5, 48, 50].forEach(current => {
113-
const wrapper = mount(<Test total={500} current={current} />);
114-
115-
const lis = wrapper.find('li');
116-
lis.at(1).simulate('click');
117-
expect(wrapper.state().current).toBe(1);
118-
119-
lis.at(lis.length - 2).simulate('click');
120-
expect(wrapper.state().current).toBe(50);
121-
122-
// show left ellipse
123-
if (current === 48) {
124-
lis.at(lis.length - 5).simulate('click');
125-
expect(wrapper.state().current).toBe(47);
126-
}
127-
128-
// show left ellipse and right ellipse
129-
if (current === 5) {
130-
lis.at(4).simulate('click');
131-
expect(wrapper.state().current).toBe(4);
132-
133-
lis.at(6).simulate('click');
134-
expect(wrapper.state().current).toBe(6);
135-
}
136-
137-
wrapper.unmount();
138-
});
139-
});
140-
141-
it('pageNum should change when input valid value', () => {
142-
const wrapper = mount(<Test showQuickJumper />);
143-
const inputWrapper = wrapper.find('.quickJumper input');
144-
inputWrapper.getDOMNode().value = '2';
145-
146-
inputWrapper.simulate('keypress', { nativeEvent: { keyCode: 13 } });
147-
expect(inputWrapper.getDOMNode().value).toBe('2');
148-
149-
inputWrapper.getDOMNode().value = '3';
150-
inputWrapper.simulate('keypress', { nativeEvent: { keyCode: 14 } });
151-
expect(inputWrapper.getDOMNode().value).toBe('2');
152-
153-
wrapper.unmount();
154-
});
155-
156-
it('pageNum should not change when input invalid value', () => {
157-
['0', '6', 'abc'].forEach(inputPage => {
158-
const wrapper = mount(<Test showQuickJumper />);
159-
const inputWrapper = wrapper.find('.quickJumper input');
160-
inputWrapper.getDOMNode().value = inputPage;
161-
inputWrapper.simulate('keypress', { nativeEvent: { keyCode: 13 } });
162-
expect(inputWrapper.getDOMNode().value).toBe('1');
163-
wrapper.unmount();
164-
});
165-
});
166-
167-
it('should trigger input onChange when set pageNum', () => {
168-
const wrapper = mount(<Test showQuickJumper />);
169-
const inputWrapper = wrapper.find('.quickJumper input');
170-
inputWrapper.simulate('change', { target: { value: '2' } });
171-
expect(inputWrapper.getDOMNode().value).toBe('2');
172-
wrapper.unmount();
173-
});
174-
175-
it('should trigger onChange when change pageSize', () => {
176-
const wrapper = mount(<Test current={2} showPageSizeOptions />);
177-
wrapper.setProps({ pageSize: 30 });
178-
wrapper.find('.change-size select').simulate('change');
179-
expect(wrapper.state().current).toBe(1);
180-
wrapper.unmount();
181-
});
182-
183-
it('support nextMore', () => {
184-
const wrapper = mount(<Test total={500} />);
185-
wrapper.find('.ellips .cloud-icon-double-right').simulate('click');
186-
expect(wrapper.state().current).toBe(6);
187-
188-
wrapper.setState({ current: 46 });
189-
wrapper.find('.ellips .cloud-icon-double-right').simulate('click');
190-
expect(wrapper.state().current).toBe(48);
191-
192-
wrapper.unmount();
193-
});
194-
195-
it('support preMore', () => {
196-
const wrapper = mount(<Test total={500} current={50} />);
197-
wrapper.find('.ellips .cloud-icon-double-left').simulate('click');
198-
expect(wrapper.state().current).toBe(45);
199-
wrapper.unmount();
200-
201-
const wrapper1 = mount(<Test total={500} current={5} />);
202-
wrapper1.find('.ellips .cloud-icon-double-left').simulate('click');
203-
expect(wrapper1.state().current).toBe(3);
204-
wrapper1.unmount();
205-
});
19+
}
20+
21+
mountTest(Pagination);
22+
23+
it('renders correctly', () => {
24+
const wrapper = render(<Pagination />);
25+
expect(wrapper).toMatchSnapshot();
26+
});
27+
28+
it('should jump next page or preview page', () => {
29+
const wrapper = mount(<Test />);
30+
expect(wrapper.find('li:first-child.nomore')).toHaveLength(1);
31+
32+
wrapper.find('li:first-child').simulate('click');
33+
expect(wrapper.state().current).toBe(1);
34+
35+
wrapper.setState({ current: 5 });
36+
expect(wrapper.find('li:last-child.nomore')).toHaveLength(1);
37+
38+
wrapper.find('li:last-child').simulate('click');
39+
expect(wrapper.state().current).toBe(5);
40+
41+
wrapper.find('li:first-child').simulate('click');
42+
expect(wrapper.state().current).toBe(4);
43+
44+
wrapper.find('li:last-child').simulate('click');
45+
expect(wrapper.state().current).toBe(5);
46+
47+
wrapper
48+
.find('li')
49+
.at(2)
50+
.simulate('click');
51+
expect(wrapper.state().current).toBe(2);
52+
53+
wrapper.unmount();
54+
});
55+
56+
it('support pageSizeOptions', () => {
57+
const wrapper = mount(<Test showPageSizeOptions pageSizeOptions={[ 10, 20, 30, 50, 100 ]} />);
58+
wrapper.setState({ pageSize: 20 });
59+
const { length } = wrapper.find('li');
60+
expect(
61+
wrapper
62+
.find('li')
63+
.at(length - 2)
64+
.getDOMNode().textContent,
65+
).toBe('3');
66+
wrapper.unmount();
67+
68+
const wrapper1 = mount(<Test showPageSizeOptions pageSizeOptions={[ 20, 30, 50, 100 ]} />);
69+
expect(wrapper1.props().pageSizeOptions.indexOf(10) === 0).toBeTruthy();
70+
wrapper1.unmount();
71+
});
72+
73+
it('should not show ellipse when pageLength is less than 10', () => {
74+
const wrapper = mount(<Test total={90} current={5} />);
75+
expect(wrapper.find('li.ellips')).toHaveLength(0);
76+
wrapper.unmount();
77+
});
78+
79+
it('should show right ellipse when pageLength is more than 9 and current is less than 5', () => {
80+
const wrapper = mount(<Test total={500} current={4} />);
81+
const lis = wrapper.find('li');
82+
expect(
83+
lis
84+
.at(lis.length - 3)
85+
.getDOMNode()
86+
.classList.contains('ellips'),
87+
).toBeTruthy();
88+
89+
wrapper.unmount();
90+
});
91+
92+
it('should show left ellipse when pageLength is more than 9 and current is less than (pageLength - 3)', () => {
93+
const wrapper = mount(<Test total={500} current={48} />);
94+
expect(
95+
wrapper
96+
.find('li')
97+
.at(2)
98+
.getDOMNode()
99+
.classList.contains('ellips'),
100+
).toBeTruthy();
101+
102+
wrapper.unmount();
103+
});
104+
105+
it('should show left ellipse and right ellipse when current is more than 4 and current is less than (pageLength - 3)', () => {
106+
const wrapper = mount(<Test total={500} current={5} />);
107+
expect(wrapper.find('li.ellips')).toHaveLength(2);
108+
wrapper.unmount();
109+
});
110+
111+
it('should support click when ellipse is shown', () => {
112+
[ 1, 4, 5, 48, 50 ].forEach((current) => {
113+
const wrapper = mount(<Test total={500} current={current} />);
114+
115+
const lis = wrapper.find('li');
116+
lis.at(1).simulate('click');
117+
expect(wrapper.state().current).toBe(1);
118+
119+
lis.at(lis.length - 2).simulate('click');
120+
expect(wrapper.state().current).toBe(50);
121+
122+
// show left ellipse
123+
if (current === 48) {
124+
lis.at(lis.length - 5).simulate('click');
125+
expect(wrapper.state().current).toBe(47);
126+
}
127+
128+
// show left ellipse and right ellipse
129+
if (current === 5) {
130+
lis.at(4).simulate('click');
131+
expect(wrapper.state().current).toBe(4);
132+
133+
lis.at(6).simulate('click');
134+
expect(wrapper.state().current).toBe(6);
135+
}
136+
137+
wrapper.unmount();
138+
});
139+
});
140+
141+
it('pageNum should change when input valid value', () => {
142+
const wrapper = mount(<Test showQuickJumper />);
143+
const inputWrapper = wrapper.find('.quickJumper input');
144+
inputWrapper.getDOMNode().value = '2';
145+
146+
inputWrapper.simulate('keydown', { nativeEvent: { keyCode: 13 } });
147+
expect(inputWrapper.getDOMNode().value).toBe('2');
148+
149+
inputWrapper.getDOMNode().value = '3';
150+
inputWrapper.simulate('keydown', { nativeEvent: { keyCode: 13 } });
151+
expect(inputWrapper.getDOMNode().value).toBe('3');
152+
153+
wrapper.unmount();
154+
});
155+
156+
it('pageNum should not change when input invalid value', () => {
157+
[ '0', '6', 'abc' ].forEach((inputPage) => {
158+
const wrapper = mount(<Test showQuickJumper />);
159+
const inputWrapper = wrapper.find('.quickJumper input');
160+
inputWrapper.getDOMNode().value = inputPage;
161+
inputWrapper.simulate('keydown', { nativeEvent: { keyCode: 13 } });
162+
expect(inputWrapper.getDOMNode().value).toBe('1');
163+
wrapper.unmount();
164+
});
165+
});
166+
167+
it('should trigger input onChange when set pageNum', () => {
168+
const wrapper = mount(<Test showQuickJumper />);
169+
const inputWrapper = wrapper.find('.quickJumper input');
170+
inputWrapper.simulate('change', { target: { value: '2' } });
171+
expect(inputWrapper.getDOMNode().value).toBe('2');
172+
wrapper.unmount();
173+
});
174+
175+
it('should trigger onChange when change pageSize', () => {
176+
const wrapper = mount(<Test current={2} showPageSizeOptions />);
177+
wrapper.setProps({ pageSize: 30 });
178+
wrapper.find('.change-size .cloud-select').simulate('change');
179+
expect(wrapper.state().current).toBe(1);
180+
wrapper.unmount();
181+
});
182+
183+
it('support nextMore', () => {
184+
const wrapper = mount(<Test total={500} />);
185+
wrapper.find('.ellips .cloud-icon.icon-double-right').simulate('click');
186+
expect(wrapper.state().current).toBe(6);
187+
188+
wrapper.setState({ current: 46 });
189+
wrapper.find('.ellips .cloud-icon.icon-double-right').simulate('click');
190+
expect(wrapper.state().current).toBe(48);
191+
192+
wrapper.unmount();
193+
});
194+
195+
it('support preMore', () => {
196+
const wrapper = mount(<Test total={500} current={50} />);
197+
wrapper.find('.ellips .cloud-icon.icon-double-left').simulate('click');
198+
expect(wrapper.state().current).toBe(45);
199+
wrapper.unmount();
200+
201+
const wrapper1 = mount(<Test total={500} current={5} />);
202+
wrapper1.find('.ellips .cloud-icon.icon-double-left').simulate('click');
203+
expect(wrapper1.state().current).toBe(3);
204+
wrapper1.unmount();
205+
});
206206
});

0 commit comments

Comments
 (0)