增加测试用例-验证to方法和toSelf方法

package.json

@@ -40,23 +40,25 @@
   ],
   "scripts": {
     "test": "vitest",
+    "coverage": "vitest run --coverage",
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/node": "^22.9.0",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@types/node": "^22.9.1",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitest/coverage-v8": "^2.1.5",
     "@vue/test-utils": "^2.4.6",
-    "inversify": "^6.1.1",
+    "inversify": "^6.1.4",
     "jsdom": "^25.0.1",
     "reflect-metadata": "^0.2.2",
-    "typescript": "~5.6.2",
-    "vite": "^5.4.10",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
-    "vitest": "^2.1.4",
-    "vue": "^3.5.12",
-    "vue-tsc": "^2.1.8"
+    "vitest": "^2.1.5",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {
     "inversify": "^6.1.1",

src/index.ts

@@ -81,6 +81,9 @@ function createContainer(parent?: Container, opts?: ContainerOptions) {
   }
   return reactiveContainer(container);
 }
+
+export const DEFAULT_CONTAINER = createContainer();
+
 function reactiveContainer(container: Container) {
   const originalBind = container.bind;
   const newBind = (serviceIdentifier: any) => {
@@ -150,7 +153,6 @@ function getContextContainer() {
   }
 }
 
-export const DEFAULT_CONTAINER = createContainer();
 export function useService<T>(token: interfaces.ServiceIdentifier<T>) {
   const container = getContextContainer();
   return getServiceFromContainer(container, token);

tests/DemoComp.vue

@@ -9,8 +9,6 @@ defineProps({
 declareProviders([DemoService]);
 
 const service = useService(DemoService);
-
-console.log('DemoService => ', service);
 </script>
 
 <template>

tests/README.md

@@ -48,18 +48,22 @@
 2. createToken创建的token --> test5
   1. 是否可以在useService自动推导类型-可以
   1. 是否可以在inject中自动推导类型-不能直接支持，可以通过ExtractToken获取类型
-4. to方法和toSelf方法验证
-5. bindContainer多次调用验证
-6. 验证默认容器DEFAULT_CONTAINER
-7. 验证useService多次调用结果
-8. 验证useService在组件外调用场景
-9. 验证useRootService多次调用结果
-10. 验证useRootService在组件内/外调用的结果
-11. 验证declareProviders多次调用结果
-12. 验证declareProviders不同参数的结果
-13. 验证declareRootProviders多次调用结果
-14. 验证declareRootProviders不同参数的结果
-15. 验证declareAppProviders多次调用结果
-16. 验证declareAppProviders不同参数的结果
-17. 全局provide路由变量-route和router
-3. ContainerOptions不同场景验证
+3. to方法和toSelf方法验证 --> test6
+5. 验证useService多次调用结果
+6. 验证useService在组件外调用场景
+7. 验证useRootService多次调用结果
+8. 验证useRootService在组件内/外调用的结果
+9. 验证declareProviders多次调用结果
+  1. bindContainer多次调用验证
+  2. 验证默认容器DEFAULT_CONTAINER
+10. 验证declareProviders不同参数的结果
+11. 验证declareRootProviders多次调用结果
+  1. bindContainer多次调用验证
+  2. 验证默认容器DEFAULT_CONTAINER
+12. 验证declareRootProviders不同参数的结果
+13. 验证declareAppProviders多次调用结果
+  1. bindContainer多次调用验证
+  2. 验证默认容器DEFAULT_CONTAINER
+14. 验证declareAppProviders不同参数的结果
+15. 全局provide路由变量-route和router
+16. ContainerOptions不同场景验证

tests/test6/DemoCompTo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+import { declareProviders, useService } from '../../src/index';
+
+defineProps({
+  msg: String,
+});
+
+declareProviders(con => {
+  con.bind(DemoService).to(DemoService);
+  con.bind(OtherService).to(OtherService);
+});
+const service = useService(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/test6/DemoCompToSelf.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+import { declareProviders, useService } from '../../src/index';
+
+defineProps({
+  msg: String,
+});
+
+declareProviders(con => {
+  con.bind(DemoService).toSelf();
+  con.bind(OtherService).toSelf();
+});
+const service = useService(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/test6/DemoService.ts

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { postReactive } from '../../src/index';
+import { inject } from 'inversify';
+import { OtherService } from './OtherService';
+
+export class DemoService {
+  public count = 1;
+  public age = 100;
+  private _name = 'DemoService';
+  public computedName: any;
+
+  @inject(OtherService)
+  public otherService!: OtherService;
+
+  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/test6/OtherService.ts

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

tests/test6/README.md

@@ -0,0 +1,3 @@
+## 测试场景-验证to方法和toSelf方法
+
+验证to方法和toSelf方法

tests/test6/demo.test.ts

@@ -0,0 +1,126 @@
+import 'reflect-metadata';
+import { mount } from '@vue/test-utils';
+import DemoCompTo from './DemoCompTo.vue';
+import DemoCompToSelf from './DemoCompToSelf.vue';
+import { DemoService } from './DemoService';
+import { OtherService } from './OtherService';
+
+describe('test6', () => {
+  it('DemoCompTo.vue use bind to', async () => {
+    const msg = 'Hello world';
+    const wrapper = mount(DemoCompTo, {
+      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');
+  });
+
+  it('DemoCompToSelf.vue use bind toSelf', async () => {
+    const msg = 'Hello world';
+    const wrapper = mount(DemoCompToSelf, {
+      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');
+  });
+});

vite.config.ts

@@ -49,5 +49,8 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    coverage: {
+      include: ['src/**/*.ts'],
+    },
   },
 });