File tree Expand file tree Collapse file tree 5 files changed +105
-26
lines changed Expand file tree Collapse file tree 5 files changed +105
-26
lines changed Original file line number Diff line number Diff line change 1
1
## 测试场景-当前组件访问当前组件的服务
2
2
3
- 主要测试了 declareProviders 和 useService 可以互相配合。
3
+ ### 测试目的
4
4
5
- useService 可以获取正确的实例化对象,且实例化对象确实是响应式对象,会自动更新 dom 数据。
5
+ 验证在单个组件内声明和使用服务的完整流程,包括:
6
6
7
- 并且可以触发点击事件,调用对应的事件处理函数。
7
+ 1 . 使用 ` declareProviders ` 注册服务提供者和 ` useService ` 获取服务实例的正确协作
8
+ 2 . 验证获取的服务实例具备完整的类型和功能
9
+ 3 . 测试服务实例的响应式特性及其与 DOM 更新的联动
8
10
9
- service 中的 getter 属性可以看作是没有缓存的 computed 属性。
11
+ ### 测试要点
12
+
13
+ - 服务实例成功注入并可在组件中被正确访问
14
+ - 服务中的普通属性(如 ` count ` 、` age ` )变更能触发视图更新
15
+ - 服务中的 getter 属性(如 ` name ` )能够动态计算并随依赖变化而更新
16
+ - 服务中的 computed 属性(如 ` computedName ` )能正确工作并保持响应性
17
+ - 服务方法(如 ` increaseCount ` 、` increaseAge ` )可以通过事件正确调用并影响状态
18
+ - ` @PostConstruct ` 装饰器能正确执行初始化逻辑
Original file line number Diff line number Diff line change 1
- ## 测试场景-当前组件的服务访问当前组件
1
+ ## 测试场景-组件与服务的多种交互方式
2
2
3
- ```
4
- @Inject(CURRENT_COMPONENT)
5
- public component: ComponentInternalInstance | null = null;
6
- ```
3
+ ### 测试目的
7
4
8
- 测试了在服务中获取当前组件的功能,主要功能可以获取 props 或者发送事件
5
+ 测试组件和服务之间的交互方式及数据流转,没有使用组件注入功能(CURRENT_COMPONENT 已经被移除),而是使用显式传递数据的方式。
9
6
10
- ```
11
- this.component.props
12
- this.component.emit()
7
+ 组件应该主动去更新服务的数据,而不是服务直接读取组件的数据。
8
+ 比如在组件中 watch props 的变更,同步数据到服务中。
13
9
14
- // 还可以获取组件的defineExpose的数据,但是不建议使用
15
- // 因为所有数据都在服务中,服务可以通过依赖注入引用其他服务
16
- this.component.exposeProxy
17
- ```
10
+ 服务中也不应该直接调用组件的 emit,而是在组件中调用服务的方法,同时处理 emit 逻辑。
11
+ 也就是在组件中定义 event handler,然后在 template 中使用该 handler。
12
+
13
+ ### 测试要点
14
+
15
+ 1 . ** 组件主动传递数据到服务**
16
+
17
+ - 通过调用服务方法(如` setComponentMsg ` )将组件属性传递给服务
18
+
19
+ 2 . ** 组件与服务共同处理事件**
20
+
21
+ - 服务负责状态更新(如` increaseCount ` )
22
+ - 组件基于服务状态发送事件(如` emit('count', service.count) ` )
23
+
24
+ 3 . ** 跨组件机制**
25
+
26
+ - 父组件通过 ref 引用子组件暴露的服务实例
27
+ - 通过父组件直接操作子组件的服务实例
28
+
29
+ 4 . ** 服务状态的多重响应性**
30
+ - 服务中的 getter 属性和 computed 属性能根据组件传入的数据动态计算
31
+
32
+ 这个测试用例演示了在不直接在服务中注入组件实例的情况下,如何实现组件与服务之间的高效交互。
Original file line number Diff line number Diff line change 1
- ## 测试场景-当前组件的服务访问另一个当前组件的服务
1
+ ## 测试场景-服务之间的依赖注入
2
2
3
- declareProviders 一次性声明多个 Class。
3
+ ### 测试目的
4
4
5
- useService 分别获取 demoService 和 otherService,并且 demoService 依赖 otherService。
5
+ 验证在同一个组件中声明多个服务,并实现服务之间的依赖注入与交互。
6
+
7
+ ### 测试要点
8
+
9
+ 1 . ** 多服务一次性声明**
10
+ - 通过 ` declareProviders([DemoService, OtherService]) ` 同时声明多个服务提供者
11
+
12
+ 2 . ** 服务之间的依赖注入**
13
+ - 使用 ` @Inject(new LazyToken(() => OtherService)) ` 将 OtherService 注入到 DemoService 中
14
+ - 验证注入的服务实例与直接使用 ` useService ` 获取的是同一实例
15
+
16
+ 3 . ** 服务之间的数据传递与计算**
17
+ - DemoService 中的计算属性 ` sum ` 依赖于两个服务的状态
18
+ - 当任一服务的状态变化时,计算属性能正确更新
19
+
20
+ 4 . ** 服务实例的相互独立性**
21
+ - 每个服务维护自己的状态,但可以通过依赖关系相互访问
Original file line number Diff line number Diff line change 1
- ## 测试场景-子组件访问父组件服务+子组件服务访问父组件服务
1
+ ## 测试场景-多层级组件中的服务共享与依赖注入
2
2
3
- 测试用例是3层组件结构。DemoComp --> ParentComp --> ChildComp
3
+ ### 测试目的
4
4
5
- 证明子组件可以正确访问父组件的服务,以及子组件的服务也可以正确访问父组件的服务。
5
+ 验证在多层级嵌套组件(DemoComp → ParentComp → ChildComp)中,服务实例的依赖注入、逻辑共享和响应式更新机制。
6
+
7
+ ### 测试要点
8
+
9
+ 1 . ** 服务实例的跨组件共享**
10
+ - 子组件直接使用 ` useService ` 访问父/祖父组件中声明的服务
11
+ - 确认得到的实例与父/祖父组件中的是同一个实例(服务单例模式)
12
+
13
+ 2 . ** 服务之间的依赖注入**
14
+ - ParentService 通过 ` @Inject ` 注入 DemoService
15
+ - ChildService 通过 ` @Inject ` 同时注入 ParentService 和 DemoService
16
+ - 服务间的依赖关系与组件嵌套层级一致
17
+
18
+ 3 . ** 不同组件层级对服务的操作与响应**
19
+ - 从任何层级的组件修改服务状态,所有引用该服务的组件都能同步响应更新
20
+ - 无论通过直接引用还是注入引用,服务状态均可保持一致
21
+
22
+ 4 . ** 服务实例在多层级组件中的唯一性**
23
+ - 每个服务类在整个组件树中只有一个实例
24
+ - 包括通过子组件服务中引用的父组件服务实例也与直接使用 ` useService ` 获取的相同
Original file line number Diff line number Diff line change 1
- ## 测试场景-使用new Token生成token
1
+ ## 测试场景-Token系统与TokenType类型推导
2
2
3
- useService可以自动识别token对应的服务的类型
3
+ ### 测试目的
4
4
5
- @Inject (token)中可以借助TokenType获取实际服务的类型
5
+ 验证 Token 系统的使用,包括 Token 创建、类型推导和依赖注入功能,以及更灵活的服务注册与解析方式。
6
+
7
+ ### 测试要点
8
+
9
+ 1 . ** Token 创建与使用**
10
+ - 使用 ` new Token<ServiceType>('name') ` 创建带类型的服务标记
11
+ - 基于命名空间(如 ` TYPES ` 对象)组织多个 Token
12
+
13
+ 2 . ** 容器绑定 API**
14
+ - 使用 ` declareProviders ` 的函数式 API
15
+ - 通过 ` con.bind(token).to(ServiceClass) ` 实现 Token 到实际服务类的绑定
16
+
17
+ 3 . ** TokenType 类型推导**
18
+ - ` useService(TYPES.DemoService) ` 自动返回正确类型的服务实例
19
+ - ` @Inject(TYPES.OtherService) ` 结合 ` TokenType<typeof TYPES.OtherService> ` 实现注入属性的类型推导
20
+
21
+ 4 . ** 服务间依赖关系**
22
+ - 在 DemoService 中通过 Token 注入 OtherService
23
+ - 利用强类型节省手动类型转换,通过 TokenType 可直接访问被注入服务的属性和方法
24
+
25
+ 通过这种方式,可以更灵活地管理服务依赖和注入,并且保持完整的类型推导支持。
You can’t perform that action at this time.
0 commit comments