Skip to content

Commit d12e0d9

Browse files
hunterliu1003hunterliu1003
committed
feat: unit test
1 parent 35b8c38 commit d12e0d9

File tree

2 files changed

+314
-54
lines changed

2 files changed

+314
-54
lines changed

‎tests/unit/VueFinalModal.spec.js

Lines changed: 230 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,9 @@
1-
import { createLocalVue, mount, enableAutoDestroy } from '@vue/test-utils'
1+
import { createLocalVue, enableAutoDestroy } from '@vue/test-utils'
2+
import { afterTransition, createOpenedModal, createClosedModal, initDynamicModal } from './utils'
23
import VueFinalModal from '../../lib'
34

45
enableAutoDestroy(afterEach)
56

6-
function createOpenedModal(propsData = {}, listeners = {}, mountingOptions = {}) {
7-
const localVue = createLocalVue()
8-
localVue.use(VueFinalModal())
9-
return new Promise(resolve => {
10-
const elem = document.createElement('div')
11-
if (document.body) {
12-
document.body.appendChild(elem)
13-
}
14-
const wrapper = mount(localVue.options.components.VueFinalModal, {
15-
stubs: false,
16-
localVue,
17-
propsData: {
18-
value: true,
19-
...propsData
20-
},
21-
listeners: {
22-
opened: () => resolve({ wrapper, localVue }),
23-
input: val => {
24-
wrapper.setProps({ value: val })
25-
},
26-
...listeners
27-
},
28-
attachTo: elem,
29-
...mountingOptions
30-
})
31-
})
32-
}
33-
function createClosedModal(propsData = {}, mountingOptions = {}) {
34-
const localVue = createLocalVue()
35-
localVue.use(VueFinalModal())
36-
return new Promise(resolve => {
37-
const wrapper = mount(localVue.options.components.VueFinalModal, {
38-
stubs: false,
39-
localVue,
40-
propsData: {
41-
value: false,
42-
...propsData
43-
},
44-
...mountingOptions
45-
})
46-
resolve({ wrapper, localVue })
47-
})
48-
}
49-
507
describe('VueFinalModal.vue', () => {
518
describe('default props', () => {
529
it('value', async () => {
@@ -68,18 +25,18 @@ describe('VueFinalModal.vue', () => {
6825
it('clickToClose: true', async done => {
6926
const { wrapper } = await createOpenedModal()
7027
wrapper.find('.vfm__container').trigger('click')
71-
setTimeout(() => {
28+
afterTransition(() => {
7229
expect(wrapper.find('.vfm').isVisible()).toBe(false)
7330
done()
74-
}, 200)
31+
})
7532
})
7633
it('escToClose: false', async done => {
7734
const { wrapper } = await createOpenedModal()
7835
wrapper.find('.vfm__container').trigger('keydown.esc')
79-
setTimeout(() => {
36+
afterTransition(() => {
8037
expect(wrapper.find('.vfm').isVisible()).toBe(true)
8138
done()
82-
}, 200)
39+
})
8340
})
8441
it('preventClick: false', async () => {
8542
const { wrapper } = await createOpenedModal()
@@ -157,20 +114,20 @@ describe('VueFinalModal.vue', () => {
157114
clickToClose: false
158115
})
159116
wrapper.find('.vfm__container').trigger('click')
160-
setTimeout(() => {
117+
afterTransition(() => {
161118
expect(wrapper.find('.vfm').isVisible()).toBe(true)
162119
done()
163-
}, 200)
120+
})
164121
})
165122
it('escToClose: false', async done => {
166123
const { wrapper } = await createOpenedModal({
167124
escToClose: true
168125
})
169126
wrapper.find('.vfm__container').trigger('keydown.esc')
170-
setTimeout(() => {
127+
afterTransition(() => {
171128
expect(wrapper.find('.vfm').isVisible()).toBe(false)
172129
done()
173-
}, 200)
130+
})
174131
})
175132
it('preventClick: true', async () => {
176133
const { wrapper } = await createOpenedModal({
@@ -187,17 +144,31 @@ describe('VueFinalModal.vue', () => {
187144
})
188145
expect(wrapper.vm.$el.parentNode === elem).toBe(true)
189146
})
147+
it('attach: querySelector', async () => {
148+
const elem = document.createElement('div')
149+
elem.className = 'attach-to-here'
150+
document.body.appendChild(elem)
151+
const { wrapper } = await createOpenedModal({
152+
attach: '.attach-to-here'
153+
})
154+
expect(wrapper.vm.$el.parentNode === elem).toBe(true)
155+
})
190156
it('focusRetain: false', async () => {
191157
const { wrapper } = await createOpenedModal({
192158
focusRetain: false
193159
})
194160
expect(document.activeElement === wrapper.find('.vfm__container').vm.$el).toBe(false)
195161
})
196-
it('focusTrap: true', async () => {
162+
it('focusTrap: true', async done => {
197163
const { wrapper } = await createOpenedModal({
198164
focusTrap: true
199165
})
200166
expect(document.activeElement === wrapper.find('.vfm__container').vm.$el).toBe(true)
167+
wrapper.setProps({ value: false })
168+
afterTransition(() => {
169+
expect(wrapper.find('.vfm').isVisible()).toBe(false)
170+
done()
171+
})
201172
})
202173
it('zIndexAuto', async () => {
203174
const { wrapper } = await createOpenedModal({
@@ -222,4 +193,209 @@ describe('VueFinalModal.vue', () => {
222193
expect(wrapper.attributes('style')).toContain(zIndexStyle)
223194
})
224195
})
196+
197+
describe('API', () => {
198+
it('show static modal', async done => {
199+
const { wrapper, $vfm } = await createClosedModal({
200+
name: 'testModal'
201+
})
202+
$vfm.show('testModal')
203+
afterTransition(() => {
204+
expect(wrapper.find('.vfm').isVisible()).toBe(true)
205+
done()
206+
})
207+
})
208+
it('show dynamic modal', async done => {
209+
const { wrapper, $vfm } = await initDynamicModal()
210+
const dynamicOptions = {}
211+
$vfm.show(dynamicOptions)
212+
afterTransition(() => {
213+
expect(wrapper.find('.vfm').exists()).toBe(true)
214+
done()
215+
})
216+
})
217+
it('hide modal', async done => {
218+
const { wrapper, $vfm } = await createOpenedModal({
219+
name: 'testModal'
220+
})
221+
$vfm.hide('testModal')
222+
afterTransition(() => {
223+
expect(wrapper.find('.vfm').isVisible()).toBe(false)
224+
done()
225+
})
226+
})
227+
it('hide modals', async done => {
228+
const { wrapper, $vfm } = await initDynamicModal()
229+
$vfm.show({ bind: { name: 'modal1' } })
230+
$vfm.show({ bind: { name: 'modal2' } })
231+
afterTransition(() => {
232+
$vfm.hide('modal1', 'modal2')
233+
afterTransition(() => {
234+
expect(wrapper.find('.vfm').exists()).toBe(false)
235+
done()
236+
})
237+
})
238+
})
239+
it('hide all modals', async done => {
240+
const { wrapper, $vfm } = await initDynamicModal()
241+
$vfm.show({ bind: { name: 'modal1' } })
242+
$vfm.show({ bind: { name: 'modal2' } })
243+
afterTransition(() => {
244+
$vfm.hideAll()
245+
afterTransition(() => {
246+
expect(wrapper.find('.vfm').exists()).toBe(false)
247+
done()
248+
})
249+
})
250+
})
251+
it('toggle opened modal', async done => {
252+
const { wrapper, $vfm } = await createOpenedModal({
253+
name: 'testModal'
254+
})
255+
$vfm.toggle('testModal', false)
256+
afterTransition(() => {
257+
expect(wrapper.find('.vfm').isVisible()).toBe(false)
258+
done()
259+
})
260+
})
261+
it('toggle closed modal', async done => {
262+
const { wrapper, $vfm } = await createClosedModal({
263+
name: 'testModal'
264+
})
265+
$vfm.toggle('testModal', true)
266+
afterTransition(() => {
267+
expect(wrapper.find('.vfm').isVisible()).toBe(true)
268+
done()
269+
})
270+
})
271+
it('toggle dynamic modal', async done => {
272+
const { wrapper, $vfm } = await initDynamicModal()
273+
$vfm.show({ bind: { name: 'testModal' } })
274+
afterTransition(() => {
275+
$vfm.toggle('testModal')
276+
afterTransition(() => {
277+
expect(wrapper.find('.vfm').exists()).toBe(false)
278+
done()
279+
})
280+
})
281+
})
282+
it('get modals', async done => {
283+
const { $vfm } = await initDynamicModal()
284+
$vfm.show({ bind: { name: 'testModal1' } })
285+
$vfm.show({ bind: { name: 'testModal2' } })
286+
afterTransition(() => {
287+
expect($vfm.get('testModal1').length).toBe(1)
288+
done()
289+
})
290+
})
291+
})
292+
293+
describe('events', () => {
294+
it('all events', async done => {
295+
const clickOutside = jest.fn()
296+
const beforeOpen = jest.fn()
297+
const opened = jest.fn()
298+
const beforeClose = jest.fn()
299+
const closed = jest.fn()
300+
301+
const { wrapper } = await createOpenedModal(
302+
{},
303+
{
304+
'click-outside'() {
305+
clickOutside()
306+
},
307+
'before-open'() {
308+
beforeOpen()
309+
},
310+
opened() {
311+
opened()
312+
},
313+
'before-close'() {
314+
beforeClose()
315+
},
316+
closed() {
317+
closed()
318+
}
319+
}
320+
)
321+
wrapper.find('.vfm__container').trigger('click')
322+
afterTransition(() => {
323+
expect(clickOutside).toHaveBeenCalled()
324+
expect(beforeOpen).toHaveBeenCalled()
325+
expect(opened).toHaveBeenCalled()
326+
expect(beforeClose).toHaveBeenCalled()
327+
expect(closed).toHaveBeenCalled()
328+
done()
329+
})
330+
})
331+
332+
it('stop beforeOpen', async done => {
333+
const { wrapper } = await createClosedModal(
334+
{},
335+
{
336+
'before-open'(event) {
337+
event.stop()
338+
}
339+
}
340+
)
341+
wrapper.setProps({ value: true })
342+
afterTransition(() => {
343+
expect(wrapper.find('.vfm').isVisible()).toBe(false)
344+
done()
345+
})
346+
})
347+
348+
it('stop beforeClose', async done => {
349+
const { wrapper } = await createOpenedModal(
350+
{},
351+
{
352+
'before-close'(event) {
353+
event.stop()
354+
}
355+
}
356+
)
357+
wrapper.setProps({ value: false })
358+
afterTransition(() => {
359+
expect(wrapper.find('.vfm').isVisible()).toBe(true)
360+
done()
361+
})
362+
})
363+
364+
it('avoid modal reset params after modal was closed', async done => {
365+
const { wrapper, $vfm } = await createClosedModal(
366+
{
367+
name: 'testModal'
368+
},
369+
{
370+
closed(event) {
371+
event.stop()
372+
}
373+
}
374+
)
375+
const params = {
376+
test: 123
377+
}
378+
$vfm.show('testModal', params)
379+
afterTransition(() => {
380+
$vfm.hide('testModal')
381+
afterTransition(() => {
382+
expect(wrapper.vm.params === params).toBe(true)
383+
done()
384+
})
385+
})
386+
})
387+
})
388+
389+
describe('Plugin', () => {
390+
it('Register multiple plugins', async done => {
391+
const localVue = createLocalVue()
392+
localVue.use(VueFinalModal())
393+
localVue.use(VueFinalModal(), {
394+
componentName: 'VueFinalTest',
395+
dynamicContainerName: 'TestContainer',
396+
key: '$vtm'
397+
})
398+
done()
399+
})
400+
})
225401
})

0 commit comments

Comments
 (0)