wip

danielroe · May 30, 2023 · d9d431c · d9d431c
1 parent 8bf8037
commit d9d431c
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/packages/vitest-environment-nuxt/src/runtime/mount.ts b/packages/vitest-environment-nuxt/src/runtime/mount.ts
@@ -15,7 +15,7 @@ interface MountSuspendedOptions extends MountingOptions<any, any> {
 
 export async function mountSuspended<
   T extends DefineComponent<any, any, any, any>
->(component: T, options?: MountSuspendedOptions) {
+> (component: T, options?: MountSuspendedOptions) {
   const {
     props = {},
     attrs = {},
@@ -30,6 +30,7 @@ export async function mountSuspended<
 
   let setupContext: SetupContext
   return new Promise<VueWrapper<InstanceType<T>>>(resolve => {
+    let exposed: null | any[] = []
     const vm = mount(
       {
         setup: (props, ctx) => {
@@ -42,19 +43,40 @@ export async function mountSuspended<
         render: (renderContext: any) =>
           h(
             Suspense,
-            { onResolve: () => nextTick().then(() => resolve(vm as any)) },
+            {
+              onResolve: () => nextTick().then(() => {
+                resolve(vm as any)
+                nextTick().then(() => {
+                  if (exposed) {
+                    for (const expose of exposed) {
+                      setupContext.expose(...expose)
+                      console.log('exposing', expose)
+                    }
+                  }
+                  exposed = null
+                })
+              })
+            },
             {
               default: () =>
                 h({
-                  async setup() {
+                  async setup () {
                     const router = useRouter()
                     await router.replace(route)
 
                     // Proxy top-level setup/render context so test wrapper resolves child component
                     const clonedComponent = {
                       ...component,
                       render: render ? (_ctx: any, ...args: any[]) => render(renderContext, ...args) : undefined,
-                      setup: setup ? (props: Record<string, any>, ctx: Record<string, any>) => setup(props, setupContext) : undefined
+                      setup: setup ? (props: Record<string, any>, ctx: Record<string, any>) => setup(props, {
+                        ...setupContext,
+                        expose: (...args) => {
+                          if (exposed) {
+                            return void exposed.push(args)
+                          }
+                          return setupContext.expose(...args)
+                        }
+                      }) : undefined
                     }
 
                     return () => h(clonedComponent, { ...props, ...attrs }, slots)

diff --git a/playground/components/WrapperTests.vue b/playground/components/WrapperTests.vue
@@ -9,7 +9,8 @@ function testExpose () {
 }
 
 defineExpose({
-  testExpose
+  testExpose,
+  someRef: ref('thing')
 })
 </script>
 

diff --git a/playground/tests/nuxt/index.spec.ts b/playground/tests/nuxt/index.spec.ts
@@ -1,11 +1,13 @@
 import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
 
 import { mountSuspended, registerEndpoint } from 'vitest-environment-nuxt/utils'
 
 import App from '~/app.vue'
 import FetchComponent from '~/components/FetchComponent.vue'
 import OptionsComponent from '~/components/OptionsComponent.vue'
 import { WrapperTests } from '#components'
+import { Suspense } from 'vue'
 
 describe('client-side nuxt features', () => {
   it('can use core nuxt composables within test file', () => {
@@ -98,6 +100,49 @@ describe('test utils', () => {
     `)
   })
 
+  it.only('can access exposed methods from components mounted within nuxt suspense', async () => {
+    const component = await mountSuspended(WrapperTests)
+    // console.log(component.vm)
+    expect(component.vm.someRef).toBe('thing')
+    // expect(component.vm.testExpose()).toMatchInlineSnapshot('{}')
+
+    const wrapper = mount({
+      setup (props, context) {
+        context.expose({
+          test: true
+        })
+        return () => 'div'
+      }
+    })
+    expect(wrapper.vm.test).toBe(true)
+
+    // const suspensewrapper = await new Promise(resolve => {
+    //   const vm = mount(
+    //     {
+    //       setup: (props, context) => {
+    //         return (renderContext: any) =>
+    //           h(
+    //             Suspense,
+    //             { onResolve: () => nextTick().then(() => resolve(vm as any)) },
+    //             {
+    //               default: () =>
+    //                 h({
+    //                   async setup (props) {
+    //                     await new Promise(resolve => setTimeout(resolve, 10))
+    //                     context.expose({
+    //                       test: true
+    //                     })
+    //                     return () => 'div'
+    //                   }
+    //                 })
+    //             })
+    //       }
+    //     }
+    //   )
+    // })
+    // expect(suspensewrapper.vm.test).toBe(true)
+  })
+
   it('can mock fetch requests', async () => {
     registerEndpoint('https://jsonplaceholder.typicode.com/todos/1', () => ({
       title: 'title from mocked api',