Angular里如何测试一个具有外部依赖的Component
时间:2022-07-25
本文章向大家介绍Angular里如何测试一个具有外部依赖的Component,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
例子:该Component依赖于UserService:
export class WelcomeComponent implements OnInit {
welcome: string;
constructor(private userService: UserService) { }
ngOnInit(): void {
this.welcome = this.userService.isLoggedIn ?
'Welcome, ' + this.userService.user.name : 'Please log in.';
}
}
解决方案
在单元测试文件里,创建一个mock UserService:
class MockUserService {
isLoggedIn = true;
user = { name: 'Test User'};
}
Then provide and inject both the component and the service in the TestBed configuration.
把要测试的Component和UserService配置在providers数组里,Angular会自动完成依赖注入。
beforeEach(() => {
TestBed.configureTestingModule({
// provide the component-under-test and dependent service
providers: [
WelcomeComponent,
{ provide: UserService, useClass: MockUserService }
]
});
// inject both the component and the dependent service.
comp = TestBed.inject(WelcomeComponent);
userService = TestBed.inject(UserService);
});
Then exercise the component class, remembering to call the lifecycle hook methods as Angular does when running the app.
记得在单元测试代码里手动调用Component的lifecycle hook方法:
it('should welcome logged in user after Angular calls ngOnInit', () => {
comp.ngOnInit();
expect(comp.welcome).toContain(userService.user.name);
});
- SpringMVC基本使用关于DisptacherServlet关于ServletContainerInitializer最简单配置接收参数路径变量表单变量
- 测序数据可视化 (一)
- Android log日志
- Activity的生命周期
- GitHub无法访问或访问缓慢解决办法
- 我用 Python 爬取了全国 4500 个热门景点,告诉你国庆哪里去不得?
- Fragment添加、删除、替换
- spring整合hibernate
- Android应用程序中应用图标和名字的设置
- java中的==和equals
- Android手机开机自动启动
- spring Boot 配置文件详解
- Fragment回退栈及弹出方法
- RepeatMasker安装和使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python爬虫抓取指定网页图片代码实例
- PHP变量作用域(全局变量&局部变量)&global&static关键字用法实例分析
- CentOS 7 安装Chrome浏览器的方法
- PHP高级编程之消息队列原理与实现方法详解
- thinkphp5.1框架模板布局与模板继承用法分析
- Linux内核设备驱动之内存管理笔记整理
- Matplotlib 绘制饼图解决文字重叠的方法
- Yii 实现数据加密和解密的示例代码
- 3分钟看懂Python后端必须知道的Django的信号机制
- Hadoop 2.X新特性回收站功能的讲解
- php开发论坛系统
- 详解python中GPU版本的opencv常用方法介绍
- 详解Python IO编程
- PHP 使用位运算实现四则运算的代码
- linux操作系统下配置ssh/sftp和权限设置办法