test(vapor): componentAttrs

packages/runtime-vapor/__tests__/_utils.ts

@@ -55,7 +55,8 @@ export function makeRender<C = VaporComponent>(
     }
 
     function mount(container: string | ParentNode = host) {
-      instance = app.mount(container) as any as VaporComponentInstance
+      app.mount(container)
+      instance = app._instance as VaporComponentInstance
       return res()
     }
 

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

@@ -1,22 +1,31 @@
 import { ref, watchEffect } from '@vue/runtime-dom'
-import { setText, template } from '../src'
+import { renderEffect, setText, template } from '../src'
 import { makeRender } from './_utils'
+import type { VaporComponentInstance } from '../src/component'
 
 const define = makeRender()
 
+// TODO port tests from rendererComponent.spec.ts
+
 describe('component', () => {
   test('unmountComponent', async () => {
-    const { host, app } = define(() => {
+    const { host, app, instance } = define(() => {
       const count = ref(0)
       const t0 = template('<div></div>')
       const n0 = t0()
       watchEffect(() => {
         setText(n0, count.value)
       })
+      renderEffect(() => {})
       return n0
     }).render()
+
+    const i = instance as VaporComponentInstance
+    expect(i.scope.effects.length).toBe(2)
     expect(host.innerHTML).toBe('<div>0</div>')
+
     app.unmount()
     expect(host.innerHTML).toBe('')
+    expect(i.scope.effects.length).toBe(0)
   })
 })

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

@@ -1,27 +1,17 @@
-import {
-  createComponent,
-  getCurrentInstance,
-  nextTick,
-  ref,
-  setInheritAttrs,
-  setText,
-  template,
-  watchEffect,
-} from '../src'
+import { nextTick, ref, watchEffect } from '@vue/runtime-dom'
+import { createComponent, setText, template } from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender<any>()
 
-describe.todo('attribute fallthrough', () => {
+describe('attribute fallthrough', () => {
   it('should allow attrs to fallthrough', async () => {
     const t0 = template('<div>')
     const { component: Child } = define({
       props: ['foo'],
-      render() {
-        const instance = getCurrentInstance()!
+      setup(props: any) {
         const n0 = t0() as Element
-        setInheritAttrs()
-        watchEffect(() => setText(n0, instance.props.foo))
+        watchEffect(() => setText(n0, props.foo))
         return n0
       },
     })
@@ -30,17 +20,12 @@ describe.todo('attribute fallthrough', () => {
     const id = ref('a')
     const { host } = define({
       setup() {
-        return { foo, id }
-      },
-      render(_ctx: Record<string, any>) {
         return createComponent(
           Child,
-          [
-            {
-              foo: () => _ctx.foo,
-              id: () => _ctx.id,
-            },
-          ],
+          {
+            foo: () => foo.value,
+            id: () => id.value,
+          },
           null,
           true,
         )
@@ -62,11 +47,9 @@ describe.todo('attribute fallthrough', () => {
     const { component: Child } = define({
       props: ['foo'],
       inheritAttrs: false,
-      render() {
-        const instance = getCurrentInstance()!
+      setup(props: any) {
         const n0 = t0() as Element
-        setInheritAttrs()
-        watchEffect(() => setText(n0, instance.props.foo))
+        watchEffect(() => setText(n0, props.foo))
         return n0
       },
     })
@@ -75,17 +58,12 @@ describe.todo('attribute fallthrough', () => {
     const id = ref('a')
     const { host } = define({
       setup() {
-        return { foo, id }
-      },
-      render(_ctx: Record<string, any>) {
         return createComponent(
           Child,
-          [
-            {
-              foo: () => _ctx.foo,
-              id: () => _ctx.id,
-            },
-          ],
+          {
+            foo: () => foo.value,
+            id: () => id.value,
+          },
           null,
           true,
         )
@@ -106,24 +84,20 @@ describe.todo('attribute fallthrough', () => {
     const t0 = template('<div>')
     const { component: Grandson } = define({
       props: ['custom-attr'],
-      render() {
-        const instance = getCurrentInstance()!
+      setup(_: any, { attrs }: any) {
         const n0 = t0() as Element
-        setInheritAttrs()
-        watchEffect(() => setText(n0, instance.attrs.foo))
+        watchEffect(() => setText(n0, attrs.foo))
         return n0
       },
     })
 
     const { component: Child } = define({
-      render() {
+      setup() {
         const n0 = createComponent(
           Grandson,
-          [
-            {
-              'custom-attr': () => 'custom-attr',
-            },
-          ],
+          {
+            'custom-attr': () => 'custom-attr',
+          },
           null,
           true,
         )
@@ -135,17 +109,12 @@ describe.todo('attribute fallthrough', () => {
     const id = ref('a')
     const { host } = define({
       setup() {
-        return { foo, id }
-      },
-      render(_ctx: Record<string, any>) {
         return createComponent(
           Child,
-          [
-            {
-              foo: () => _ctx.foo,
-              id: () => _ctx.id,
-            },
-          ],
+          {
+            foo: () => foo.value,
+            id: () => id.value,
+          },
           null,
           true,
         )