Skip to content

Commit 3115538

Browse files
tangjinzhoutangjinzhou
committed
test: add table test
1 parent 72506e1 commit 3115538

File tree

6 files changed

+646
-0
lines changed

6 files changed

+646
-0
lines changed

‎components/table/__tests__/Table.pagination.test.js‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
2+
import { mount } from '@vue/test-utils'
3+
import Table from '..'
4+
import Vue from 'vue'
5+
6+
describe('Table.pagination', () => {
7+
const columns = [{
8+
title: 'Name',
9+
dataIndex: 'name',
10+
}]
11+
12+
const data = [
13+
{ key: 0, name: 'Jack' },
14+
{ key: 1, name: 'Lucy' },
15+
{ key: 2, name: 'Tom' },
16+
{ key: 3, name: 'Jerry' },
17+
]
18+
19+
const pagination = { class: 'my-page', pageSize: 2 }
20+
21+
function getTableOptions (props = {}, listeners = {}) {
22+
return {
23+
propsData: {
24+
columns,
25+
dataSource: data,
26+
pagination,
27+
...props,
28+
},
29+
listeners: {
30+
...listeners,
31+
},
32+
sync: false,
33+
}
34+
// return {
35+
// render () {
36+
// return (
37+
// <Table
38+
// {...tableProps}
39+
// />
40+
// )
41+
// },
42+
// }
43+
}
44+
45+
function renderedNames (wrapper) {
46+
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
47+
return row.props().record.name
48+
})
49+
}
50+
51+
it('renders pagination correctly', (done) => {
52+
const wrapper = mount(Table, getTableOptions())
53+
Vue.nextTick(() => {
54+
expect(wrapper.html()).toMatchSnapshot()
55+
done()
56+
})
57+
})
58+
59+
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', (done) => {
60+
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true }}))
61+
Vue.nextTick(() => {
62+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
63+
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false }})
64+
Vue.nextTick(() => {
65+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
66+
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }})
67+
Vue.nextTick(() => {
68+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
69+
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }})
70+
Vue.nextTick(() => {
71+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
72+
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }})
73+
Vue.nextTick(() => {
74+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
75+
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }})
76+
Vue.nextTick(() => {
77+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
78+
done()
79+
})
80+
})
81+
})
82+
})
83+
})
84+
})
85+
})
86+
87+
it('paginate data', (done) => {
88+
const wrapper = mount(Table, getTableOptions())
89+
Vue.nextTick(() => {
90+
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy'])
91+
const pager = wrapper.findAll({ name: 'Pager' })
92+
pager.at(pager.length - 1).trigger('click')
93+
Vue.nextTick(() => {
94+
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
95+
done()
96+
})
97+
})
98+
})
99+
100+
it('repaginates when pageSize change', () => {
101+
const wrapper = mount(Table, getTableOptions())
102+
wrapper.setProps({ pagination: { pageSize: 1 }})
103+
Vue.nextTick(() => {
104+
expect(renderedNames(wrapper)).toEqual(['Jack'])
105+
})
106+
})
107+
108+
it('fires change event', (done) => {
109+
const handleChange = jest.fn()
110+
const handlePaginationChange = jest.fn()
111+
const noop = () => {}
112+
const wrapper = mount(Table, getTableOptions({
113+
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
114+
115+
}, { change: handleChange }))
116+
Vue.nextTick(() => {
117+
const pager = wrapper.findAll({ name: 'Pager' })
118+
pager.at(pager.length - 1).trigger('click')
119+
120+
expect(handleChange).toBeCalledWith(
121+
{
122+
class: 'my-page',
123+
current: 2,
124+
pageSize: 2,
125+
},
126+
{},
127+
{}
128+
)
129+
130+
expect(handlePaginationChange).toBeCalledWith(2, 2)
131+
done()
132+
})
133+
})
134+
135+
// https://github.com/ant-design/ant-design/issues/4532
136+
// https://codepen.io/afc163/pen/dVeNoP?editors=001
137+
it('should have pager when change pagination from false to undefined', (done) => {
138+
const wrapper = mount(Table, getTableOptions({ pagination: false }))
139+
Vue.nextTick(() => {
140+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
141+
wrapper.setProps({ pagination: undefined })
142+
Vue.nextTick(() => {
143+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
144+
expect(wrapper.findAll('.ant-pagination-item-active')).toHaveLength(1)
145+
done()
146+
})
147+
})
148+
})
149+
150+
// https://github.com/ant-design/ant-design/issues/4532
151+
// https://codepen.io/afc163/pen/pWVRJV?editors=001
152+
it('should display pagination as prop pagination change between true and false', (done) => {
153+
const wrapper = mount(Table, getTableOptions())
154+
Vue.nextTick(() => {
155+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
156+
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
157+
wrapper.setProps({ pagination: false })
158+
Vue.nextTick(() => {
159+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
160+
wrapper.setProps({ pagination })
161+
// wrapper.update()
162+
Vue.nextTick(() => {
163+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
164+
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
165+
wrapper.find('.ant-pagination-item-2').trigger('click')
166+
Vue.nextTick(() => {
167+
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
168+
wrapper.setProps({ pagination: false })
169+
Vue.nextTick(() => {
170+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
171+
wrapper.setProps({ pagination: true })
172+
Vue.nextTick(() => {
173+
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
174+
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10
175+
expect(renderedNames(wrapper)).toHaveLength(4)
176+
done()
177+
})
178+
})
179+
})
180+
})
181+
})
182+
})
183+
})
184+
185+
// https://github.com/ant-design/ant-design/issues/5259
186+
it('change to correct page when data source changes', (done) => {
187+
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 1 }}))
188+
Vue.nextTick(() => {
189+
wrapper.find('.ant-pagination-item-3').trigger('click')
190+
wrapper.setProps({ dataSource: [data[0]] })
191+
Vue.nextTick(() => {
192+
expect(wrapper.find('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
193+
done()
194+
})
195+
})
196+
})
197+
198+
it('specify the position of pagination', (done) => {
199+
const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' }}))
200+
Vue.nextTick(() => {
201+
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
202+
expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
203+
wrapper.setProps({ pagination: { position: 'bottom' }})
204+
Vue.nextTick(() => {
205+
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
206+
expect(wrapper.findAll('.ant-spin-container > *').at(1).findAll('.ant-pagination')).toHaveLength(1)
207+
wrapper.setProps({ pagination: { position: 'both' }})
208+
Vue.nextTick(() => {
209+
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3)
210+
expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
211+
expect(wrapper.findAll('.ant-spin-container > *').at(2).findAll('.ant-pagination')).toHaveLength(1)
212+
done()
213+
})
214+
})
215+
})
216+
})
217+
})

‎components/table/__tests__/Table.test.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { shallowMount as shallow, mount } from '@vue/test-utils'
2+
import Table from '..'
3+
import Vue from 'vue'
4+
5+
const { Column, ColumnGroup } = Table
6+
7+
describe('Table', () => {
8+
it('renders JSX correctly', (done) => {
9+
const data = [{
10+
key: '1',
11+
firstName: 'John',
12+
lastName: 'Brown',
13+
age: 32,
14+
}, {
15+
key: '2',
16+
firstName: 'Jim',
17+
lastName: 'Green',
18+
age: 42,
19+
}]
20+
21+
const wrapper = mount({
22+
render () {
23+
return (
24+
<Table dataSource={data} pagination={false}>
25+
<ColumnGroup title='Name'>
26+
<Column
27+
title='First Name'
28+
dataIndex='firstName'
29+
key='firstName'
30+
/>
31+
<Column
32+
title='Last Name'
33+
dataIndex='lastName'
34+
key='lastName'
35+
/>
36+
</ColumnGroup>
37+
<Column
38+
title='Age'
39+
dataIndex='age'
40+
key='age'
41+
/>
42+
</Table>
43+
)
44+
},
45+
}, { sync: false }
46+
)
47+
48+
Vue.nextTick(() => {
49+
expect(wrapper.html()).toMatchSnapshot()
50+
done()
51+
})
52+
})
53+
54+
it('updates columns when receiving props', (done) => {
55+
const columns = [{
56+
title: 'Name',
57+
key: 'name',
58+
dataIndex: 'name',
59+
}]
60+
const wrapper = shallow(Table, {
61+
propsData: {
62+
columns,
63+
},
64+
sync: false,
65+
})
66+
const newColumns = [{
67+
title: 'Title',
68+
key: 'title',
69+
dataIndex: 'title',
70+
}]
71+
wrapper.setProps({ columns: newColumns })
72+
Vue.nextTick(() => {
73+
expect(wrapper.vm.columns).toBe(newColumns)
74+
done()
75+
})
76+
})
77+
78+
it('loading with Spin', (done) => {
79+
const loading = {
80+
spinning: false,
81+
delay: 500,
82+
}
83+
const wrapper = mount(Table, {
84+
propsData: {
85+
loading,
86+
},
87+
sync: false,
88+
})
89+
Vue.nextTick(async () => {
90+
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
91+
expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('')
92+
93+
loading.spinning = true
94+
wrapper.setProps({ loading })
95+
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
96+
97+
await new Promise(resolve => setTimeout(resolve, 1000))
98+
expect(wrapper.findAll('.ant-spin')).toHaveLength(1)
99+
done()
100+
})
101+
})
102+
})

‎components/table/__tests__/__snapshots__/Table.pagination.test.js.snap‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Table.pagination renders pagination correctly 1`] = `
4+
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-large"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col></colgroup><thead class="ant-table-thead"><tr><th key="name" class=""><span>Name</span></th>
5+
</tr>
6+
</thead>
7+
<tbody class="ant-table-tbody">
8+
<tr class="ant-table-row ant-table-row-level-0">
9+
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
10+
<!---->Jack</td>
11+
</tr>
12+
<tr class="ant-table-row ant-table-row-level-0">
13+
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
14+
<!---->Lucy</td>
15+
</tr>
16+
</tbody>
17+
</table>
18+
</div>
19+
</div>
20+
</div>
21+
<ul unselectable="unselectable" class="ant-pagination my-page ant-table-pagination">
22+
<li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
23+
<a class="ant-pagination-item-link"></a>
24+
</li>
25+
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
26+
<a>1</a>
27+
</li>
28+
<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2">
29+
<a>2</a>
30+
</li>
31+
<li title="Next Page" tabindex="0" class=" ant-pagination-next">
32+
<a class="ant-pagination-item-link"></a>
33+
</li>
34+
<!---->
35+
</ul>
36+
</div>
37+
</span>
38+
</div>
39+
`;

‎components/table/__tests__/__snapshots__/Table.test.js.snap‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Table renders JSX correctly 1`] = `
4+
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-large"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><span>Name</span></th>
5+
<th
6+
key="age" rowspan="2" class=""><span>Age</span></th>
7+
</tr>
8+
<tr>
9+
<th key="firstName" class=""><span>First Name</span></th>
10+
<th key="lastName" class=""><span>Last Name</span></th>
11+
</tr>
12+
</thead>
13+
<tbody class="ant-table-tbody">
14+
<tr class="ant-table-row ant-table-row-level-0">
15+
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
16+
<!---->John</td>
17+
<td>Brown</td>
18+
<td>32</td>
19+
</tr>
20+
<tr class="ant-table-row ant-table-row-level-0">
21+
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
22+
<!---->Jim</td>
23+
<td>Green</td>
24+
<td>42</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</span>
33+
</div>
34+
`;

0 commit comments

Comments
 (0)