Skip to content

Commit d637126

Browse files
tangjinzhoutangjinzhou
committed
test: update menu test
1 parent f37431a commit d637126

File tree

1 file changed

+182
-151
lines changed

1 file changed

+182
-151
lines changed

‎components/menu/__tests__/index.test.js‎

Lines changed: 182 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -233,161 +233,192 @@ describe('Menu', () => {
233233
}, 0)
234234
})
235235

236-
// it('should always follow openKeys when mode is switched', () => {
237-
// const wrapper = mount({
238-
// render () {
239-
// return (
240-
// <Menu defaultOpenKeys={['1']} mode='inline'>
241-
// <Menu.Item key='menu1'>
242-
// <Icon type='inbox' />
243-
// <span>Option</span>
244-
// </Menu.Item>
245-
// <SubMenu key='1' title='submenu1'>
246-
// <Menu.Item key='submenu1'>
247-
// Option
248-
// </Menu.Item>
249-
// <Menu.Item key='submenu2'>
250-
// Option
251-
// </Menu.Item>
252-
// </SubMenu>
253-
// </Menu>
254-
// )
255-
// },
256-
// })
257-
258-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
259-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
260-
261-
// wrapper.setProps({ inlineCollapsed: true })
262-
// // 动画结束后套样式;
263-
// jest.runAllTimers()
264-
// wrapper.update()
265-
266-
// expect(wrapper.find('.ant-menu').at(0).hasClass('ant-menu-vertical')).toBe(true)
267-
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
268-
269-
// wrapper.setProps({ inlineCollapsed: false })
270-
// jest.runAllTimers()
271-
// wrapper.update()
272-
273-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
274-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
275-
// })
276-
277-
// it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
278-
// const wrapper = mount({
279-
// render () {
280-
// return (
281-
// <Menu defaultOpenKeys={['not-existed']} mode='inline'>
282-
// <Menu.Item key='menu1'>
283-
// <Icon type='inbox' />
284-
// <span>Option</span>
285-
// </Menu.Item>
286-
// <SubMenu key='1' title='submenu1'>
287-
// <Menu.Item key='submenu1'>
288-
// Option
289-
// </Menu.Item>
290-
// <Menu.Item key='submenu2'>
291-
// Option
292-
// </Menu.Item>
293-
// </SubMenu>
294-
// </Menu>
295-
// )
296-
// },
297-
// })
298-
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
299-
// wrapper.setProps({ inlineCollapsed: true })
300-
// jest.runAllTimers()
301-
// wrapper.update()
302-
// wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter')
303-
// jest.runAllTimers()
304-
// wrapper.update()
305-
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(true)
306-
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true)
307-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true)
308-
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
309-
// })
236+
it('should always follow openKeys when mode is switched', async () => {
237+
const wrapper = mount({
238+
props: {
239+
inlineCollapsed: {
240+
type: Boolean,
241+
default: false,
242+
},
243+
},
244+
render () {
245+
return (
246+
<Menu ref='menu' defaultOpenKeys={['1']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
247+
<Menu.Item key='menu1'>
248+
<Icon type='inbox' />
249+
<span>Option</span>
250+
</Menu.Item>
251+
<SubMenu key='1' title='submenu1'>
252+
<Menu.Item key='submenu1'>
253+
Option
254+
</Menu.Item>
255+
<Menu.Item key='submenu2'>
256+
Option
257+
</Menu.Item>
258+
</SubMenu>
259+
</Menu>
260+
)
261+
},
262+
}, { attachToDocument: true, sync: false })
263+
await asyncExpect(() => {
264+
expect(wrapper.findAll('.ant-menu-sub').at(0).classes()).toContain('ant-menu-inline')
265+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
266+
}, 0)
267+
wrapper.setProps({ inlineCollapsed: true })
268+
await asyncExpect(() => {
269+
// 动画完成后的回调
270+
wrapper.vm.$refs.menu.switchModeFromInline = false
271+
wrapper.vm.$forceUpdate()
272+
})
273+
await asyncExpect(() => {
274+
expect(wrapper.findAll('.ant-menu').at(0).classes()).toContain('ant-menu-vertical')
275+
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0)
276+
}, 0)
277+
wrapper.setProps({ inlineCollapsed: false })
278+
await asyncExpect(() => {
279+
expect(wrapper.findAll('.ant-menu-sub').at(0).classes()).toContain('ant-menu-inline')
280+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
281+
}, 0)
282+
})
310283

311-
// describe('open submenu when click submenu title', () => {
312-
// beforeEach(() => {
313-
// jest.useFakeTimers()
314-
// })
284+
it('inlineCollapsed should works well when specify a not existed default openKeys', async () => {
285+
const wrapper = mount({
286+
props: {
287+
inlineCollapsed: {
288+
type: Boolean,
289+
default: false,
290+
},
291+
},
292+
render () {
293+
return (
294+
<Menu ref='menu' defaultOpenKeys={['not-existed']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
295+
<Menu.Item key='menu1'>
296+
<Icon type='inbox' />
297+
<span>Option</span>
298+
</Menu.Item>
299+
<SubMenu key='1' title='submenu1'>
300+
<Menu.Item key='submenu1'>
301+
Option
302+
</Menu.Item>
303+
<Menu.Item key='submenu2'>
304+
Option
305+
</Menu.Item>
306+
</SubMenu>
307+
</Menu>
308+
)
309+
},
310+
}, { attachToDocument: true, sync: false })
311+
await asyncExpect(() => {
312+
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0)
313+
})
314+
wrapper.setProps({ inlineCollapsed: true })
315+
await asyncExpect(() => {
316+
// 动画完成后的回调
317+
wrapper.vm.$refs.menu.switchModeFromInline = false
318+
wrapper.vm.$forceUpdate()
319+
})
320+
await asyncExpect(() => {
321+
wrapper.findAll('.ant-menu-submenu-title').at(0).trigger('mouseenter')
322+
})
323+
await asyncExpect(() => {
324+
expect(wrapper.findAll('.ant-menu-submenu').at(0).classes()).toContain('ant-menu-submenu-vertical')
325+
expect(wrapper.findAll('.ant-menu-submenu').at(0).classes()).toContain('ant-menu-submenu-open')
326+
expect($$('.ant-menu-sub')[0].className).toContain('ant-menu-vertical')
327+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
328+
}, 300)
329+
})
315330

316-
// afterEach(() => {
317-
// jest.useRealTimers()
318-
// })
331+
describe('open submenu when click submenu title', () => {
332+
beforeEach(() => {
333+
document.body.innerHTML = ''
334+
})
319335

320-
// const toggleMenu = (wrapper, index, event) => {
321-
// wrapper.find('.ant-menu-submenu-title').at(index).simulate(event)
322-
// jest.runAllTimers()
323-
// wrapper.update()
324-
// }
336+
const toggleMenu = (wrapper, index, event) => {
337+
wrapper.findAll('.ant-menu-submenu-title').at(index).trigger(event)
338+
}
325339

326-
// it('inline', () => {
327-
// const wrapper = mount({
328-
// render () {
329-
// return (
330-
// <Menu mode='inline'>
331-
// <SubMenu key='1' title='submenu1'>
332-
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
333-
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
334-
// </SubMenu>
335-
// <Menu.Item key='2'>menu2</Menu.Item>
336-
// </Menu>
337-
// )
338-
// },
339-
// })
340-
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
341-
// toggleMenu(wrapper, 0, 'click')
342-
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
343-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
344-
// toggleMenu(wrapper, 0, 'click')
345-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
346-
// })
340+
it('inline', async () => {
341+
const wrapper = mount({
342+
render () {
343+
return (
344+
<Menu mode='inline'>
345+
<SubMenu key='1' title='submenu1'>
346+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
347+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
348+
</SubMenu>
349+
<Menu.Item key='2'>menu2</Menu.Item>
350+
</Menu>
351+
)
352+
},
353+
}, { attachToDocument: true, sync: false })
354+
await asyncExpect(() => {
355+
expect($$('.ant-menu-sub').length).toBe(0)
356+
toggleMenu(wrapper, 0, 'click')
357+
})
358+
await asyncExpect(() => {
359+
expect($$('.ant-menu-sub').length).toBe(1)
360+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
361+
toggleMenu(wrapper, 0, 'click')
362+
})
363+
await asyncExpect(() => {
364+
expect($$('.ant-menu-sub')[0].style.display).toBe('none')
365+
})
366+
})
347367

348-
// it('vertical', () => {
349-
// const wrapper = mount({
350-
// render () {
351-
// return (
352-
// <Menu mode='vertical'>
353-
// <SubMenu key='1' title='submenu1'>
354-
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
355-
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
356-
// </SubMenu>
357-
// <Menu.Item key='2'>menu2</Menu.Item>
358-
// </Menu>
359-
// )
360-
// },
361-
// })
362-
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
363-
// toggleMenu(wrapper, 0, 'mouseenter')
364-
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
365-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
366-
// toggleMenu(wrapper, 0, 'mouseleave')
367-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
368-
// })
368+
it('vertical', async () => {
369+
const wrapper = mount({
370+
render () {
371+
return (
372+
<Menu mode='vertical'>
373+
<SubMenu key='1' title='submenu1'>
374+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
375+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
376+
</SubMenu>
377+
<Menu.Item key='2'>menu2</Menu.Item>
378+
</Menu>
379+
)
380+
},
381+
}, { attachToDocument: true, sync: false })
382+
await asyncExpect(() => {
383+
expect($$('.ant-menu-sub').length).toBe(0)
384+
toggleMenu(wrapper, 0, 'mouseenter')
385+
})
386+
await asyncExpect(() => {
387+
expect($$('.ant-menu-sub').length).toBe(1)
388+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
389+
toggleMenu(wrapper, 0, 'mouseleave')
390+
}, 500)
391+
await asyncExpect(() => {
392+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
393+
}, 500)
394+
})
369395

370-
// it('horizontal', () => {
371-
// jest.useFakeTimers()
372-
// const wrapper = mount({
373-
// render () {
374-
// return (
375-
// <Menu mode='horizontal'>
376-
// <SubMenu key='1' title='submenu1'>
377-
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
378-
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
379-
// </SubMenu>
380-
// <Menu.Item key='2'>menu2</Menu.Item>
381-
// </Menu>
382-
// )
383-
// },
384-
// })
385-
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
386-
// toggleMenu(wrapper, 0, 'mouseenter')
387-
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
388-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
389-
// toggleMenu(wrapper, 0, 'mouseleave')
390-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
391-
// })
392-
// })
396+
it('horizontal', async () => {
397+
const wrapper = mount({
398+
render () {
399+
return (
400+
<Menu mode='horizontal'>
401+
<SubMenu key='1' title='submenu1'>
402+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
403+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
404+
</SubMenu>
405+
<Menu.Item key='2'>menu2</Menu.Item>
406+
</Menu>
407+
)
408+
},
409+
}, { attachToDocument: true, sync: false })
410+
await asyncExpect(() => {
411+
expect($$('.ant-menu-sub').length).toBe(0)
412+
toggleMenu(wrapper, 0, 'mouseenter')
413+
})
414+
await asyncExpect(() => {
415+
expect($$('.ant-menu-sub').length).toBe(1)
416+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
417+
toggleMenu(wrapper, 0, 'mouseleave')
418+
}, 500)
419+
await asyncExpect(() => {
420+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
421+
}, 500)
422+
})
423+
})
393424
})

0 commit comments

Comments
 (0)