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

test: update menu test

pull/165/head
tjz 2018-06-28 21:22:25 +08:00
parent f37431a3a9
commit d6371261d3
1 changed files with 182 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

345
components/menu/__tests__/index.test.js
View File

@ -233,161 +233,192 @@ describe('Menu', () => {
}, 0) }, 0)
}) })
// it('should always follow openKeys when mode is switched', () => { it('should always follow openKeys when mode is switched', async () => {
// const wrapper = mount({ const wrapper = mount({
// render () { props: {
// return ( inlineCollapsed: {
// <Menu defaultOpenKeys={['1']} mode='inline'> type: Boolean,
// <Menu.Item key='menu1'> default: false,
// <Icon type='inbox' /> },
// <span>Option</span> },
// </Menu.Item> render () {
// <SubMenu key='1' title='submenu1'> return (
// <Menu.Item key='submenu1'> <Menu ref='menu' defaultOpenKeys={['1']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
// Option <Menu.Item key='menu1'>
// </Menu.Item> <Icon type='inbox' />
// <Menu.Item key='submenu2'> <span>Option</span>
// Option </Menu.Item>
// </Menu.Item> <SubMenu key='1' title='submenu1'>
// </SubMenu> <Menu.Item key='submenu1'>
// </Menu> Option
// ) </Menu.Item>
// }, <Menu.Item key='submenu2'>
// }) Option
</Menu.Item>
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true) </SubMenu>
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false) </Menu>
)
// wrapper.setProps({ inlineCollapsed: true }) },
// // 动画结束后套样式; }, { attachToDocument: true, sync: false })
// jest.runAllTimers() await asyncExpect(() => {
// wrapper.update() expect(wrapper.findAll('.ant-menu-sub').at(0).classes()).toContain('ant-menu-inline')
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
// expect(wrapper.find('.ant-menu').at(0).hasClass('ant-menu-vertical')).toBe(true) }, 0)
// expect(wrapper.find('.ant-menu-sub').length).toBe(0) wrapper.setProps({ inlineCollapsed: true })
await asyncExpect(() => {
// wrapper.setProps({ inlineCollapsed: false }) // 动画完成后的回调
// jest.runAllTimers() wrapper.vm.$refs.menu.switchModeFromInline = false
// wrapper.update() wrapper.vm.$forceUpdate()
})
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true) await asyncExpect(() => {
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false) expect(wrapper.findAll('.ant-menu').at(0).classes()).toContain('ant-menu-vertical')
// }) expect(wrapper.findAll('.ant-menu-sub').length).toBe(0)
}, 0)
// it('inlineCollapsed should works well when specify a not existed default openKeys', () => { wrapper.setProps({ inlineCollapsed: false })
// const wrapper = mount({ await asyncExpect(() => {
// render () { expect(wrapper.findAll('.ant-menu-sub').at(0).classes()).toContain('ant-menu-inline')
// return ( expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
// <Menu defaultOpenKeys={['not-existed']} mode='inline'> }, 0)
// <Menu.Item key='menu1'> })
// <Icon type='inbox' />
// <span>Option</span> it('inlineCollapsed should works well when specify a not existed default openKeys', async () => {
// </Menu.Item> const wrapper = mount({
// <SubMenu key='1' title='submenu1'> props: {
// <Menu.Item key='submenu1'> inlineCollapsed: {
// Option type: Boolean,
// </Menu.Item> default: false,
// <Menu.Item key='submenu2'> },
// Option },
// </Menu.Item> render () {
// </SubMenu> return (
// </Menu> <Menu ref='menu' defaultOpenKeys={['not-existed']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
// ) <Menu.Item key='menu1'>
// }, <Icon type='inbox' />
// }) <span>Option</span>
// expect(wrapper.find('.ant-menu-sub').length).toBe(0) </Menu.Item>
// wrapper.setProps({ inlineCollapsed: true }) <SubMenu key='1' title='submenu1'>
// jest.runAllTimers() <Menu.Item key='submenu1'>
// wrapper.update() Option
// wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter') </Menu.Item>
// jest.runAllTimers() <Menu.Item key='submenu2'>
// wrapper.update() Option
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(true) </Menu.Item>
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true) </SubMenu>
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true) </Menu>
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false) )
// }) },
}, { attachToDocument: true, sync: false })
// describe('open submenu when click submenu title', () => { await asyncExpect(() => {
// beforeEach(() => { expect(wrapper.findAll('.ant-menu-sub').length).toBe(0)
// jest.useFakeTimers() })
// }) wrapper.setProps({ inlineCollapsed: true })
await asyncExpect(() => {
// afterEach(() => { // 动画完成后的回调
// jest.useRealTimers() wrapper.vm.$refs.menu.switchModeFromInline = false
// }) wrapper.vm.$forceUpdate()
})
// const toggleMenu = (wrapper, index, event) => { await asyncExpect(() => {
// wrapper.find('.ant-menu-submenu-title').at(index).simulate(event) wrapper.findAll('.ant-menu-submenu-title').at(0).trigger('mouseenter')
// jest.runAllTimers() })
// wrapper.update() await asyncExpect(() => {
// } expect(wrapper.findAll('.ant-menu-submenu').at(0).classes()).toContain('ant-menu-submenu-vertical')
expect(wrapper.findAll('.ant-menu-submenu').at(0).classes()).toContain('ant-menu-submenu-open')
// it('inline', () => { expect($$('.ant-menu-sub')[0].className).toContain('ant-menu-vertical')
// const wrapper = mount({ expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
// render () { }, 300)
// return ( })
// <Menu mode='inline'>
// <SubMenu key='1' title='submenu1'> describe('open submenu when click submenu title', () => {
// <Menu.Item key='submenu1'>Option 1</Menu.Item> beforeEach(() => {
// <Menu.Item key='submenu2'>Option 2</Menu.Item> document.body.innerHTML = ''
// </SubMenu> })
// <Menu.Item key='2'>menu2</Menu.Item>
// </Menu> const toggleMenu = (wrapper, index, event) => {
// ) wrapper.findAll('.ant-menu-submenu-title').at(index).trigger(event)
// }, }
// })
// expect(wrapper.find('.ant-menu-sub').length).toBe(0) it('inline', async () => {
// toggleMenu(wrapper, 0, 'click') const wrapper = mount({
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1) render () {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') return (
// toggleMenu(wrapper, 0, 'click') <Menu mode='inline'>
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none') <SubMenu key='1' title='submenu1'>
// }) <Menu.Item key='submenu1'>Option 1</Menu.Item>
<Menu.Item key='submenu2'>Option 2</Menu.Item>
// it('vertical', () => { </SubMenu>
// const wrapper = mount({ <Menu.Item key='2'>menu2</Menu.Item>
// render () { </Menu>
// return ( )
// <Menu mode='vertical'> },
// <SubMenu key='1' title='submenu1'> }, { attachToDocument: true, sync: false })
// <Menu.Item key='submenu1'>Option 1</Menu.Item> await asyncExpect(() => {
// <Menu.Item key='submenu2'>Option 2</Menu.Item> expect($$('.ant-menu-sub').length).toBe(0)
// </SubMenu> toggleMenu(wrapper, 0, 'click')
// <Menu.Item key='2'>menu2</Menu.Item> })
// </Menu> await asyncExpect(() => {
// ) expect($$('.ant-menu-sub').length).toBe(1)
// }, expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
// }) toggleMenu(wrapper, 0, 'click')
// expect(wrapper.find('.ant-menu-sub').length).toBe(0) })
// toggleMenu(wrapper, 0, 'mouseenter') await asyncExpect(() => {
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1) expect($$('.ant-menu-sub')[0].style.display).toBe('none')
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') })
// toggleMenu(wrapper, 0, 'mouseleave') })
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
// }) it('vertical', async () => {
const wrapper = mount({
// it('horizontal', () => { render () {
// jest.useFakeTimers() return (
// const wrapper = mount({ <Menu mode='vertical'>
// render () { <SubMenu key='1' title='submenu1'>
// return ( <Menu.Item key='submenu1'>Option 1</Menu.Item>
// <Menu mode='horizontal'> <Menu.Item key='submenu2'>Option 2</Menu.Item>
// <SubMenu key='1' title='submenu1'> </SubMenu>
// <Menu.Item key='submenu1'>Option 1</Menu.Item> <Menu.Item key='2'>menu2</Menu.Item>
// <Menu.Item key='submenu2'>Option 2</Menu.Item> </Menu>
// </SubMenu> )
// <Menu.Item key='2'>menu2</Menu.Item> },
// </Menu> }, { attachToDocument: true, sync: false })
// ) await asyncExpect(() => {
// }, expect($$('.ant-menu-sub').length).toBe(0)
// }) toggleMenu(wrapper, 0, 'mouseenter')
// expect(wrapper.find('.ant-menu-sub').length).toBe(0) })
// toggleMenu(wrapper, 0, 'mouseenter') await asyncExpect(() => {
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1) expect($$('.ant-menu-sub').length).toBe(1)
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
// toggleMenu(wrapper, 0, 'mouseleave') toggleMenu(wrapper, 0, 'mouseleave')
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none') }, 500)
// }) await asyncExpect(() => {
// }) expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
}, 500)
})
it('horizontal', async () => {
const wrapper = mount({
render () {
return (
<Menu mode='horizontal'>
<SubMenu key='1' title='submenu1'>
<Menu.Item key='submenu1'>Option 1</Menu.Item>
<Menu.Item key='submenu2'>Option 2</Menu.Item>
</SubMenu>
<Menu.Item key='2'>menu2</Menu.Item>
</Menu>
)
},
}, { attachToDocument: true, sync: false })
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0)
toggleMenu(wrapper, 0, 'mouseenter')
})
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1)
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
toggleMenu(wrapper, 0, 'mouseleave')
}, 500)
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
}, 500)
})
})
}) })