如何使用无错误模式模拟 Angular 组件
介绍
模拟是测试 Angular 应用的好方法，因为它使维护更加容易，并有助于减少未来的错误。有一些复杂的工具（例如 XUnit）可用于模拟 Angular CLI 项目。
仅当您使用原始 Jasmine + Angular Testbed 时，才可以执行本指南中描述的模拟方法。但是，您可以使用 Spectator（用于减少测试设置的样板）和ng-mocks来模拟组件、管道和指令。
集成测试与单元测试？
如果您决定创建集成测试，则可以避免模拟。但是，如何决定是创建单元测试还是集成测试呢？
在以下情况下创建单元测试：
• 测试单元包含需要单独测试的逻辑，并确保功能按预期运行。
• 您正在测试与第三方库的集成。
在以下情况下创建集成测试：
• 要创建有意义的测试，需要组件之间的集成。
• 您正在测试一个包含简单逻辑且需要与其他组件通信以创建有效测试的组件。
• 您需要验证与任何类型的第三方库的集成。
模拟组件
您可以通过浅层测试轻松避免模拟组件，浅层测试使用架构： [NO_ERRORS_SCHEMA]，因此测试模板下的组件不会实例化组件标签。如果您有一个需要与另一个组件交互的测试（例如，通过视图子项），如果您不想创建集成测试，则需要模拟该组件。
您经常会在 Angular 库（例如 Angular Routing 库）的单元测试中找到一个更易于模拟的测试模块。您应该通过在组件文件旁边创建一个*my-component-name*.component.mock.ts来为要为其创建模拟的组件创建类似的内容。这样，您将轻松获得该组件的模拟。您还可以让模拟实现该组件，以确保模拟和组件公开类似的方法。
一旦为组件创建了模拟文件，在需要时就可以轻松获取该组件的模拟。
这里给出了一个组件模拟的示例：
@Component({
selector: 'app-todo-item',
template: ''
})
export class MyToDoListComponentMock implements OnInit, MyToDoListComponent {
@Input() public myToDoList: MyToDoList;
@Input() public viewOnlyTODO: boolean;
@Output() public todoRemove = new EventEmitter();
@Output() public todoModify = new EventEmitter();
constructor() { }
public ngOnInit() {
}
public itemClick() {
}
public removeClick() {
}
public modifyClick() {
}
}
然后导入模拟，如下所示：
TestBed.configureTestingModule({
declarations: [
MyToDoListComponentMock,
AddTodoListComponentMock
],
...
您可能希望有一种更简单、更少样板的方式来为 Angular 中的组件创建模拟，例如使用 Jasmine 间谍创建它们。但您必须将组件装饰器应用于类才能使其成为组件。
结论
您在本指南中了解了如何在 Angular 测试中模拟依赖项。与其他测试库（例如 XUnit）相比，Angular 测试设置非常简单，但某些技巧可以减少在单元测试中创建模拟的工作量。单元测试应该是测试覆盖率中最重要的方面，并且它们最容易维护。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~