Skip to content

Commit 67042c9

Browse files
tangjinzhoutangjinzhou
committed
test: update menu test
1 parent be1cead commit 67042c9

File tree

1 file changed

+163
-111
lines changed

1 file changed

+163
-111
lines changed

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

Lines changed: 163 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('Menu', () => {
3232
},
3333
}, { attachToDocument: true, sync: false })
3434
await asyncExpect(() => {
35-
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
35+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
3636
})
3737
})
3838

@@ -51,7 +51,7 @@ describe('Menu', () => {
5151
},
5252
}, { attachToDocument: true, sync: false })
5353
await asyncExpect(() => {
54-
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
54+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
5555
})
5656
})
5757

@@ -70,116 +70,168 @@ describe('Menu', () => {
7070
},
7171
}, { attachToDocument: true, sync: false })
7272
await asyncExpect(() => {
73-
expect($$('.ant-menu-sub')[0].className).not.toContain('ant-menu-hidden')
73+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
7474
})
7575
})
7676

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-
// })
77+
it('horizontal', async () => {
78+
const wrapper = mount({
79+
props: {
80+
openKeys: {
81+
type: Array,
82+
default: function () {
83+
return ['1']
84+
},
85+
},
86+
},
87+
render () {
88+
return (
89+
<Menu openKeys={this.openKeys} mode='horizontal' openTransitionName=''>
90+
<SubMenu key='1' title='submenu1'>
91+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
92+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
93+
</SubMenu>
94+
<Menu.Item key='2'>menu2</Menu.Item>
95+
</Menu>
96+
)
97+
},
98+
}, { attachToDocument: true, sync: false })
99+
await asyncExpect(() => {
100+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
101+
})
102+
wrapper.setProps({ openKeys: [] })
103+
await asyncExpect(() => {
104+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
105+
})
98106

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-
// })
107+
wrapper.setProps({ openKeys: ['1'] })
108+
await asyncExpect(() => {
109+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
110+
})
111+
})
120112

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-
// })
113+
it('inline', async () => {
114+
const wrapper = mount({
115+
props: {
116+
openKeys: {
117+
type: Array,
118+
default: function () {
119+
return ['1']
120+
},
121+
},
122+
},
123+
render () {
124+
return (
125+
<Menu openKeys={this.openKeys} mode='inline' openAnimation=''>
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+
}, { attachToDocument: true, sync: false })
135+
await asyncExpect(() => {
136+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
137+
})
138+
wrapper.setProps({ openKeys: [] })
139+
await asyncExpect(() => {
140+
expect($$('.ant-menu-sub')[0].style.display).toBe('none')
141+
})
142+
wrapper.setProps({ openKeys: ['1'] })
143+
await asyncExpect(() => {
144+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
145+
})
146+
})
142147

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-
// })
148+
it('vertical', async () => {
149+
const wrapper = mount({
150+
props: {
151+
openKeys: {
152+
type: Array,
153+
default: function () {
154+
return ['1']
155+
},
156+
},
157+
},
158+
render () {
159+
return (
160+
<Menu openKeys={this.openKeys} mode='vertical' openTransitionName=''>
161+
<SubMenu key='1' title='submenu1'>
162+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
163+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
164+
</SubMenu>
165+
<Menu.Item key='2'>menu2</Menu.Item>
166+
</Menu>
167+
)
168+
},
169+
}, { attachToDocument: true, sync: false })
170+
await asyncExpect(() => {
171+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
172+
})
173+
wrapper.setProps({ openKeys: [] })
174+
await asyncExpect(() => {
175+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
176+
})
177+
wrapper.setProps({ openKeys: ['1'] })
178+
await asyncExpect(() => {
179+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
180+
})
181+
})
162182

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+
// https://github.com/ant-design/ant-design/pulls/4677
184+
// https://github.com/ant-design/ant-design/issues/4692
185+
// TypeError: Cannot read property 'indexOf' of undefined
186+
it('pr #4677 and issue #4692', () => {
187+
const wrapper = mount({
188+
render () {
189+
return (
190+
<Menu mode='horizontal'>
191+
<SubMenu title='submenu'>
192+
<Menu.Item key='1'>menu1</Menu.Item>
193+
<Menu.Item key='2'>menu2</Menu.Item>
194+
</SubMenu>
195+
</Menu>
196+
)
197+
},
198+
}, { attachToDocument: true, sync: false })
199+
wrapper.vm.$forceUpdate()
200+
// just expect no error emit
201+
})
202+
203+
it('should always follow openKeys when mode is switched', async () => {
204+
const wrapper = mount({
205+
props: {
206+
mode: {
207+
type: String,
208+
default: 'inline',
209+
},
210+
},
211+
render () {
212+
return (
213+
<Menu openKeys={['1']} mode={this.mode}>
214+
<SubMenu key='1' title='submenu1'>
215+
<Menu.Item key='submenu1'>Option 1</Menu.Item>
216+
<Menu.Item key='submenu2'>Option 2</Menu.Item>
217+
</SubMenu>
218+
<Menu.Item key='2'>menu2</Menu.Item>
219+
</Menu>
220+
)
221+
},
222+
}, { attachToDocument: true, sync: false })
223+
await asyncExpect(() => {
224+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
225+
})
226+
wrapper.setProps({ mode: 'vertical' })
227+
await asyncExpect(() => {
228+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
229+
}, 0)
230+
wrapper.setProps({ mode: 'inline' })
231+
await asyncExpect(() => {
232+
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
233+
}, 0)
234+
})
183235

184236
// it('should always follow openKeys when mode is switched', () => {
185237
// const wrapper = mount({
@@ -288,9 +340,9 @@ describe('Menu', () => {
288340
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
289341
// toggleMenu(wrapper, 0, 'click')
290342
// 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)
343+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
292344
// toggleMenu(wrapper, 0, 'click')
293-
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
345+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
294346
// })
295347

296348
// it('vertical', () => {
@@ -310,9 +362,9 @@ describe('Menu', () => {
310362
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
311363
// toggleMenu(wrapper, 0, 'mouseenter')
312364
// 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)
365+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
314366
// toggleMenu(wrapper, 0, 'mouseleave')
315-
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
367+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
316368
// })
317369

318370
// it('horizontal', () => {
@@ -333,9 +385,9 @@ describe('Menu', () => {
333385
// expect(wrapper.find('.ant-menu-sub').length).toBe(0)
334386
// toggleMenu(wrapper, 0, 'mouseenter')
335387
// 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)
388+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
337389
// toggleMenu(wrapper, 0, 'mouseleave')
338-
// expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true)
390+
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
339391
// })
340392
// })
341393
})

0 commit comments

Comments
 (0)