test: add unit tests for createKeyedFragment function

packages/runtime-vapor/__tests__/apiCreateFragment.spec.ts

@@ -0,0 +1,30 @@
+import { nextTick, ref } from 'vue'
+import { createKeyedFragment, template } from '../src'
+import { makeRender } from './_utils'
+
+const define = makeRender()
+
+describe('api: createKeyedFragment', () => {
+  test('basic', async () => {
+    const key = ref(0)
+    const { host } = define({
+      setup() {
+        return createKeyedFragment(
+          () => key.value,
+          () => {
+            const n0 = template(`<div>Item 0</div>`)() as any
+            n0.$key = key.value
+            return n0
+          },
+        )
+      },
+    }).render()
+
+    expect(host.children.length).toBe(1)
+    expect((host.children[0] as any).$key).toBe(0)
+
+    key.value = 1
+    await nextTick()
+    expect((host.children[0] as any).$key).toBe(1)
+  })
+})

packages/runtime-vapor/src/apiCreateFragment.ts

@@ -9,6 +9,16 @@ import {
 } from './insertionState'
 import { renderEffect } from './renderEffect'
 
+/**
+ * Create a dynamic fragment keyed by a reactive value for Vapor transitions.
+ * The fragment is re-rendered when the key changes to trigger enter/leave
+ * animations.
+ *
+ * Example:
+ * <VaporTransition>
+ *   <h1 :key="count">{{ count }}</h1>
+ * </VaporTransition>
+ */
 export function createKeyedFragment(key: () => any, render: BlockFn): Block {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
@@ -16,9 +26,7 @@ export function createKeyedFragment(key: () => any, render: BlockFn): Block {
   if (!isHydrating) resetInsertionState()
 
   const frag = __DEV__ ? new DynamicFragment('keyed') : new DynamicFragment()
-  renderEffect(() => {
-    frag.update(render, key())
-  })
+  renderEffect(() => frag.update(render, key()))
 
   if (!isHydrating) {
     if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)