@@ -6,9 +6,12 @@ import {
66 Teleport ,
77 Text ,
88 ref ,
9- nextTick
9+ nextTick ,
10+ openBlock ,
11+ createBlock
1012} from '@vue/runtime-test'
1113import { createVNode , Fragment } from '../../src/vnode'
14+ import { PatchFlags } from '@vue/shared'
1215
1316describe ( 'renderer: teleport' , ( ) => {
1417 test ( 'should work' , ( ) => {
@@ -299,4 +302,55 @@ describe('renderer: teleport', () => {
299302 )
300303 expect ( serializeInner ( target ) ) . toBe ( '' )
301304 } )
305+
306+ test ( 'should work with block tree' , async ( ) => {
307+ const target = nodeOps . createElement ( 'div' )
308+ const root = nodeOps . createElement ( 'div' )
309+ const disabled = ref ( false )
310+
311+ const App = {
312+ render ( ) {
313+ return (
314+ openBlock ( ) ,
315+ createBlock (
316+ Fragment ,
317+ null ,
318+ [
319+ h (
320+ Teleport ,
321+ { to : target , disabled : disabled . value } ,
322+ h ( 'div' , 'teleported' )
323+ ) ,
324+ h ( 'div' , 'root' )
325+ ] ,
326+ PatchFlags . STABLE_FRAGMENT
327+ )
328+ )
329+ }
330+ }
331+ render ( h ( App ) , root )
332+ expect ( serializeInner ( root ) ) . toMatchInlineSnapshot (
333+ `"<!--teleport start--><!--teleport end--><div>root</div>"`
334+ )
335+ expect ( serializeInner ( target ) ) . toMatchInlineSnapshot (
336+ `"<div>teleported</div>"`
337+ )
338+
339+ disabled . value = true
340+ await nextTick ( )
341+ expect ( serializeInner ( root ) ) . toMatchInlineSnapshot (
342+ `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
343+ )
344+ expect ( serializeInner ( target ) ) . toBe ( `` )
345+
346+ // toggle back
347+ disabled . value = false
348+ await nextTick ( )
349+ expect ( serializeInner ( root ) ) . toMatchInlineSnapshot (
350+ `"<!--teleport start--><!--teleport end--><div>root</div>"`
351+ )
352+ expect ( serializeInner ( target ) ) . toMatchInlineSnapshot (
353+ `"<div>teleported</div>"`
354+ )
355+ } )
302356} )
0 commit comments