测试没有依赖的组件类

测试没有依赖的组件类，需要遵循与没有依赖的服务相同的步骤：

使用 new 关键字创建一个组件。
调用它的 API。
对其公开状态的期望值进行断言。

// 没有依赖的组件类
@Component({selector: 'lightswitch-comp',template: `<button (click)="clicked()">Click me!</button><span>{{message}}</span>`
})
export class LightswitchComponent {isOn = false;clicked() { this.isOn = !this.isOn; }get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
}

// 测试
describe('LightswitchComp', () => {it('#clicked() should toggle #isOn', () => {const comp = new LightswitchComponent();expect(comp.isOn).toBe(false, 'off at first');comp.clicked();expect(comp.isOn).toBe(true, 'on after click');comp.clicked();expect(comp.isOn).toBe(false, 'off after second click');});it('#clicked() should set #message to "is on"', () => {const comp = new LightswitchComponent();expect(comp.message).toMatch(/is off/i, 'off at first'); // 正则匹配 i:大小写不敏感。comp.clicked();expect(comp.message).toMatch(/is on/i, 'on after clicked');});
});

知识点：toBe、toMatch、更多matchers

toBe：期望实际值 === 期望值。
toMatch：期望实际值与正则表达式匹配。
更多matchers：https://jasmine.github.io/api/edge/matchers.html

测试 @Input 和 @Output

export class DashboardHeroComponent {@Input() hero!: Hero;@Output() selected = new EventEmitter<Hero>();click() { this.selected.emit(this.hero); }
}

// 测试
it('raises the selected event when clicked', () => {const comp = new DashboardHeroComponent();const hero: Hero = {id: 42, name: 'Test'};comp.hero = hero;// 订阅自定义事件selected发出的值comp.selected.pipe(first()).subscribe((selectedHero: Hero) => { // 验证有触发selected事件，验证emit出来的值expect(selectedHero).toBe(hero)});// 触发selected自定义事件发出值comp.click();
});

测试有依赖的组件类 TestBed

// 有依赖的组件类
export class WelcomeComponent implements OnInit {welcome = '';constructor(private userService: UserService) { }ngOnInit(): void {this.welcome = this.userService.isLoggedIn ?'Welcome, ' + this.userService.user.name : 'Please log in.';}
}class MockUserService {isLoggedIn = true;user = { name: 'Test User'};
}

当组件有依赖时，使用 TestBed 来同时创建[提供(provide)和注入(inject)]该组件及其依赖。
TestBed：配置和初始化用于单元测试的环境，并提供用于在单元测试中创建组件和服务的方法。

// 在 TestBed 配置中【提供】并【注入】所有所需的组件和服务
beforeEach(() => {TestBed.configureTestingModule({// 提供(provide)组件和所依赖的服务providers: [WelcomeComponent,{ provide: UserService, useClass: MockUserService }]});// 注入(inject)组件和所依赖的服务comp = TestBed.inject(WelcomeComponent);userService = TestBed.inject(UserService);
});// 开始测试
it('should not have welcome message after construction', () => {expect(comp.welcome).toBe('');
});it('should welcome logged in user after Angular calls ngOnInit', () => {comp.ngOnInit(); // 别忘了要像 Angular 运行应用时一样调用生命周期钩子方法expect(comp.welcome).toContain(userService.user.name);
});it('should ask user to log in if not logged in after ngOnInit', () => {userService.isLoggedIn = false;comp.ngOnInit();expect(comp.welcome).not.toContain(userService.user.name);expect(comp.welcome).toContain('log in');
});

Angular 组件类测试相关推荐

Angular 依赖的测试和 Fake
原文:Testing and faking Angular dependencies 依赖注入是 Angular 的一个关键特性.这种灵活的方法使我们的可声明和基于类的服务更容易隔离测试. 可摇树依赖 ...
pb怎么封装com组件_从零开始构建 Angular 组件库
NG-ZORRO 组件库官网地址:Ant Design Of Angular Github地址:NG-ZORRO/ng-zorro-antd 更新:视频已上传谢亚东演讲视频_腾讯视频v.qq.co ...
Angular 组件交互
Angular 组件交互组件交互: 组件通讯,让两个或多个组件之间共享信息. 使用场景: 当某个功能在多个组件中被使用到时,可以将该特定的功能封装在一个子组件中,在子组件中处理特定的任务或工作流. ...
Angular组件--动态组件
2019独角兽企业重金招聘Python工程师标准>>> 动态创建组件的应用场景很多,比如动态广告.像浏览器一样动态打开多个页面等等等等要动态创建组件主要需要用到angular中的C ...
存根类测试代码　java_测试双打：模拟，假人和存根
存根类测试代码 java 大多数班级都有合作者. 在进行单元测试时,您通常希望避免使用那些协作者的实际实现方式来避免测试的脆弱性和绑定/耦合,而应使用测试双打:模拟,存根和双打. 本文引用了有关该主 ...
怎样编写测试类测试分支_编写干净的测试–从配置开始
怎样编写测试类测试分支很难为干净的代码找到一个好的定义,因为我们每个人都有自己的单词clean的定义. 但是,有一个似乎是通用的定义: 简洁的代码易于阅读. 这可能会让您感到有些惊讶,但我认为该定义 ...
存根类测试代码　java_嘲弄和存根–了解Mockito的测试双打
存根类测试代码 java 介绍我遇到的一件事是使用模拟框架的团队假设他们在模拟. 他们并不知道Mocks只是Gerard Meszaros在xunitpatterns.com上分类的"测 ...
camel eip_Apache Camel教程– EIP，路由，组件，测试和其他概念的简介
camel eip 公司之间的数据交换增加了很多. 必须集成的应用程序数量也增加了. 这些接口使用不同的技术,协议和数据格式. 但是,这些应用程序的集成应以标准化的方式建模,有效实现并由自动测试支持. ...
怎样编写测试类测试分支_测试技巧–不编写测试
怎样编写测试类测试分支对此没有太多疑问,测试代码的方式是一个有争议的问题. 不同的测试技术由于各种原因(包括企业文化,经验和总体心理观点)而受到不同开发人员的青睐. 例如,您可能更喜欢编写经典的单元 ...

Angular 组件类测试

文章目录

测试没有依赖的组件类

知识点：toBe、toMatch、更多matchers

测试 @Input 和 @Output

测试有依赖的组件类 TestBed

Angular 组件类测试相关推荐

最新文章

热门文章