@@ -2311,89 +2311,88 @@ describe('e2e: Transition', () => {
2311
2311
} ,
2312
2312
E2E_TIMEOUT ,
2313
2313
) ,
2314
- test (
2315
- 'apply transition to teleport component child' ,
2316
- async ( ) => {
2317
- await page ( ) . evaluate ( ( ) => {
2318
- const { createApp, ref, h } = ( window as any ) . Vue
2319
- createApp ( {
2320
- template : `
2314
+ test (
2315
+ 'apply transition to teleport component child' ,
2316
+ async ( ) => {
2317
+ await page ( ) . evaluate ( ( ) => {
2318
+ const { createApp, ref, h } = ( window as any ) . Vue
2319
+ createApp ( {
2320
+ template : `
2321
2321
<div id="target"></div>
2322
2322
<div id="container">
2323
2323
<transition>
2324
- <Comp v-if="toggle" >content </Comp>
2324
+ <Comp v-if="toggle"> </Comp>
2325
2325
</transition>
2326
2326
</div>
2327
2327
<button id="toggleBtn" @click="click">button</button>
2328
2328
` ,
2329
- components : {
2330
- Comp : {
2331
- setup ( ) {
2332
- return ( ) => h ( Teleport , { to : '#target' } , [ h ( 'div' , { class : 'test' } , 'content' ) ] )
2329
+ components : {
2330
+ Comp : {
2331
+ setup ( ) {
2332
+ return ( ) =>
2333
+ h (
2334
+ Teleport ,
2335
+ { to : '#target' } ,
2336
+ h ( 'div' , { class : 'test' } , 'content' ) ,
2337
+ )
2338
+ } ,
2333
2339
} ,
2334
2340
} ,
2335
- } ,
2336
- setup : ( ) => {
2337
- const toggle = ref ( false )
2338
- const click = ( ) => ( toggle . value = ! toggle . value )
2339
- return { toggle, click }
2340
- } ,
2341
- } ) . mount ( '#app' )
2342
- } )
2343
-
2344
- expect ( await html ( '#target' ) ) . toBe ( '' )
2345
- expect ( await html ( '#container' ) ) . toBe (
2346
- '<!--v-if-->' ,
2347
- )
2348
-
2349
- const classWhenTransitionStart = ( ) =>
2350
- page ( ) . evaluate ( ( ) => {
2351
- ; ( document . querySelector ( '#toggleBtn' ) as any ) ! . click ( )
2352
- return Promise . resolve ( ) . then ( ( ) => {
2353
- // find the class of teleported node
2354
- return document
2355
- . querySelector ( '#target div' ) !
2356
- . className . split ( / \s + / g)
2357
- } )
2341
+ setup : ( ) => {
2342
+ const toggle = ref ( false )
2343
+ const click = ( ) => ( toggle . value = ! toggle . value )
2344
+ return { toggle, click }
2345
+ } ,
2346
+ } ) . mount ( '#app' )
2358
2347
} )
2359
2348
2360
- // enter
2361
- expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
2362
- 'test' ,
2363
- 'v-enter-from' ,
2364
- 'v-enter-active' ,
2365
- ] )
2366
- await nextFrame ( )
2367
- expect ( await classList ( '.test' ) ) . toStrictEqual ( [
2368
- 'test' ,
2369
- 'v-enter-active' ,
2370
- 'v-enter-to' ,
2371
- ] )
2372
- await transitionFinish ( )
2373
- expect ( await html ( '#target' ) ) . toBe (
2374
- '<div class="test">content</div>' ,
2375
- )
2349
+ expect ( await html ( '#target' ) ) . toBe ( '' )
2350
+ expect ( await html ( '#container' ) ) . toBe ( '<!--v-if-->' )
2351
+
2352
+ const classWhenTransitionStart = ( ) =>
2353
+ page ( ) . evaluate ( ( ) => {
2354
+ ; ( document . querySelector ( '#toggleBtn' ) as any ) ! . click ( )
2355
+ return Promise . resolve ( ) . then ( ( ) => {
2356
+ // find the class of teleported node
2357
+ return document
2358
+ . querySelector ( '#target div' ) !
2359
+ . className . split ( / \s + / g)
2360
+ } )
2361
+ } )
2376
2362
2377
- // leave
2378
- expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
2379
- 'test' ,
2380
- 'v-leave-from' ,
2381
- 'v-leave-active' ,
2382
- ] )
2383
- await nextFrame ( )
2384
- expect ( await classList ( '.test' ) ) . toStrictEqual ( [
2385
- 'test' ,
2386
- 'v-leave-active' ,
2387
- 'v-leave-to' ,
2388
- ] )
2389
- await transitionFinish ( )
2390
- expect ( await html ( '#target' ) ) . toBe ( '' )
2391
- expect ( await html ( '#container' ) ) . toBe (
2392
- '<!--v-if-->' ,
2393
- )
2394
- } ,
2395
- E2E_TIMEOUT ,
2396
- )
2363
+ // enter
2364
+ expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
2365
+ 'test' ,
2366
+ 'v-enter-from' ,
2367
+ 'v-enter-active' ,
2368
+ ] )
2369
+ await nextFrame ( )
2370
+ expect ( await classList ( '.test' ) ) . toStrictEqual ( [
2371
+ 'test' ,
2372
+ 'v-enter-active' ,
2373
+ 'v-enter-to' ,
2374
+ ] )
2375
+ await transitionFinish ( )
2376
+ expect ( await html ( '#target' ) ) . toBe ( '<div class="test">content</div>' )
2377
+
2378
+ // leave
2379
+ expect ( await classWhenTransitionStart ( ) ) . toStrictEqual ( [
2380
+ 'test' ,
2381
+ 'v-leave-from' ,
2382
+ 'v-leave-active' ,
2383
+ ] )
2384
+ await nextFrame ( )
2385
+ expect ( await classList ( '.test' ) ) . toStrictEqual ( [
2386
+ 'test' ,
2387
+ 'v-leave-active' ,
2388
+ 'v-leave-to' ,
2389
+ ] )
2390
+ await transitionFinish ( )
2391
+ expect ( await html ( '#target' ) ) . toBe ( '' )
2392
+ expect ( await html ( '#container' ) ) . toBe ( '<!--v-if-->' )
2393
+ } ,
2394
+ E2E_TIMEOUT ,
2395
+ )
2397
2396
} )
2398
2397
2399
2398
describe ( 'transition with v-show' , ( ) => {
0 commit comments