mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 12:37:42 +08:00
test: add table test
This commit is contained in:
tjz
parent
24f3005562
commit
07150c0965
217
components/table/__tests__/Table.pagination.test.js
Normal file
217
components/table/__tests__/Table.pagination.test.js
Normal file
@ -0,0 +1,217 @@
|
||||
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Table from '..'
|
||||
import Vue from 'vue'
|
||||
|
||||
describe('Table.pagination', () => {
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}]
|
||||
|
||||
const data = [
|
||||
{ key: 0, name: 'Jack' },
|
||||
{ key: 1, name: 'Lucy' },
|
||||
{ key: 2, name: 'Tom' },
|
||||
{ key: 3, name: 'Jerry' },
|
||||
]
|
||||
|
||||
const pagination = { class: 'my-page', pageSize: 2 }
|
||||
|
||||
function getTableOptions (props = {}, listeners = {}) {
|
||||
return {
|
||||
propsData: {
|
||||
columns,
|
||||
dataSource: data,
|
||||
pagination,
|
||||
...props,
|
||||
},
|
||||
listeners: {
|
||||
...listeners,
|
||||
},
|
||||
sync: false,
|
||||
}
|
||||
// return {
|
||||
// render () {
|
||||
// return (
|
||||
// <Table
|
||||
// {...tableProps}
|
||||
// />
|
||||
// )
|
||||
// },
|
||||
// }
|
||||
}
|
||||
|
||||
function renderedNames (wrapper) {
|
||||
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
|
||||
return row.props().record.name
|
||||
})
|
||||
}
|
||||
|
||||
it('renders pagination correctly', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions())
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true }}))
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
|
||||
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
|
||||
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('paginate data', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions())
|
||||
Vue.nextTick(() => {
|
||||
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy'])
|
||||
const pager = wrapper.findAll({ name: 'Pager' })
|
||||
pager.at(pager.length - 1).trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('repaginates when pageSize change', () => {
|
||||
const wrapper = mount(Table, getTableOptions())
|
||||
wrapper.setProps({ pagination: { pageSize: 1 }})
|
||||
Vue.nextTick(() => {
|
||||
expect(renderedNames(wrapper)).toEqual(['Jack'])
|
||||
})
|
||||
})
|
||||
|
||||
it('fires change event', (done) => {
|
||||
const handleChange = jest.fn()
|
||||
const handlePaginationChange = jest.fn()
|
||||
const noop = () => {}
|
||||
const wrapper = mount(Table, getTableOptions({
|
||||
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
|
||||
|
||||
}, { change: handleChange }))
|
||||
Vue.nextTick(() => {
|
||||
const pager = wrapper.findAll({ name: 'Pager' })
|
||||
pager.at(pager.length - 1).trigger('click')
|
||||
|
||||
expect(handleChange).toBeCalledWith(
|
||||
{
|
||||
class: 'my-page',
|
||||
current: 2,
|
||||
pageSize: 2,
|
||||
},
|
||||
{},
|
||||
{}
|
||||
)
|
||||
|
||||
expect(handlePaginationChange).toBeCalledWith(2, 2)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/4532
|
||||
// https://codepen.io/afc163/pen/dVeNoP?editors=001
|
||||
it('should have pager when change pagination from false to undefined', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions({ pagination: false }))
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
|
||||
wrapper.setProps({ pagination: undefined })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
expect(wrapper.findAll('.ant-pagination-item-active')).toHaveLength(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/4532
|
||||
// https://codepen.io/afc163/pen/pWVRJV?editors=001
|
||||
it('should display pagination as prop pagination change between true and false', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions())
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
|
||||
wrapper.setProps({ pagination: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
|
||||
wrapper.setProps({ pagination })
|
||||
// wrapper.update()
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
|
||||
wrapper.find('.ant-pagination-item-2').trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
|
||||
wrapper.setProps({ pagination: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
|
||||
wrapper.setProps({ pagination: true })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
|
||||
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10
|
||||
expect(renderedNames(wrapper)).toHaveLength(4)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5259
|
||||
it('change to correct page when data source changes', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 1 }}))
|
||||
Vue.nextTick(() => {
|
||||
wrapper.find('.ant-pagination-item-3').trigger('click')
|
||||
wrapper.setProps({ dataSource: [data[0]] })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.find('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('specify the position of pagination', (done) => {
|
||||
const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' }}))
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
|
||||
expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
|
||||
wrapper.setProps({ pagination: { position: 'bottom' }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
|
||||
expect(wrapper.findAll('.ant-spin-container > *').at(1).findAll('.ant-pagination')).toHaveLength(1)
|
||||
wrapper.setProps({ pagination: { position: 'both' }})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3)
|
||||
expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
|
||||
expect(wrapper.findAll('.ant-spin-container > *').at(2).findAll('.ant-pagination')).toHaveLength(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
102
components/table/__tests__/Table.test.js
Normal file
102
components/table/__tests__/Table.test.js
Normal file
@ -0,0 +1,102 @@
|
||||
import { shallowMount as shallow, mount } from '@vue/test-utils'
|
||||
import Table from '..'
|
||||
import Vue from 'vue'
|
||||
|
||||
const { Column, ColumnGroup } = Table
|
||||
|
||||
describe('Table', () => {
|
||||
it('renders JSX correctly', (done) => {
|
||||
const data = [{
|
||||
key: '1',
|
||||
firstName: 'John',
|
||||
lastName: 'Brown',
|
||||
age: 32,
|
||||
}, {
|
||||
key: '2',
|
||||
firstName: 'Jim',
|
||||
lastName: 'Green',
|
||||
age: 42,
|
||||
}]
|
||||
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Table dataSource={data} pagination={false}>
|
||||
<ColumnGroup title='Name'>
|
||||
<Column
|
||||
title='First Name'
|
||||
dataIndex='firstName'
|
||||
key='firstName'
|
||||
/>
|
||||
<Column
|
||||
title='Last Name'
|
||||
dataIndex='lastName'
|
||||
key='lastName'
|
||||
/>
|
||||
</ColumnGroup>
|
||||
<Column
|
||||
title='Age'
|
||||
dataIndex='age'
|
||||
key='age'
|
||||
/>
|
||||
</Table>
|
||||
)
|
||||
},
|
||||
}, { sync: false }
|
||||
)
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('updates columns when receiving props', (done) => {
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
}]
|
||||
const wrapper = shallow(Table, {
|
||||
propsData: {
|
||||
columns,
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
const newColumns = [{
|
||||
title: 'Title',
|
||||
key: 'title',
|
||||
dataIndex: 'title',
|
||||
}]
|
||||
wrapper.setProps({ columns: newColumns })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.vm.columns).toBe(newColumns)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('loading with Spin', (done) => {
|
||||
const loading = {
|
||||
spinning: false,
|
||||
delay: 500,
|
||||
}
|
||||
const wrapper = mount(Table, {
|
||||
propsData: {
|
||||
loading,
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
Vue.nextTick(async () => {
|
||||
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
|
||||
expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('')
|
||||
|
||||
loading.spinning = true
|
||||
wrapper.setProps({ loading })
|
||||
expect(wrapper.findAll('.ant-spin')).toHaveLength(0)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
expect(wrapper.findAll('.ant-spin')).toHaveLength(1)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,39 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jack</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Lucy</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul unselectable="unselectable" class="ant-pagination my-page ant-table-pagination">
|
||||
<li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
|
||||
<a class="ant-pagination-item-link"></a>
|
||||
</li>
|
||||
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
|
||||
<a>1</a>
|
||||
</li>
|
||||
<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2">
|
||||
<a>2</a>
|
||||
</li>
|
||||
<li title="Next Page" tabindex="0" class=" ant-pagination-next">
|
||||
<a class="ant-pagination-item-link"></a>
|
||||
</li>
|
||||
<!---->
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
34
components/table/__tests__/__snapshots__/Table.test.js.snap
Normal file
34
components/table/__tests__/__snapshots__/Table.test.js.snap
Normal file
@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table renders JSX correctly 1`] = `
|
||||
<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>
|
||||
<th
|
||||
key="age" rowspan="2" class=""><span>Age</span></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th key="firstName" class=""><span>First Name</span></th>
|
||||
<th key="lastName" class=""><span>Last Name</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->John</td>
|
||||
<td>Brown</td>
|
||||
<td>32</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jim</td>
|
||||
<td>Green</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
154
components/table/__tests__/__snapshots__/empty.test.js.snap
Normal file
154
components/table/__tests__/__snapshots__/empty.test.js.snap
Normal file
@ -0,0 +1,154 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table renders empty table 1`] = `
|
||||
<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 ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><span>Column 1</span></th>
|
||||
<th
|
||||
key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">No data</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table renders empty table with custom emptyText 1`] = `
|
||||
<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 ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><span>Column 1</span></th>
|
||||
<th
|
||||
key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">custom empty text </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table renders empty table with fixed columns 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col style="width: 100px; min-width: 100px;"><col style="width: 100px; min-width: 100px;"><col><col><col><col><col><col><col><col><col style="width: 100px; min-width: 100px;"></colgroup><thead class="ant-table-thead"><tr><th key="name" class=""><span>Full Name</span></th>
|
||||
<th
|
||||
key="age" class=""><span>Age</span></th>
|
||||
<th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
<th key="address" class=""><span>Action</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">No data</div>
|
||||
</div>
|
||||
<div class="ant-table-fixed-left">
|
||||
<!---->
|
||||
<div class="ant-table-body-outer">
|
||||
<div class="ant-table-body-inner">
|
||||
<table class="ant-table-fixed">
|
||||
<colgroup>
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class=""><span>Full Name</span></th>
|
||||
<th key="age" class=""><span>Age</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-table-fixed-right">
|
||||
<!---->
|
||||
<div class="ant-table-body-outer">
|
||||
<div class="ant-table-body-inner">
|
||||
<table class="ant-table-fixed">
|
||||
<colgroup>
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="address" class=""><span>Action</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table renders empty table without emptyText when loading 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
|
||||
</div>
|
||||
<div class="ant-spin-container ant-spin-blur">
|
||||
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">
|
||||
<div class="ant-table-content">
|
||||
<!---->
|
||||
<div class="ant-table-body">
|
||||
<table class="">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
100
components/table/__tests__/empty.test.js
Normal file
100
components/table/__tests__/empty.test.js
Normal file
@ -0,0 +1,100 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Table from '..'
|
||||
import Vue from 'vue'
|
||||
|
||||
const columns = [
|
||||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||||
{ title: 'Column 4', dataIndex: 'address', key: '4' },
|
||||
{ title: 'Column 5', dataIndex: 'address', key: '5' },
|
||||
{ title: 'Column 6', dataIndex: 'address', key: '6' },
|
||||
{ title: 'Column 7', dataIndex: 'address', key: '7' },
|
||||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||||
]
|
||||
|
||||
const columnsFixed = [
|
||||
{
|
||||
title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left',
|
||||
},
|
||||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||||
{ title: 'Column 4', dataIndex: 'address', key: '4' },
|
||||
{ title: 'Column 5', dataIndex: 'address', key: '5' },
|
||||
{ title: 'Column 6', dataIndex: 'address', key: '6' },
|
||||
{ title: 'Column 7', dataIndex: 'address', key: '7' },
|
||||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'address',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
},
|
||||
]
|
||||
|
||||
describe('Table', () => {
|
||||
it('renders empty table', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Table dataSource={[]} columns={columns} pagination={false} />
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders empty table with fixed columns', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Table dataSource={[]} columns={columnsFixed} pagination={false} />
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders empty table with custom emptyText', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
dataSource={[]}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
locale={{ emptyText: 'custom empty text ' }}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders empty table without emptyText when loading', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Table dataSource={[]} columns={columns} loading />
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user