Skip to content

Commit 1bf98b0

Browse files
yyx990803yyx990803
committedJul 12, 2017
test: adjust transition tests for firefox
·
v2.7.16v2.4.0
1 parent 606666d commit 1bf98b0

File tree

2 files changed

+181
-181
lines changed

2 files changed

+181
-181
lines changed
 

Diff for: ‎test/unit/features/transition/transition-mode.spec.js

+181
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,187 @@ if (!isIE9) {
378378
}).then(done)
379379
})
380380

381+
it('transition out-in on async component (resolve before leave complete)', done => {
382+
const vm = new Vue({
383+
template: `
384+
<div>
385+
<transition name="test-anim" mode="out-in">
386+
<component-a v-if="ok"></component-a>
387+
<component-b v-else></component-b>
388+
</transition>
389+
</div>
390+
`,
391+
components: {
392+
componentA: resolve => {
393+
setTimeout(() => {
394+
resolve({ template: '<div><h1>component A</h1></div>' })
395+
next1()
396+
}, duration / 2)
397+
},
398+
componentB: resolve => {
399+
setTimeout(() => {
400+
resolve({ template: '<div><h1>component B</h1></div>' })
401+
}, duration / 2)
402+
}
403+
},
404+
data: {
405+
ok: true
406+
}
407+
}).$mount(el)
408+
409+
expect(vm.$el.innerHTML).toBe('<!---->')
410+
411+
function next1 () {
412+
Vue.nextTick(() => {
413+
expect(vm.$el.children.length).toBe(1)
414+
expect(vm.$el.textContent).toBe('component A')
415+
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
416+
nextFrame(() => {
417+
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
418+
setTimeout(() => {
419+
expect(vm.$el.children[0].className).toBe('')
420+
vm.ok = false
421+
next2()
422+
}, duration + buffer)
423+
})
424+
})
425+
}
426+
427+
function next2 () {
428+
waitForUpdate(() => {
429+
expect(vm.$el.children.length).toBe(1)
430+
expect(vm.$el.textContent).toBe('component A')
431+
expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
432+
}).thenWaitFor(nextFrame).then(() => {
433+
expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')
434+
}).thenWaitFor(duration + buffer).then(() => {
435+
expect(vm.$el.children.length).toBe(1)
436+
expect(vm.$el.textContent).toBe('component B')
437+
expect(vm.$el.children[0].className).toMatch('test-anim-enter-active')
438+
}).thenWaitFor(duration * 2).then(() => {
439+
expect(vm.$el.children[0].className).toBe('')
440+
}).then(done)
441+
}
442+
})
443+
444+
it('transition out-in on async component (resolve after leave complete)', done => {
445+
const vm = new Vue({
446+
template: `
447+
<div>
448+
<transition name="test-anim" mode="out-in">
449+
<component-a v-if="ok"></component-a>
450+
<component-b v-else></component-b>
451+
</transition>
452+
</div>
453+
`,
454+
components: {
455+
componentA: { template: '<div><h1>component A</h1></div>' },
456+
componentB: resolve => {
457+
setTimeout(() => {
458+
resolve({ template: '<div><h1>component B</h1></div>' })
459+
Vue.nextTick(next)
460+
}, (duration + buffer) * 1.5)
461+
}
462+
},
463+
data: {
464+
ok: true
465+
}
466+
}).$mount(el)
467+
468+
expect(vm.$el.innerHTML).toBe('<div><h1>component A</h1></div>')
469+
470+
let next
471+
472+
vm.ok = false
473+
waitForUpdate(() => {
474+
expect(vm.$el.children.length).toBe(1)
475+
expect(vm.$el.textContent).toBe('component A')
476+
expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
477+
}).thenWaitFor(nextFrame).then(() => {
478+
expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')
479+
}).thenWaitFor(duration + buffer).then(() => {
480+
expect(vm.$el.children.length).toBe(0)
481+
expect(vm.$el.innerHTML).toBe('<!---->')
482+
}).thenWaitFor(_next => { next = _next }).then(() => {
483+
expect(vm.$el.children.length).toBe(1)
484+
expect(vm.$el.textContent).toBe('component B')
485+
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
486+
}).thenWaitFor(nextFrame).then(() => {
487+
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
488+
}).thenWaitFor(duration + buffer).then(() => {
489+
expect(vm.$el.children.length).toBe(1)
490+
expect(vm.$el.textContent).toBe('component B')
491+
expect(vm.$el.children[0].className).toBe('')
492+
}).then(done)
493+
})
494+
495+
it('transition in-out on async component', done => {
496+
const vm = new Vue({
497+
template: `
498+
<div>
499+
<transition name="test-anim" mode="in-out">
500+
<component-a v-if="ok"></component-a>
501+
<component-b v-else></component-b>
502+
</transition>
503+
</div>
504+
`,
505+
components: {
506+
componentA: resolve => {
507+
setTimeout(() => {
508+
resolve({ template: '<div><h1>component A</h1></div>' })
509+
next1()
510+
}, duration / 2)
511+
},
512+
componentB: resolve => {
513+
setTimeout(() => {
514+
resolve({ template: '<div><h1>component B</h1></div>' })
515+
next2()
516+
}, duration / 2)
517+
}
518+
},
519+
data: {
520+
ok: true
521+
}
522+
}).$mount(el)
523+
524+
expect(vm.$el.innerHTML).toBe('<!---->')
525+
526+
function next1 () {
527+
Vue.nextTick(() => {
528+
expect(vm.$el.children.length).toBe(1)
529+
expect(vm.$el.textContent).toBe('component A')
530+
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
531+
nextFrame(() => {
532+
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
533+
setTimeout(() => {
534+
expect(vm.$el.children[0].className).toBe('')
535+
vm.ok = false
536+
}, duration + buffer)
537+
})
538+
})
539+
}
540+
541+
function next2 () {
542+
waitForUpdate(() => {
543+
expect(vm.$el.children.length).toBe(2)
544+
expect(vm.$el.textContent).toBe('component Acomponent B')
545+
expect(vm.$el.children[0].className).toBe('')
546+
expect(vm.$el.children[1].className).toBe('test-anim-enter test-anim-enter-active')
547+
}).thenWaitFor(nextFrame).then(() => {
548+
expect(vm.$el.children[1].className).toBe('test-anim-enter-active test-anim-enter-to')
549+
}).thenWaitFor(duration + buffer).then(() => {
550+
expect(vm.$el.children.length).toBe(2)
551+
expect(vm.$el.textContent).toBe('component Acomponent B')
552+
expect(vm.$el.children[0].className).toMatch('test-anim-leave-active')
553+
expect(vm.$el.children[1].className).toBe('')
554+
}).thenWaitFor(duration + buffer).then(() => {
555+
expect(vm.$el.children.length).toBe(1)
556+
expect(vm.$el.textContent).toBe('component B')
557+
expect(vm.$el.children[0].className).toBe('')
558+
}).then(done)
559+
}
560+
})
561+
381562
it('warn invalid mode', () => {
382563
new Vue({
383564
template: '<transition mode="foo"><div>123</div></transition>'

Diff for: ‎test/unit/features/transition/transition.spec.js

-181
Original file line numberDiff line numberDiff line change
@@ -877,187 +877,6 @@ if (!isIE9) {
877877
expect(`<transition> can only be used on a single element`).toHaveBeenWarned()
878878
})
879879

880-
it('transition out-in on async component (resolve before leave complete)', done => {
881-
const vm = new Vue({
882-
template: `
883-
<div>
884-
<transition name="test-anim" mode="out-in">
885-
<component-a v-if="ok"></component-a>
886-
<component-b v-else></component-b>
887-
</transition>
888-
</div>
889-
`,
890-
components: {
891-
componentA: resolve => {
892-
setTimeout(() => {
893-
resolve({ template: '<div><h1>component A</h1></div>' })
894-
next1()
895-
}, duration / 2)
896-
},
897-
componentB: resolve => {
898-
setTimeout(() => {
899-
resolve({ template: '<div><h1>component B</h1></div>' })
900-
}, duration / 2)
901-
}
902-
},
903-
data: {
904-
ok: true
905-
}
906-
}).$mount(el)
907-
908-
expect(vm.$el.innerHTML).toBe('<!---->')
909-
910-
function next1 () {
911-
Vue.nextTick(() => {
912-
expect(vm.$el.children.length).toBe(1)
913-
expect(vm.$el.textContent).toBe('component A')
914-
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
915-
nextFrame(() => {
916-
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
917-
setTimeout(() => {
918-
expect(vm.$el.children[0].className).toBe('')
919-
vm.ok = false
920-
next2()
921-
}, duration + buffer)
922-
})
923-
})
924-
}
925-
926-
function next2 () {
927-
waitForUpdate(() => {
928-
expect(vm.$el.children.length).toBe(1)
929-
expect(vm.$el.textContent).toBe('component A')
930-
expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
931-
}).thenWaitFor(nextFrame).then(() => {
932-
expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')
933-
}).thenWaitFor(duration + buffer).then(() => {
934-
expect(vm.$el.children.length).toBe(1)
935-
expect(vm.$el.textContent).toBe('component B')
936-
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
937-
}).thenWaitFor(duration + buffer).then(() => {
938-
expect(vm.$el.children[0].className).toBe('')
939-
}).then(done)
940-
}
941-
})
942-
943-
it('transition out-in on async component (resolve after leave complete)', done => {
944-
const vm = new Vue({
945-
template: `
946-
<div>
947-
<transition name="test-anim" mode="out-in">
948-
<component-a v-if="ok"></component-a>
949-
<component-b v-else></component-b>
950-
</transition>
951-
</div>
952-
`,
953-
components: {
954-
componentA: { template: '<div><h1>component A</h1></div>' },
955-
componentB: resolve => {
956-
setTimeout(() => {
957-
resolve({ template: '<div><h1>component B</h1></div>' })
958-
Vue.nextTick(next)
959-
}, (duration + buffer) * 1.5)
960-
}
961-
},
962-
data: {
963-
ok: true
964-
}
965-
}).$mount(el)
966-
967-
expect(vm.$el.innerHTML).toBe('<div><h1>component A</h1></div>')
968-
969-
let next
970-
971-
vm.ok = false
972-
waitForUpdate(() => {
973-
expect(vm.$el.children.length).toBe(1)
974-
expect(vm.$el.textContent).toBe('component A')
975-
expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
976-
}).thenWaitFor(nextFrame).then(() => {
977-
expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')
978-
}).thenWaitFor(duration + buffer).then(() => {
979-
expect(vm.$el.children.length).toBe(0)
980-
expect(vm.$el.innerHTML).toBe('<!---->')
981-
}).thenWaitFor(_next => { next = _next }).then(() => {
982-
expect(vm.$el.children.length).toBe(1)
983-
expect(vm.$el.textContent).toBe('component B')
984-
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
985-
}).thenWaitFor(nextFrame).then(() => {
986-
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
987-
}).thenWaitFor(duration + buffer).then(() => {
988-
expect(vm.$el.children.length).toBe(1)
989-
expect(vm.$el.textContent).toBe('component B')
990-
expect(vm.$el.children[0].className).toBe('')
991-
}).then(done)
992-
})
993-
994-
it('transition in-out on async component', done => {
995-
const vm = new Vue({
996-
template: `
997-
<div>
998-
<transition name="test-anim" mode="in-out">
999-
<component-a v-if="ok"></component-a>
1000-
<component-b v-else></component-b>
1001-
</transition>
1002-
</div>
1003-
`,
1004-
components: {
1005-
componentA: resolve => {
1006-
setTimeout(() => {
1007-
resolve({ template: '<div><h1>component A</h1></div>' })
1008-
next1()
1009-
}, duration / 2)
1010-
},
1011-
componentB: resolve => {
1012-
setTimeout(() => {
1013-
resolve({ template: '<div><h1>component B</h1></div>' })
1014-
next2()
1015-
}, duration / 2)
1016-
}
1017-
},
1018-
data: {
1019-
ok: true
1020-
}
1021-
}).$mount(el)
1022-
1023-
expect(vm.$el.innerHTML).toBe('<!---->')
1024-
1025-
function next1 () {
1026-
Vue.nextTick(() => {
1027-
expect(vm.$el.children.length).toBe(1)
1028-
expect(vm.$el.textContent).toBe('component A')
1029-
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
1030-
nextFrame(() => {
1031-
expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')
1032-
setTimeout(() => {
1033-
expect(vm.$el.children[0].className).toBe('')
1034-
vm.ok = false
1035-
}, duration + buffer)
1036-
})
1037-
})
1038-
}
1039-
1040-
function next2 () {
1041-
waitForUpdate(() => {
1042-
expect(vm.$el.children.length).toBe(2)
1043-
expect(vm.$el.textContent).toBe('component Acomponent B')
1044-
expect(vm.$el.children[0].className).toBe('')
1045-
expect(vm.$el.children[1].className).toBe('test-anim-enter test-anim-enter-active')
1046-
}).thenWaitFor(nextFrame).then(() => {
1047-
expect(vm.$el.children[1].className).toBe('test-anim-enter-active test-anim-enter-to')
1048-
}).thenWaitFor(duration + buffer).then(() => {
1049-
expect(vm.$el.children.length).toBe(2)
1050-
expect(vm.$el.textContent).toBe('component Acomponent B')
1051-
expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')
1052-
expect(vm.$el.children[1].className).toBe('')
1053-
}).thenWaitFor(duration + buffer).then(() => {
1054-
expect(vm.$el.children.length).toBe(1)
1055-
expect(vm.$el.textContent).toBe('component B')
1056-
expect(vm.$el.children[0].className).toBe('')
1057-
}).then(done)
1058-
}
1059-
})
1060-
1061880
describe('explicit durations -', () => {
1062881
it('single value', done => {
1063882
const vm = new Vue({

0 commit comments

Comments
 (0)
Please sign in to comment.