測試 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。夾具提供對元件例項本身的訪問。