test(runtime-vapor): add provide/inject tests for vdom interop

Author: edison1105

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

@@ -1,6 +1,7 @@
 import {
   type InjectionKey,
   type Ref,
+  h,
   hasInjectionContext,
   inject,
   nextTick,
@@ -17,6 +18,7 @@ import {
   createVaporApp,
   defineVaporComponent,
   renderEffect,
+  vaporInteropPlugin,
   withVaporCtx,
 } from '../src'
 import { makeRender } from './_utils'
@@ -422,3 +424,34 @@ describe('api: provide/inject', () => {
     })
   })
 })
+
+describe('vdom interop', () => {
+  test('should inject value from vapor parent', async () => {
+    const VdomChild = {
+      setup() {
+        const foo = inject('foo')
+        return () => h('div', null, [toDisplayString(foo)])
+      },
+    }
+
+    const value = ref('foo')
+    const App = defineVaporComponent({
+      setup() {
+        provide('foo', value)
+        return createComponent(VdomChild as any)
+      },
+    })
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const app = createVaporApp(App)
+    app.use(vaporInteropPlugin)
+    app.mount(root)
+
+    expect(root.innerHTML).toBe('<div>foo</div>')
+
+    value.value = 'bar'
+    await nextTick()
+    expect(root.innerHTML).toBe('<div>bar</div>')
+  })
+})

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

@@ -3,12 +3,14 @@ import {
   createVNode,
   defineComponent,
   h,
+  inject,
   nextTick,
   onActivated,
   onBeforeMount,
   onDeactivated,
   onMounted,
   onUnmounted,
+  provide,
   ref,
   renderSlot,
   toDisplayString,
@@ -234,9 +236,32 @@ describe('vdomInterop', () => {
     })
   })
 
-  describe.todo('provide', () => {})
+  describe('provide / inject', () => {
+    it('should inject value from vdom parent', async () => {
+      const VaporChild = defineVaporComponent({
+        setup() {
+          const foo = inject('foo')
+          const n0 = template(' ')() as any
+          renderEffect(() => setText(n0, toDisplayString(foo)))
+          return n0
+        },
+      })
+
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          provide('foo', value)
+          return () => h(VaporChild as any)
+        },
+      }).render()
+
+      expect(html()).toBe('foo')
 
-  describe.todo('inject', () => {})
+      value.value = 'bar'
+      await nextTick()
+      expect(html()).toBe('bar')
+    })
+  })
 
   describe.todo('template ref', () => {})