test: add Cascader test
tjz
parent
5f06942217
commit
78f7c2e4b1
|
|
@ -0,0 +1,102 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Cascader can be selected 1`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader can be selected 2`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader can be selected 3`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader popup correctly when panel is hidden 1`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-empty ant-cascader-menus-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader popup correctly when panel is open 1`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang</li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader popup correctly with defaultValue 1`] = `
|
||||
<div>
|
||||
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
|
||||
<div class="ant-cascader-menus-content">
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
|
||||
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
|
||||
</ul>
|
||||
<ul class="ant-cascader-menu">
|
||||
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader support controlled mode 1`] = `
|
||||
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span>
|
||||
<i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i>
|
||||
<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
|
||||
</span>
|
||||
`;
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
import { asyncExpect } from '@/tests/utils'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import KeyCode from '../../_util/KeyCode'
|
||||
import Cascader from '..'
|
||||
import focusTest from '../../../tests/shared/focusTest'
|
||||
|
||||
const options = [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
|
||||
describe('Cascader', () => {
|
||||
focusTest(Cascader)
|
||||
|
||||
it('popup correctly when panel is hidden', async () => {
|
||||
const wrapper = mount(Cascader, { propsData: { options }, sync: false })
|
||||
const CascaderWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
await asyncExpect(() => {
|
||||
expect(CascaderWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('popup correctly when panel is open', async () => {
|
||||
const wrapper = mount(Cascader, { propsData: { options }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('input').trigger('click')
|
||||
})
|
||||
let CascaderWrapper = null
|
||||
await asyncExpect(() => {
|
||||
CascaderWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(CascaderWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('support controlled mode', async () => {
|
||||
const wrapper = mount(Cascader, { propsData: { options }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
wrapper.setProps({
|
||||
value: ['zhejiang', 'hangzhou', 'xihu'],
|
||||
})
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('popup correctly with defaultValue', async () => {
|
||||
const wrapper = mount(Cascader, {
|
||||
propsData: {
|
||||
options,
|
||||
defaultValue: ['zhejiang', 'hangzhou'],
|
||||
}, sync: false })
|
||||
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('input').trigger('click')
|
||||
})
|
||||
let CascaderWrapper = null
|
||||
await asyncExpect(() => {
|
||||
CascaderWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
|
||||
await asyncExpect(() => {
|
||||
expect(CascaderWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('can be selected', async () => {
|
||||
const wrapper = mount(Cascader, { propsData: { options }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('input').trigger('click')
|
||||
})
|
||||
let popupWrapper = null
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper.findAll('.ant-cascader-menu').at(0).findAll('.ant-cascader-menu-item').at(0)
|
||||
.trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
|
||||
await asyncExpect(() => {
|
||||
expect(popupWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper.findAll('.ant-cascader-menu').at(1).findAll('.ant-cascader-menu-item').at(0)
|
||||
.trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(popupWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper.findAll('.ant-cascader-menu').at(2).findAll('.ant-cascader-menu-item').at(0)
|
||||
.trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
popupWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(popupWrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('backspace should work with `Cascader[showSearch]`', async () => {
|
||||
const wrapper = mount(Cascader, { propsData: { options, showSearch: true }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('input').element.value = '123'
|
||||
wrapper.find('input').trigger('input')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.vm.inputValue).toBe('123')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('input').element.keyCode = KeyCode.BACKSPACE
|
||||
wrapper.find('input').trigger('keydown')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
// trigger onKeyDown will not trigger onChange by default, so the value is still '123'
|
||||
expect(wrapper.vm.inputValue).toBe('123')
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue