github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: add progress & rate & slider & spin & table test

pull/165/head
tangjinzhou 2018-06-06 10:48:15 +08:00
parent 15f36f344a
commit f04e8865b0
12 changed files with 243 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/progress/__tests__/index.test.js Normal file
View File

@ -0,0 +1,23 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Progress from '..'
describe('Progress', () => {
it('successPercent should decide the progress status when it exists', async () => {
const wrapper = mount(Progress, {
propsData: {
percent: 100,
successPercent: 50,
},
sync: false,
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(0)
})
wrapper.setProps({ percent: 50, successPercent: 100 })
await asyncExpect(() => {
expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(1)
})
})
})

6
components/rate/__tests__/index.test.js Normal file
View File

@ -0,0 +1,6 @@
import Rate from '..'
import focusTest from '../../../tests/shared/focusTest'
describe('Rate', () => {
focusTest(Rate)
})

23
components/slider/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Slider should show tooltip when hovering slider handler 1`] = `
<div>
<div class="ant-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div>
<div class="ant-tooltip-inner">30</div>
</div>
</div>
</div>
`;
exports[`Slider should show tooltip when hovering slider handler 2`] = `
<div>
<div class="ant-tooltip ant-tooltip-placement-top" style="display: none; left: -999px; top: -1003px;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div>
<div class="ant-tooltip-inner">30</div>
</div>
</div>
</div>
`;

39
components/slider/__tests__/index.test.js Normal file
View File

@ -0,0 +1,39 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Slider from '..'
describe('Slider', () => {
it('should show tooltip when hovering slider handler', async () => {
const wrapper = mount(Slider, {
propsData: {
defaultValue: 30,
},
sync: false,
})
await asyncExpect(() => {
wrapper.findAll('.ant-slider-handle').at(0).trigger('mouseenter')
})
let dropdownWrapper = null
await asyncExpect(() => {
dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
})
await asyncExpect(() => {
expect(dropdownWrapper.html()).toMatchSnapshot()
wrapper.findAll('.ant-slider-handle').at(0).trigger('mouseleave')
})
await asyncExpect(() => {
dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
})
await asyncExpect(() => {
expect(dropdownWrapper.html()).toMatchSnapshot()
})
})
})

1
components/spin/Spin.jsx
View File

@ -91,7 +91,6 @@ export default {
[`${prefixCls}-spinning`]: stateSpinning,
[`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
}
const spinIndicator = $slots.indicator ? $slots.indicator : (
<span class={`${prefixCls}-dot`}>
<i />

16
components/spin/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
<span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><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>content</div>
</div>
</span>
`;
exports[`Spin should render custom indicator when it's set 1`] = `
<div class="ant-spin ant-spin-spinning">
<div class="custom-indicator"></div>
</div>
`;

33
components/spin/__tests__/index.test.js Normal file
View File

@ -0,0 +1,33 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Spin from '..'
describe('Spin', () => {
it('should only affect the spin element when set style to a nested <Spin>xx</Spin>', () => {
const wrapper = mount({
render () {
return (
<Spin style={{ background: 'red' }}>
<div>content</div>
</Spin>
)
},
})
expect(wrapper.html()).toMatchSnapshot()
// expect(wrapper.findAll('.ant-spin-nested-loading').at(0).prop('style')).toBe(null)
// expect(wrapper.findAll('.ant-spin').at(0).prop('style').background).toBe('red')
})
it('should render custom indicator when it\'s set', () => {
// const customIndicator = <div className='custom-indicator' />
const wrapper = mount(
{
render () {
return (
<Spin><div slot='indicator' class='custom-indicator' /></Spin>
)
},
})
expect(wrapper.html()).toMatchSnapshot()
})
})

2
components/spin/index.en-US.md
View File

@ -4,7 +4,7 @@
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
| indicator | React node of the spinning indicator | slot | - |
| indicator | vue node of the spinning indicator | slot | - |
| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
| spinning | whether Spin is spinning | boolean | true |
| tip | customize description content when Spin has children | string | - |

46
components/table/__tests__/Table.filter.test.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Table from '..'
function $$ (className) {
@ -199,7 +200,7 @@ describe('Table.filter', () => {
})
})
it('fires change event', (done) => {
it('fires change event', async () => {
const handleChange = jest.fn()
const wrapper = mount(Table, getTableOptions({}, { change: handleChange }))
const dropdownWrapper = mount({
@ -207,19 +208,12 @@ describe('Table.filter', () => {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
new Promise((reslove) => {
Vue.nextTick(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
reslove()
})
}).then(() => {
Vue.nextTick(() => {
expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
Promise.resolve()
})
}).finally(() => {
done()
await asyncExpect(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
})
await asyncExpect(() => {
expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
})
})
@ -266,7 +260,7 @@ describe('Table.filter', () => {
}, 1000)
})
it('works with JSX in controlled mode', (done) => {
it('works with JSX in controlled mode', async () => {
const { Column } = Table
const App = {
@ -305,23 +299,17 @@ describe('Table.filter', () => {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false, attachToDocument: true })
new Promise((reslove) => {
Vue.nextTick(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
reslove()
})
}).then(() => {
await asyncExpect(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
})
await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['Jack'])
dropdownWrapper.find('.clear').trigger('click')
setTimeout(() => {
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
Promise.resolve()
}, 0)
}).finally(() => {
done()
})
await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
}, 0)
})
it('works with grouping columns in controlled mode', (done) => {

119
components/table/__tests__/Table.pagination.test.js
View File

@ -2,6 +2,7 @@
import { mount } from '@vue/test-utils'
import Table from '..'
import Vue from 'vue'
import { asyncExpect } from '@/tests/utils'
describe('Table.pagination', () => {
const columns = [{
@ -47,31 +48,30 @@ describe('Table.pagination', () => {
})
})
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', (done) => {
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true }}))
Vue.nextTick(() => {
await asyncExpect(() => {
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()
})
})
})
})
})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
})
})
@ -140,36 +140,34 @@ describe('Table.pagination', () => {
// 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) => {
it('should display pagination as prop pagination change between true and false', async () => {
const wrapper = mount(Table, getTableOptions())
Vue.nextTick(() => {
await asyncExpect(() => {
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()
})
})
})
})
})
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
wrapper.setProps({ pagination })
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
wrapper.find('.ant-pagination-item-2').trigger('click')
})
await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
wrapper.setProps({ pagination: false })
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
wrapper.setProps({ pagination: true })
})
await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10
expect(renderedNames(wrapper)).toHaveLength(4)
})
})
@ -186,23 +184,22 @@ describe('Table.pagination', () => {
})
})
it('specify the position of pagination', (done) => {
it('specify the position of pagination', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' }}))
setTimeout(() => {
await asyncExpect(() => {
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' }})
setTimeout(() => {
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' }})
setTimeout(() => {
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()
})
})
}, 0)
await asyncExpect(() => {
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' }})
}, 0)
await asyncExpect(() => {
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)
}, 0)
})
})

21
components/table/__tests__/Table.sorter.test.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Table from '..'
describe('Table.sorter', () => {
@ -71,19 +72,17 @@ describe('Table.sorter', () => {
})
})
it('sort records', (done) => {
it('sort records', async () => {
const wrapper = mount(Table, getTableOptions())
Vue.nextTick(() => {
await asyncExpect(() => {
wrapper.find('.ant-table-column-sorter-up').trigger('click')
Vue.nextTick(() => {
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'])
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
wrapper.find('.ant-table-column-sorter-down').trigger('click')
Vue.nextTick(() => {
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry'].join(''))
done()
})
})
})
await asyncExpect(() => {
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
wrapper.find('.ant-table-column-sorter-down').trigger('click')
})
await asyncExpect(() => {
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry'].join(''))
})
})

17
tests/utils.js
View File

@ -1,5 +1,6 @@
import moment from 'moment'
import MockDate from 'mockdate'
import Vue from 'vue'
export function setMockDate (dateString = '2017-09-18T03:30:07.795') {
MockDate.set(moment(dateString))
@ -8,3 +9,19 @@ export function setMockDate (dateString = '2017-09-18T03:30:07.795') {
export function resetMockDate () {
MockDate.reset()
}
export function asyncExpect (fn, timeout) {
return new Promise((resolve) => {
if (typeof timeout === 'number') {
setTimeout(() => {
fn()
resolve()
}, timeout)
} else {
Vue.nextTick(() => {
fn()
resolve()
})
}
})
}