@@ -1141,6 +1141,83 @@ describe('e2e: Transition', () => {
1141
1141
1142
1142
test (
1143
1143
'transition on child components with empty root node' ,
1144
+ async ( ) => {
1145
+ await page ( ) . evaluate ( ( ) => {
1146
+ const { createApp, ref } = ( window as any ) . Vue
1147
+ createApp ( {
1148
+ template : `
1149
+ <div id="container">
1150
+ <transition name="test">
1151
+ <component class="test" :is="view"></component>
1152
+ </transition>
1153
+ </div>
1154
+ <button id="toggleBtn" @click="click">button</button>
1155
+ <button id="changeViewBtn" @click="change">button</button>
1156
+ ` ,
1157
+ components : {
1158
+ one : {
1159
+ template : '<div v-if="false">one</div>'
1160
+ } ,
1161
+ two : {
1162
+ template : '<div>two</div>'
1163
+ }
1164
+ } ,
1165
+ setup : ( ) => {
1166
+ const toggle = ref ( true )
1167
+ const view = ref ( 'one' )
1168
+ const click = ( ) => ( toggle . value = ! toggle . value )
1169
+ const change = ( ) =>
1170
+ ( view . value = view . value === 'one' ? 'two' : 'one' )
1171
+ return { toggle, click, change, view }
1172
+ }
1173
+ } ) . mount ( '#app' )
1174
+ } )
1175
+ expect ( await html ( '#container' ) ) . toBe ( '<!--v-if-->' )
1176
+
1177
+ // change view -> 'two'
1178
+ await page ( ) . evaluate ( ( ) => {
1179
+ ; ( document . querySelector ( '#changeViewBtn' ) as any ) ! . click ( )
1180
+ } )
1181
+ // enter
1182
+ expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
1183
+ 'test' ,
1184
+ 'test-enter-from' ,
1185
+ 'test-enter-active'
1186
+ ] )
1187
+ await nextFrame ( )
1188
+ expect ( await classList ( '.test' ) ) . toStrictEqual ( [
1189
+ 'test' ,
1190
+ 'test-enter-active' ,
1191
+ 'test-enter-to'
1192
+ ] )
1193
+ await transitionFinish ( )
1194
+ expect ( await html ( '#container' ) ) . toBe ( '<div class="test">two</div>' )
1195
+
1196
+ // change view -> 'one'
1197
+ await page ( ) . evaluate ( ( ) => {
1198
+ ; ( document . querySelector ( '#changeViewBtn' ) as any ) ! . click ( )
1199
+ } )
1200
+ // leave
1201
+ expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
1202
+ 'test' ,
1203
+ 'test-leave-from' ,
1204
+ 'test-leave-active'
1205
+ ] )
1206
+ await nextFrame ( )
1207
+ expect ( await classList ( '.test' ) ) . toStrictEqual ( [
1208
+ 'test' ,
1209
+ 'test-leave-active' ,
1210
+ 'test-leave-to'
1211
+ ] )
1212
+ await transitionFinish ( )
1213
+ expect ( await html ( '#container' ) ) . toBe ( '<!--v-if-->' )
1214
+ } ,
1215
+ E2E_TIMEOUT
1216
+ )
1217
+
1218
+ // issue https://github.com/vuejs/core/issues/7649
1219
+ test (
1220
+ 'transition with v-if at component root-level' ,
1144
1221
async ( ) => {
1145
1222
await page ( ) . evaluate ( ( ) => {
1146
1223
const { createApp, ref } = ( window as any ) . Vue
0 commit comments