Skip to content

Commit 0cdd077

Browse files
tangjinzhoutangjinzhou
committed
test: add menu test
1 parent d530d93 commit 0cdd077

File tree

1 file changed

+341
-0
lines changed

1 file changed

+341
-0
lines changed

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

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
import { mount } from '@vue/test-utils'
2+
import { asyncExpect } from '@/tests/utils'
3+
import Menu from '..'
4+
import Icon from '../../icon'
5+
6+
const { SubMenu } = Menu
7+
function $$ (className) {
8+
return document.body.querySelectorAll(className)
9+
}
10+
describe('Menu', () => {
11+
beforeEach(() => {
12+
document.body.innerHTML = ''
13+
// jest.useFakeTimers()
14+
})
15+
16+
// afterEach(() => {
17+
// jest.useRealTimers()
18+
// })
19+
20+
it('should accept defaultOpenKeys in mode horizontal', async () => {
21+
const wrapper = mount({
22+
render () {
23+
return (
24+
<Menu defaultOpenKeys={['1']} mode='horizontal'>
25+
<SubMenu key='1' title='submenu1'>
26+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
27+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
28+
</SubMenu>
29+
<Menu.Item key='2'>menu2</Menu.Item>
30+
</Menu>
31+
)
32+
},
33+
}, { attachToDocument: true, sync: false })
34+
await asyncExpect(() => {
35+
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
36+
})
37+
})
38+
39+
it('should accept defaultOpenKeys in mode inline', async () => {
40+
const wrapper = mount({
41+
render () {
42+
return (
43+
<Menu defaultOpenKeys={['1']} mode='inline'>
44+
<SubMenu key='1' title='submenu1'>
45+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
46+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
47+
</SubMenu>
48+
<Menu.Item key='2'>menu2</Menu.Item>
49+
</Menu>
50+
)
51+
},
52+
}, { attachToDocument: true, sync: false })
53+
await asyncExpect(() => {
54+
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
55+
})
56+
})
57+
58+
it('should accept defaultOpenKeys in mode vertical', async () => {
59+
const wrapper = mount({
60+
render () {
61+
return (
62+
<Menu defaultOpenKeys={['1']} mode='vertical'>
63+
<SubMenu key='1' title='submenu1'>
64+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
65+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
66+
</SubMenu>
67+
<Menu.Item key='2'>menu2</Menu.Item>
68+
</Menu>
69+
)
70+
},
71+
}, { attachToDocument: true, sync: false })
72+
await asyncExpect(() => {
73+
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
74+
})
75+
})
76+
77+
// it('horizontal', () => {
78+
// const wrapper = mount({
79+
// render () {
80+
// return (
81+
// <Menu openKeys={['1']} mode='horizontal' openTransitionName=''>
82+
// <SubMenu key='1' title='submenu1'>
83+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
84+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
85+
// </SubMenu>
86+
// <Menu.Item key='2'>menu2</Menu.Item>
87+
// </Menu>
88+
// )
89+
// },
90+
// })
91+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
92+
// wrapper.setProps({ openKeys: [] })
93+
// wrapper.update()
94+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
95+
// wrapper.setProps({ openKeys: ['1'] })
96+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
97+
// })
98+
99+
// it('inline', () => {
100+
// const wrapper = mount({
101+
// render () {
102+
// return (
103+
// <Menu openKeys={['1']} mode='inline' openAnimation=''>
104+
// <SubMenu key='1' title='submenu1'>
105+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
106+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
107+
// </SubMenu>
108+
// <Menu.Item key='2'>menu2</Menu.Item>
109+
// </Menu>
110+
// )
111+
// },
112+
// })
113+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
114+
// wrapper.setProps({ openKeys: [] })
115+
// wrapper.update()
116+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
117+
// wrapper.setProps({ openKeys: ['1'] })
118+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
119+
// })
120+
121+
// it('vertical', () => {
122+
// const wrapper = mount({
123+
// render () {
124+
// return (
125+
// <Menu openKeys={['1']} mode='vertical' openTransitionName=''>
126+
// <SubMenu key='1' title='submenu1'>
127+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
128+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
129+
// </SubMenu>
130+
// <Menu.Item key='2'>menu2</Menu.Item>
131+
// </Menu>
132+
// )
133+
// },
134+
// })
135+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
136+
// wrapper.setProps({ openKeys: [] })
137+
// wrapper.update()
138+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
139+
// wrapper.setProps({ openKeys: ['1'] })
140+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
141+
// })
142+
143+
// // https://github.com/ant-design/ant-design/pulls/4677
144+
// // https://github.com/ant-design/ant-design/issues/4692
145+
// // TypeError: Cannot read property 'indexOf' of undefined
146+
// it('pr #4677 and issue #4692', () => {
147+
// const wrapper = mount({
148+
// render () {
149+
// return (
150+
// <Menu mode='horizontal'>
151+
// <SubMenu title='submenu'>
152+
// <Menu.Item key='1'>menu1</Menu.Item>
153+
// <Menu.Item key='2'>menu2</Menu.Item>
154+
// </SubMenu>
155+
// </Menu>
156+
// )
157+
// },
158+
// })
159+
// wrapper.update()
160+
// // just expect no error emit
161+
// })
162+
163+
// it('should always follow openKeys when mode is switched', () => {
164+
// const wrapper = mount({
165+
// render () {
166+
// return (
167+
// <Menu openKeys={['1']} mode='inline'>
168+
// <SubMenu key='1' title='submenu1'>
169+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
170+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
171+
// </SubMenu>
172+
// <Menu.Item key='2'>menu2</Menu.Item>
173+
// </Menu>
174+
// )
175+
// },
176+
// })
177+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true)
178+
// wrapper.setProps({ mode: 'vertical' })
179+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true)
180+
// wrapper.setProps({ mode: 'inline' })
181+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true)
182+
// })
183+
184+
// it('should always follow openKeys when mode is switched', () => {
185+
// const wrapper = mount({
186+
// render () {
187+
// return (
188+
// <Menu defaultOpenKeys={['1']} mode='inline'>
189+
// <Menu.Item key='menu1'>
190+
// <Icon type='inbox' />
191+
// <span>Option</span>
192+
// </Menu.Item>
193+
// <SubMenu key='1' title='submenu1'>
194+
// <Menu.Item key='submenu1'>
195+
// Option
196+
// </Menu.Item>
197+
// <Menu.Item key='submenu2'>
198+
// Option
199+
// </Menu.Item>
200+
// </SubMenu>
201+
// </Menu>
202+
// )
203+
// },
204+
// })
205+
206+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
207+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
208+
209+
// wrapper.setProps({ inlineCollapsed: true })
210+
// // 动画结束后套样式;
211+
// jest.runAllTimers()
212+
// wrapper.update()
213+
214+
// expect(wrapper.find('.ant-menu').at(0).hasClass('ant-menu-vertical')).toBe(true)
215+
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
216+
217+
// wrapper.setProps({ inlineCollapsed: false })
218+
// jest.runAllTimers()
219+
// wrapper.update()
220+
221+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true)
222+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
223+
// })
224+
225+
// it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
226+
// const wrapper = mount({
227+
// render () {
228+
// return (
229+
// <Menu defaultOpenKeys={['not-existed']} mode='inline'>
230+
// <Menu.Item key='menu1'>
231+
// <Icon type='inbox' />
232+
// <span>Option</span>
233+
// </Menu.Item>
234+
// <SubMenu key='1' title='submenu1'>
235+
// <Menu.Item key='submenu1'>
236+
// Option
237+
// </Menu.Item>
238+
// <Menu.Item key='submenu2'>
239+
// Option
240+
// </Menu.Item>
241+
// </SubMenu>
242+
// </Menu>
243+
// )
244+
// },
245+
// })
246+
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
247+
// wrapper.setProps({ inlineCollapsed: true })
248+
// jest.runAllTimers()
249+
// wrapper.update()
250+
// wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter')
251+
// jest.runAllTimers()
252+
// wrapper.update()
253+
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(true)
254+
// expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true)
255+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true)
256+
// expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false)
257+
// })
258+
259+
// describe('open submenu when click submenu title', () => {
260+
// beforeEach(() => {
261+
// jest.useFakeTimers()
262+
// })
263+
264+
// afterEach(() => {
265+
// jest.useRealTimers()
266+
// })
267+
268+
// const toggleMenu = (wrapper, index, event) => {
269+
// wrapper.find('.ant-menu-submenu-title').at(index).simulate(event)
270+
// jest.runAllTimers()
271+
// wrapper.update()
272+
// }
273+
274+
// it('inline', () => {
275+
// const wrapper = mount({
276+
// render () {
277+
// return (
278+
// <Menu mode='inline'>
279+
// <SubMenu key='1' title='submenu1'>
280+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
281+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
282+
// </SubMenu>
283+
// <Menu.Item key='2'>menu2</Menu.Item>
284+
// </Menu>
285+
// )
286+
// },
287+
// })
288+
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
289+
// toggleMenu(wrapper, 0, 'click')
290+
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
291+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
292+
// toggleMenu(wrapper, 0, 'click')
293+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
294+
// })
295+
296+
// it('vertical', () => {
297+
// const wrapper = mount({
298+
// render () {
299+
// return (
300+
// <Menu mode='vertical'>
301+
// <SubMenu key='1' title='submenu1'>
302+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
303+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
304+
// </SubMenu>
305+
// <Menu.Item key='2'>menu2</Menu.Item>
306+
// </Menu>
307+
// )
308+
// },
309+
// })
310+
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
311+
// toggleMenu(wrapper, 0, 'mouseenter')
312+
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
313+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
314+
// toggleMenu(wrapper, 0, 'mouseleave')
315+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
316+
// })
317+
318+
// it('horizontal', () => {
319+
// jest.useFakeTimers()
320+
// const wrapper = mount({
321+
// render () {
322+
// return (
323+
// <Menu mode='horizontal'>
324+
// <SubMenu key='1' title='submenu1'>
325+
// <Menu.Item key='submenu1'>Option 1</Menu.Item>
326+
// <Menu.Item key='submenu2'>Option 2</Menu.Item>
327+
// </SubMenu>
328+
// <Menu.Item key='2'>menu2</Menu.Item>
329+
// </Menu>
330+
// )
331+
// },
332+
// })
333+
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
334+
// toggleMenu(wrapper, 0, 'mouseenter')
335+
// expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1)
336+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(true)
337+
// toggleMenu(wrapper, 0, 'mouseleave')
338+
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
339+
// })
340+
// })
341+
})

0 commit comments

Comments
 (0)