测试 Angular 组件 - 基本

组件代码如下。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1>'
})
export class MyAppComponent{
  title = 'welcome';
}

对于角度测试，角度提供其测试实用程序以及测试框架，这有助于以角度编写好的测试用例。角度实用程序可以从 @angular/core/testing 导入

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAppComponent } from './banner-inline.component';

describe('Tests for MyAppComponent', () => {
  
  let fixture: ComponentFixture<MyAppComponent>;
  let comp: MyAppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        MyAppComponent
      ]
    });
  });

  beforeEach(() => {

    fixture = TestBed.createComponent(MyAppComponent);
    comp = fixture.componentInstance;

  });

  it('should create the MyAppComponent', () => {
    
      expect(comp).toBeTruthy();  

  });

});

在上面的例子中，只有一个测试用例解释了组件存在的测试用例。在上面的示例中，使用了角度测试实用程序，如 TestBed 和 ComponentFixture。

TestBed 用于创建角度测试模块，我们使用 configureTestingModule 方法配置此模块，以生成我们要测试的类的模块环境。在执行每个测试用例之前配置测试模块，这就是我们在 beforeEach 函数中配置测试模块的原因。

TestBed 的 createComponent 方法用于创建被测组件的实例。createComponent 返回 ComponentFixture。夹具提供对组件实例本身的访问。