示例应用程序
学习目标
-
书中使用的示例 Angular 应用程序
-
示例演示的功能
在本指南中，我们将通过查看两个示例来探索测试 Angular 应用程序的不同方面。
计数器组件
计数器是一个可重用的组件，使用按钮和输入字段来增加、减少和重置一个数字。
| 测试具有挑战性 |
对于中级的 Angular 开发者来说，这可能看起来很简单。这是有意的。本指南假设您已经了解 Angular 的基础知识，并且能够构建一个计数器组件，但在测试细节方面遇到了困难。
这个示例的目标是：
-
简单性：快速了解组件应该做什么。
-
涵盖核心 Angular 功能：具有状态的可重用组件，输入、输出、模板、事件处理。
-
可扩展性：更复杂应用架构的起点。
| 状态管理 |
计数器有三种不同的状态管理解决方案：
-
独立的、自包含的计数器组件，它持有自己的状态。
-
使用依赖注入连接到服务的计数器。它与其他计数器共享状态，并通过调用服务方法来更改状态。
-
连接到中央 NgRx Store 的计数器（NgRx 是一个流行的状态管理库）。计数器通过分派 NgRx Action 间接更改状态。
尽管计数器看起来很容易实现，但从测试的角度来看，它已经提供了宝贵的挑战。
Flickr 图片搜索
该应用程序允许您在流行的图片托管站点 Flickr 上搜索照片。
| 典型的应用程序流程 |
首先，您输入搜索词并开始搜索。然后，查询 Flickr 搜索 API。其次，呈现搜索结果的缩略图。第三，您可以选择一个搜索结果查看照片的详细信息。
该应用程序的实现相对简单和直观。但它也提出了一些重要的问题：
-
应用程序结构：如何将责任划分为组件并建立依赖关系。
-
API 通信：如何通过发出 HTTP 请求获取数据并更新用户界面。
-
状态管理：如何保存状态，在组件树中传递状态以及如何修改状态。
Flickr 搜索提供了两种不同的状态管理解决方案：
| 状态管理 |
-
顶级组件中管理状态，并通过组件树传递状态，并使用 Outputs 进行更改。
-
状态由 NgRx Store 管理。组件连接到存储库以获取状态并分派 Actions。状态在 Reducer 中进行更改。Action 的副作用由 NgRx Effects 处理。
一旦您能够为这个示例应用程序编写自动化测试，您就能够测试大多数典型 Angular 应用程序的功能。