wip: update tests

Author: edison1105

packages/runtime-vapor/__tests__/components/Teleport.spec.ts

@@ -60,7 +60,9 @@ function runSharedTests(deferMode: boolean): void {
     }).create()
     mount(root)
 
-    expect(root.innerHTML).toBe('<!--teleport--><div>root</div>')
+    expect(root.innerHTML).toBe(
+      '<!--teleport start--><!--teleport end--><!--teleport--><div>root</div>',
+    )
     expect(target.innerHTML).toBe('<div>teleported</div>')
   })
 
@@ -89,14 +91,18 @@ function runSharedTests(deferMode: boolean): void {
     }).create()
     mount(root)
 
-    expect(root.innerHTML).toBe('<!--teleport--><div>root</div>')
+    expect(root.innerHTML).toBe(
+      '<!--teleport start--><!--teleport end--><!--teleport--><div>root</div>',
+    )
     expect(targetA.innerHTML).toBe('<div>teleported</div>')
     expect(targetB.innerHTML).toBe('')
 
     target.value = targetB
     await nextTick()
 
-    expect(root.innerHTML).toBe('<!--teleport--><div>root</div>')
+    expect(root.innerHTML).toBe(
+      '<!--teleport start--><!--teleport end--><!--teleport--><div>root</div>',
+    )
     expect(targetA.innerHTML).toBe('')
     expect(targetB.innerHTML).toBe('<div>teleported</div>')
   })
@@ -268,7 +274,9 @@ function runSharedTests(deferMode: boolean): void {
       },
     }).create()
     mount(root)
-    expect(root.innerHTML).toBe('<div><!--teleport--><!--teleport--></div>')
+    expect(root.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--><!--teleport--><!--teleport start--><!--teleport end--><!--teleport--></div>',
+    )
     expect(target.innerHTML).toBe('<div>one</div>two')
 
     // update existing content
@@ -283,7 +291,9 @@ function runSharedTests(deferMode: boolean): void {
     // toggling
     child1.value = [] as any
     await nextTick()
-    expect(root.innerHTML).toBe('<div><!--teleport--><!--teleport--></div>')
+    expect(root.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--><!--teleport--><!--teleport start--><!--teleport end--><!--teleport--></div>',
+    )
     expect(target.innerHTML).toBe('three')
 
     // toggle back
@@ -293,14 +303,18 @@ function runSharedTests(deferMode: boolean): void {
     ] as any
     child2.value = [template('three')()] as any
     await nextTick()
-    expect(root.innerHTML).toBe('<div><!--teleport--><!--teleport--></div>')
+    expect(root.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--><!--teleport--><!--teleport start--><!--teleport end--><!--teleport--></div>',
+    )
     // should append
     expect(target.innerHTML).toBe('<div>one</div><div>two</div>three')
 
     // toggle the other teleport
     child2.value = [] as any
     await nextTick()
-    expect(root.innerHTML).toBe('<div><!--teleport--><!--teleport--></div>')
+    expect(root.innerHTML).toBe(
+      '<div><!--teleport start--><!--teleport end--><!--teleport--><!--teleport start--><!--teleport end--><!--teleport--></div>',
+    )
     expect(target.innerHTML).toBe('<div>one</div><div>two</div>')
   })
 
@@ -331,12 +345,12 @@ function runSharedTests(deferMode: boolean): void {
     mount(root)
 
     expect(root.innerHTML).toBe(
-      '<div></div><div>teleported</div><!--teleport-->',
+      '<div></div><div>teleported</div><!--teleport start--><!--teleport end--><!--teleport-->',
     )
     disabled.value = false
     await nextTick()
     expect(root.innerHTML).toBe(
-      '<div><div>teleported</div></div><!--teleport-->',
+      '<div><div>teleported</div></div><!--teleport start--><!--teleport end--><!--teleport-->',
     )
   })
 
@@ -363,7 +377,9 @@ function runSharedTests(deferMode: boolean): void {
     }).create()
     mount(root)
 
-    expect(root.innerHTML).toBe('<!--teleport--><div>root</div>')
+    expect(root.innerHTML).toBe(
+      '<!--teleport start--><!--teleport end--><!--teleport--><div>root</div>',
+    )
     expect(target.innerHTML).toBe('<div>teleported</div>')
 
     disabled.value = true
@@ -401,12 +417,16 @@ function runSharedTests(deferMode: boolean): void {
     }).create()
     mount(root)
 
-    expect(root.innerHTML).toBe('<!--teleport--><div>root</div>')
+    expect(root.innerHTML).toBe(
+      '<!--teleport start--><!--teleport end--><!--teleport--><div>root</div>',
+    )
     expect(target.innerHTML).toBe('<div>teleported</div>')
 
     children.value = [child2, child1]
     await nextTick()
-    expect(root.innerHTML).toBe('<div>root</div><!--teleport-->')
+    expect(root.innerHTML).toBe(
+      '<div>root</div><!--teleport start--><!--teleport end--><!--teleport-->',
+    )
     expect(target.innerHTML).toBe('<div>teleported</div>')
   })
 

packages/runtime-vapor/src/components/Teleport.ts

@@ -60,9 +60,10 @@ export class TeleportFragment extends VaporFragment {
 
   update(props: TeleportProps, children: Block): void {
     const parent = this.anchor.parentNode
+
     // teardown previous
-    if (this.nodes && (parent || this.currentParent)) {
-      remove(this.nodes, this.currentParent! || parent)
+    if (this.nodes && (this.currentParent || parent)) {
+      remove(this.nodes, (this.currentParent || parent)!)
     }
 
     this.nodes = children
@@ -94,23 +95,23 @@ export class TeleportFragment extends VaporFragment {
       }
     }
 
-    if (parent && disabled) {
-      if (!this.mainAnchor) {
-        this.mainAnchor = __DEV__
-          ? createComment('teleport end')
-          : createTextNode()
-      }
-      if (!this.placeholder) {
-        this.placeholder = __DEV__
-          ? createComment('teleport start')
-          : createTextNode()
-      }
-      if (!this.mainAnchor.isConnected) {
-        insert(this.placeholder, parent, this.anchor)
-        insert(this.mainAnchor, parent, this.anchor)
-      }
+    // insert placeholder and main anchor after initial render
+    if (!parent) {
+      this.placeholder = __DEV__
+        ? createComment('teleport start')
+        : createTextNode()
+      this.mainAnchor = __DEV__
+        ? createComment('teleport end')
+        : createTextNode()
+      queuePostFlushCb(() => {
+        const parent = this.anchor.parentNode
+        insert(this.placeholder!, parent!, this.anchor)
+        insert(this.mainAnchor!, parent!, this.anchor)
+      })
+    }
 
-      mount(parent, this.mainAnchor)
+    if (parent && disabled) {
+      mount(parent, this.mainAnchor!)
     }
 
     if (!disabled) {