增加测试用例-使用createToken

tests/README.md

@@ -43,6 +43,7 @@
     10. 父组件服务持有子组件服务实例对gc不友好，反过来则没有这个问题
     11. 不提供useChildService这样的方法，原因同2，10
     12. 不提供useContainer和inject(CURRENT_CONTAINER)，原因是暂时没有想到暴露container的使用场景
+    13. https://github.com/vuejs/test-utils/blob/9c9659441c59de557f5844e5f9b7fee00b3938e0/src/baseWrapper.ts#L154
 ```
 2. createToken创建的token --> todo
   1. 是否可以在useService自动推导类型

tests/test1/DemoComp.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { DemoService } from './DemoService';
-import { declareProviders, useService, createToken } from '../../src/index';
+import { declareProviders, useService } from '../../src/index';
 
 defineProps({
   msg: String,
@@ -9,12 +9,6 @@ defineProps({
 declareProviders([DemoService]);
 const service = useService(DemoService);
 
-// const demoToken = createToken<DemoService>('demo');
-// declareProviders(con => {
-//   con.bind(demoToken).to(DemoService);
-// });
-// const service = useService(demoToken);
-
 defineExpose({
   service,
 });

tests/test5/DemoComp.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+import { declareProviders, useService } from '../../src/index';
+import { TYPES } from './token';
+
+defineProps({
+  msg: String,
+});
+
+declareProviders(con => {
+  con.bind(TYPES.DemoService).to(DemoService);
+  con.bind(TYPES.OtherService).to(OtherService);
+});
+const service = useService(TYPES.DemoService);
+
+defineExpose({
+  service,
+});
+</script>
+
+<template>
+  <div>
+    <div class="msg">{{ msg }}</div>
+    <div class="count">{{ service.count }}</div>
+    <div class="other-count">{{ service.otherService.count }}</div>
+    <div class="age">{{ service.age }}</div>
+    <div class="name">{{ service.name }}</div>
+    <div class="computedName">{{ service.computedName }}</div>
+
+    <button type="button" class="btn-age" @click="service.increaseAge()">
+      Add age
+    </button>
+    <button type="button" class="btn-count" @click="service.increaseCount()">
+      Add count
+    </button>
+    <button type="button" class="btn-other-count" @click="service.increaseOtherCount()">
+      Add other count
+    </button>
+  </div>
+</template>

tests/test5/DemoService.ts

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { postReactive } from '../../src/index';
+import { TYPES } from './token';
+import { inject } from 'inversify';
+
+export class DemoService {
+  public count = 1;
+  public age = 100;
+  private _name = 'DemoService';
+  public computedName: any;
+
+  @inject(TYPES.OtherService)
+  public otherService: any;
+
+  public increaseOtherCount() {
+    this.otherService.increaseCount();
+  }
+
+  public increaseCount() {
+    this.count++;
+  }
+
+  public increaseAge() {
+    this.age++;
+  }
+
+  public get name() {
+    return `${this._name}-${this.age}`;
+  }
+
+  @postReactive()
+  public init() {
+    this.computedName = computed(() => {
+      return `${this._name}-${this.age}`;
+    });
+  }
+}

tests/test5/OtherService.ts

@@ -0,0 +1,7 @@
+export class OtherService {
+  public count = 100;
+
+  public increaseCount() {
+    this.count += 10;
+  }
+}

tests/test5/README.md

@@ -0,0 +1,3 @@
+## 测试场景-使用createToken生成token
+
+useService可以自动识别token对应的服务的类型

tests/test5/demo.test.ts

@@ -0,0 +1,66 @@
+import 'reflect-metadata';
+import { mount } from '@vue/test-utils';
+import DemoComp from './DemoComp.vue';
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+
+describe('test5', () => {
+  it('get DemoService instance', async () => {
+    const msg = 'Hello world';
+    const wrapper = mount(DemoComp, {
+      props: {
+        msg,
+      },
+    });
+
+    expect(wrapper.vm.service).toBeInstanceOf(DemoService);
+    expect(wrapper.vm.service.otherService).toBeInstanceOf(OtherService);
+
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('1');
+    expect(wrapper.get('.other-count').text()).toBe('100');
+    expect(wrapper.get('.age').text()).toBe('100');
+    expect(wrapper.get('.name').text()).toBe('DemoService-100');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-100');
+
+    await wrapper.get('.btn-count').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('2');
+    expect(wrapper.get('.other-count').text()).toBe('100');
+    expect(wrapper.get('.age').text()).toBe('100');
+    expect(wrapper.get('.name').text()).toBe('DemoService-100');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-100');
+
+    await wrapper.get('.btn-count').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.other-count').text()).toBe('100');
+    expect(wrapper.get('.age').text()).toBe('100');
+    expect(wrapper.get('.name').text()).toBe('DemoService-100');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-100');
+
+    await wrapper.get('.btn-other-count').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.other-count').text()).toBe('110');
+    expect(wrapper.get('.age').text()).toBe('100');
+    expect(wrapper.get('.name').text()).toBe('DemoService-100');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-100');
+
+    await wrapper.get('.btn-age').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.other-count').text()).toBe('110');
+    expect(wrapper.get('.age').text()).toBe('101');
+    expect(wrapper.get('.name').text()).toBe('DemoService-101');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-101');
+
+    await wrapper.get('.btn-age').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.other-count').text()).toBe('110');
+    expect(wrapper.get('.age').text()).toBe('102');
+    expect(wrapper.get('.name').text()).toBe('DemoService-102');
+    expect(wrapper.get('.computedName').text()).toBe('DemoService-102');
+  });
+});

tests/test5/token.ts

@@ -0,0 +1,8 @@
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+import { createToken } from '../../src/index';
+
+export const TYPES = {
+  DemoService: createToken<DemoService>('DemoService'),
+  OtherService: createToken<OtherService>('OtherService'),
+};