Complete unit tests

Author: Giwayume

package.json

@@ -16,7 +16,7 @@
     "vue component decorator"
   ],
   "scripts": {
-    "test-build": "npm run test && npm run build",
+    "test-build": "npm run build && npm run test",
     "test": "mocha -r ts-node/register test/test.ts",
     "build": "npm run build:cjs && npm run build:esm",
     "build:cjs": "./node_modules/.bin/tsc",

src/option/setup.ts

@@ -1,4 +1,3 @@
-import { proxyRefs } from 'vue';
 import type { Ref, SetupContext, ShallowUnwrapRef } from 'vue';
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
@@ -28,16 +27,14 @@ export function build(cons: Cons, optionBuilder: OptionBuilder): Record<string,
                     }
                     promise = promise.then(() => {
                         return setupState.then((value: any) => {
-                            setupData[name] = proxyRefs(value)
-                            return {}
+                            setupData[name] = value
                         })
                     })
                 } else {
-                    setupData[name] = setupState;
+                    setupData[name] = setupState
                 }
             }
         }
-
         return promise ?? {};
     }
     return setupData;

test/option/setup.ts

@@ -1,41 +1,103 @@
 
 import { inject } from 'vue'
 import { mount } from '@vue/test-utils'
-import { expect } from 'chai';
-import 'mocha';
-import { Component, Base, setup } from '../../dist'
+import { expect } from 'chai'
+import { mountSuspense } from '../utils'
+import 'mocha'
+import { Component, Base, Prop, setup } from '../../dist'
 
-const AXIOM = 'setup is working to allow composition API usage'
+const SETUP_AXIOM = 'setup is working to allow composition API usage'
+const DATA_AXIOM = 'data is injected into the template'
 const injectionKey = Symbol('injection test key')
 
 function useInjectedValue() {
-    inject(injectionKey)
+    return inject(injectionKey)
 }
 
-@Component
-export class Comp extends Base {
+@Component({
+    render() { return [] }
+})
+export class SyncComp extends Base {
 
     injectedValue = setup(() => useInjectedValue())
 
 }
 
-const CompContext = Comp as any
+const SyncCompContext = SyncComp as any
 
+@Component({
+    render() { return [] }
+})
+export class AsyncComp extends Base {
 
-describe('setup function',
-    () => {
-        const wrapper = mount(CompContext,{
+    injectedValue = setup(() => {
+        const value = useInjectedValue()
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(value)
+            }, 1)  
+        })
+    })
+
+}
+
+const AsyncCompContext = AsyncComp as any
+
+@Component({
+    setup() {
+        const injectedValue = useInjectedValue()
+        return { injectedValue }
+    },
+    template: '{{ injectedValue }} {{ dataValue }}'
+})
+export class SetupComp extends Base {
+    dataValue = DATA_AXIOM 
+}
+
+const SetupCompContext = SetupComp as any
+
+describe('setup function', () => {
+    describe('synchronous setup', () => {
+        const wrapper = mount(SyncCompContext, {
             global: {
                 provide: {
-                    [injectionKey]: AXIOM
+                    [injectionKey]: SETUP_AXIOM
                 }
             }
         })
         const vm = wrapper.vm
         it('injects the value provided to the component via composition API', () => {
-            expect(vm.injectedValue).to.equal(AXIOM)
+            expect(vm.injectedValue).to.equal(SETUP_AXIOM)
+        })
+    })
+
+    describe('asynchronous setup', () => {
+        it('injects the value provided to the component via composition API', async () => {
+            const wrapper = await mountSuspense(AsyncCompContext, {
+                global: {
+                    provide: {
+                        [injectionKey]: SETUP_AXIOM
+                    }
+                }
+            })
+            const vm = wrapper.findComponent(AsyncCompContext).vm
+            expect(vm.injectedValue).to.equal(SETUP_AXIOM)
         })
-    }
-)
+    })
+})
+
+describe('setup option', () => {
+    const wrapper = mount(SetupCompContext, {
+        global: {
+            provide: {
+                [injectionKey]: SETUP_AXIOM
+            }
+        }
+    })
+    it('can inject variables into the template', () => {
+        expect(wrapper.text()).to.contain(SETUP_AXIOM)
+        expect(wrapper.text()).to.contain(DATA_AXIOM)
+    })
+})
 
 export default {}

test/test.ts

@@ -2,6 +2,7 @@ require('jsdom-global/keys.js').push('SVGElement')
 require('jsdom-global')()
 import './internal/utils'
 import './component'
+import './option/setup'
 import './option/data'
 import './option/methods'
 import './option/computed'

test/utils.ts

@@ -1,5 +1,10 @@
+import { defineComponent, h, Suspense } from 'vue'
+import { mount } from '@vue/test-utils'
+
+import type { VueWrapper } from '@vue/test-utils'
+
 export function isEmptyObject(arg: any) {
-    if (typeof arg === 'undefined') {
+    if (['undefined', 'function'].includes(typeof arg)) {
         return true
     }
     if (arg === null) {
@@ -12,4 +17,19 @@ export function isEmptyObject(arg: any) {
             return Object.keys(arg).length === 0
         }
     }
-}
+}
+
+export function mountSuspense(component: any, options: any = {}): Promise<VueWrapper> {
+    return new Promise<VueWrapper>((resolve, reject) => {
+        const wrapper = mount(defineComponent({
+            render() {
+                return h(Suspense, {
+                    onResolve: () => resolve(wrapper)
+                }, {
+                    default: h(component, options?.props),
+                    fallback: h('div', 'fallback')
+                })
+            }
+        }), { global: options?.global })
+    })
+}