测试: 完善测试

Author: agileago

test/decorator/computed.test.tsx

@@ -0,0 +1,33 @@
+import '@abraham/reflection'
+import { expect, test } from 'vitest'
+import { Computed, Mut, VueComponent } from 'vue3-oop'
+import { mount } from '@vue/test-utils'
+
+class CountComponent extends VueComponent {
+  @Mut() count = 1
+
+  @Computed()
+  get double() {
+    return this.count * 2
+  }
+
+  render() {
+    return (
+      <div>
+        <p>{this.double}</p>
+      </div>
+    )
+  }
+}
+
+test('Computed decorator should work', async () => {
+  // @ts-ignore
+  const wrapper = mount(CountComponent)
+  const vm = wrapper.vm as unknown as CountComponent
+
+  const p = wrapper.get('p')
+  expect(p.text()).toContain('2')
+  vm.count++
+  await vm.$nextTick()
+  expect(p.text()).toContain('4')
+})

test/decorator.test.tsx renamed to test/decorator/mut.test.tsx

@@ -28,38 +28,43 @@ const debounceRef: CustomRefFactory<any> = (track, trigger) => {
 const delay = (timeout: number) =>
   new Promise((resolve) => setTimeout(resolve, timeout))
 
-test('Mut decorator', async () => {
-  class CountComponent extends VueComponent {
-    @Mut() count = 1
-    // shallow ref
-    @Mut(true) obj = { count: 1 }
-    // custom ref
-    @Mut(debounceRef) count1 = 1
+class CountComponent extends VueComponent {
+  @Mut() count = 1
+  // shallow ref
+  @Mut(true) obj = { count: 1 }
+  // custom ref
+  @Mut(debounceRef) count1 = 1
 
-    render() {
-      return (
-        <div>
-          <p onClick={() => this.count++}>{this.count}</p>
-          <div id="shallow" onClick={() => this.obj.count++}>
-            {this.obj.count}
-          </div>
-          <div id="custom" onClick={() => this.count1++}>
-            {this.count1}
-          </div>
+  render() {
+    return (
+      <div>
+        <p onClick={() => this.count++}>{this.count}</p>
+        <div id="shallow" onClick={() => this.obj.count++}>
+          {this.obj.count}
         </div>
-      )
-    }
+        <div id="custom" onClick={() => this.count1++}>
+          {this.count1}
+        </div>
+      </div>
+    )
   }
+}
+
+test('Mut decorator should work', async () => {
   // @ts-ignore
   const wrapper = mount(CountComponent)
-  const vm = wrapper.vm as unknown as CountComponent
 
   const p = wrapper.get('p')
   expect(p.text()).toContain('1')
   await p.trigger('click')
   expect(p.text()).toContain('2')
+})
+
+test('mut: shallow ref', async () => {
+  // @ts-ignore
+  const wrapper = mount(CountComponent)
+  const vm = wrapper.vm as unknown as CountComponent
 
-  // shallow ref
   const shallow = wrapper.get('#shallow')
   expect(shallow.text()).toContain('1')
   await shallow.trigger('click')
@@ -69,7 +74,11 @@ test('Mut decorator', async () => {
   await vm.$nextTick()
   console.log(shallow.text())
   expect(shallow.text()).toContain('2')
+})
 
+test('mut: custom ref', async () => {
+  // @ts-ignore
+  const wrapper = mount(CountComponent)
   // custom ref
   const custom = wrapper.get('#custom')
   expect(custom.text()).toContain('1')