ant-design-vue/components/menu/__tests__/index.test.js

394 lines
13 KiB
JavaScript
Raw Normal View History

2018-06-25 22:15:17 +08:00
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Menu from '..'
import Icon from '../../icon'
const { SubMenu } = Menu
function $$ (className) {
return document.body.querySelectorAll(className)
}
describe('Menu', () => {
beforeEach(() => {
document.body.innerHTML = ''
// jest.useFakeTimers()
})
// afterEach(() => {
// jest.useRealTimers()
// })
it('should accept defaultOpenKeys in mode horizontal', async () => {
const wrapper = mount({
render () {
return (
<Menu defaultOpenKeys={['1']} 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(() => {
2018-06-26 21:47:15 +08:00
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
})
})
it('should accept defaultOpenKeys in mode inline', async () => {
const wrapper = mount({
render () {
return (
<Menu defaultOpenKeys={['1']} mode='inline'>
<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(() => {
2018-06-26 21:47:15 +08:00
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
})
})
it('should accept defaultOpenKeys in mode vertical', async () => {
const wrapper = mount({
render () {
return (
<Menu defaultOpenKeys={['1']} mode='vertical'>
<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(() => {
2018-06-26 21:47:15 +08:00
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
})
})
2018-06-26 21:47:15 +08:00
it('horizontal', async () => {
const wrapper = mount({
props: {
openKeys: {
type: Array,
default: function () {
return ['1']
},
},
},
render () {
return (
<Menu openKeys={this.openKeys} mode='horizontal' openTransitionName=''>
<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')[0].parentElement.style.display).not.toBe('none')
})
wrapper.setProps({ openKeys: [] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
})
2018-06-25 22:15:17 +08:00
2018-06-26 21:47:15 +08:00
wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
})
})
2018-06-25 22:15:17 +08:00
2018-06-26 21:47:15 +08:00
it('inline', async () => {
const wrapper = mount({
props: {
openKeys: {
type: Array,
default: function () {
return ['1']
},
},
},
render () {
return (
<Menu openKeys={this.openKeys} mode='inline' openAnimation=''>
<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')[0].style.display).not.toBe('none')
})
wrapper.setProps({ openKeys: [] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none')
})
wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
})
})
2018-06-25 22:15:17 +08:00
2018-06-26 21:47:15 +08:00
it('vertical', async () => {
const wrapper = mount({
props: {
openKeys: {
type: Array,
default: function () {
return ['1']
},
},
},
render () {
return (
<Menu openKeys={this.openKeys} mode='vertical' openTransitionName=''>
<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')[0].parentElement.style.display).not.toBe('none')
})
wrapper.setProps({ openKeys: [] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
})
wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
})
})
2018-06-25 22:15:17 +08:00
2018-06-26 21:47:15 +08:00
// https://github.com/ant-design/ant-design/pulls/4677
// https://github.com/ant-design/ant-design/issues/4692
// TypeError: Cannot read property 'indexOf' of undefined
it('pr #4677 and issue #4692', () => {
const wrapper = mount({
render () {
return (
<Menu mode='horizontal'>
<SubMenu title='submenu'>
<Menu.Item key='1'>menu1</Menu.Item>
<Menu.Item key='2'>menu2</Menu.Item>
</SubMenu>
</Menu>
)
},
}, { attachToDocument: true, sync: false })
wrapper.vm.$forceUpdate()
// just expect no error emit
})
it('should always follow openKeys when mode is switched', async () => {
const wrapper = mount({
props: {
mode: {
type: String,
default: 'inline',
},
},
render () {
return (
<Menu openKeys={['1']} mode={this.mode}>
<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')[0].style.display).not.toBe('none')
})
wrapper.setProps({ mode: 'vertical' })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
}, 0)
wrapper.setProps({ mode: 'inline' })
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
}, 0)
})
2018-06-25 22:15:17 +08:00
// it('should always follow openKeys when mode is switched', () => {
// const wrapper = mount({
// render () {
// return (
// <Menu defaultOpenKeys={['1']} mode='inline'>
// <Menu.Item key='menu1'>
// <Icon type='inbox' />
// <span>Option</span>
// </Menu.Item>
// <SubMenu key='1' title='submenu1'>
// <Menu.Item key='submenu1'>
// Option
// </Menu.Item>
// <Menu.Item key='submenu2'>
// Option
// </Menu.Item>
// </SubMenu>
// </Menu>
// )
// },
// })
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
// wrapper.setProps({ inlineCollapsed: true })
// // 动画结束后套样式;
// jest.runAllTimers()
// wrapper.update()
// expect(wrapper.find('.ant-menu').at(0).hasClass('ant-menu-vertical')).toBe(true)
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
// wrapper.setProps({ inlineCollapsed: false })
// jest.runAllTimers()
// wrapper.update()
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
// })
// it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
// const wrapper = mount({
// render () {
// return (
// <Menu defaultOpenKeys={['not-existed']} mode='inline'>
// <Menu.Item key='menu1'>
// <Icon type='inbox' />
// <span>Option</span>
// </Menu.Item>
// <SubMenu key='1' title='submenu1'>
// <Menu.Item key='submenu1'>
// Option
// </Menu.Item>
// <Menu.Item key='submenu2'>
// Option
// </Menu.Item>
// </SubMenu>
// </Menu>
// )
// },
// })
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
// wrapper.setProps({ inlineCollapsed: true })
// jest.runAllTimers()
// wrapper.update()
// wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter')
// jest.runAllTimers()
// wrapper.update()
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(true)
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true)
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true)
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
// })
// describe('open submenu when click submenu title', () => {
// beforeEach(() => {
// jest.useFakeTimers()
// })
// afterEach(() => {
// jest.useRealTimers()
// })
// const toggleMenu = (wrapper, index, event) => {
// wrapper.find('.ant-menu-submenu-title').at(index).simulate(event)
// jest.runAllTimers()
// wrapper.update()
// }
// it('inline', () => {
// const wrapper = mount({
// render () {
// return (
// <Menu mode='inline'>
// <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>
// )
// },
// })
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
// toggleMenu(wrapper, 0, 'click')
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
// toggleMenu(wrapper, 0, 'click')
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
2018-06-25 22:15:17 +08:00
// })
// it('vertical', () => {
// const wrapper = mount({
// render () {
// return (
// <Menu mode='vertical'>
// <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>
// )
// },
// })
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
// toggleMenu(wrapper, 0, 'mouseenter')
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
// toggleMenu(wrapper, 0, 'mouseleave')
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
2018-06-25 22:15:17 +08:00
// })
// it('horizontal', () => {
// jest.useFakeTimers()
// 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>
// )
// },
// })
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
// toggleMenu(wrapper, 0, 'mouseenter')
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
2018-06-25 22:15:17 +08:00
// toggleMenu(wrapper, 0, 'mouseleave')
2018-06-26 21:47:15 +08:00
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
2018-06-25 22:15:17 +08:00
// })
// })
})