Angular 组件类测试

最新推荐文章于 2023-12-05 14:02:54 发布

江小虫儿

最新推荐文章于 2023-12-05 14:02:54 发布

阅读量780

点赞数

分类专栏： Angular 前端开发文章标签： angular.js typescript 前端

本文链接：https://blog.csdn.net/kate_sicheng/article/details/122284320

版权

本文介绍了如何测试Angular组件，包括没有依赖的组件和有依赖的组件。通过new关键字创建组件，使用toBe和toMatch等matchers进行断言，测试@Input和@Output属性，并详细讲解了TestBed在处理有依赖组件测试中的作用。

摘要由CSDN通过智能技术生成

Angular测试组件的基础知识之一是 “测试组件类”。

测试没有依赖的组件类

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

使用 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.