@@ -877,6 +877,187 @@ 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+
8801061 describe ( 'explicit durations -' , ( ) => {
8811062 it ( 'single value' , done => {
8821063 const vm = new Vue ( {
0 commit comments