Angular中的單元測試

• 基本
  • 在項目根目錄下執行ng test命令即執行單元測試
  • 每一個component下面的xxx.component.spec.ts就是該component對應的單元測試文件
    • 使用ng generate xxx來生成component時會自動生成.spec.ts單元測試文件，也能夠經過指定參數來不讓它生成
  • 依賴
    • 若是該component依賴了新的module，即便是配在上級的xxx.module.ts中的，這個xxx.component.spec.ts單元測試文件中也要單獨引用該新module。
      • 其實這個和java等語言的單元測試同樣，單元測試自己不使用項目配置的依賴，而是本身進行引用。
    • 能夠使用@Component+class ScreenshotComponent定義要依賴的component（其實和在單獨的文件裏定義component相似，只是class前面沒有加export），用於後面引入依賴
      • 在這些定義的要依賴的component中，須要聲明該業務component中的成員及類型，如selectedXXX;
    • 在這段代碼中定義和編譯依賴的module和component：describe('XXXComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({…...}).compileComponents();}));});
  • 測試準備
    • 這些包含在beforeEach中的腳本貌似只是至關於測試準備，相似於在Junit的BeforeTest中準備測試環境、資源。beforeEach能夠有多個，能夠有異步的。
  • jasmine.createSpyObj
• 下面的實例單元測試腳本，其實沒有測什麼邏輯，只是試着加載了一下component，看有沒有報錯。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { XXXComponent} from './xxx.component';
import { Component, Input } from '@angular/core';
import { NavbarService } from '../../core/navbar/navbar.service';
import { of } from 'rxjs/observable/of';
import { ActivatedRoute } from '@angular/router';
import { Logger } from 'sinint-application-core-spa';
import { XXXService } from '../shared/xxx.service';
import { TimeframeService } from '../shared/timeframe.service';
import { XXX } from '../models/xxx.model';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@Component({ selector: 'xxx-screenshot', template: '' })
class XXXScreenshotStubComponent {
  @Input() initWithRootAtStart = false;
  @Input() selectedXXX: string;
}

describe('XXXComponent', () => {
  let component: XXXComponent;
  let fixture: ComponentFixture<XXXComponent>;

  const urlSegment = [{ path: '', parameters: [] }];
  const route = { url: of(urlSegment), snapshot: '' };

  beforeEach(async(() => {
    const xxxService = jasmine.createSpyObj('XXXService', ['getChildrenXXX', 'getXXX']);
    const timeframeService = jasmine.createSpyObj('TimeframeService', ['getSelectedtimeframe']);
    const navbarService = jasmine.createSpyObj('NavbarService', ['canNavigateBack']);
    const logger = jasmine.createSpyObj('Logger', ['error', 'info']);

    timeframeService.getSelectedtimeframe.and.returnValue(of({ count: 24, unit: 'today', value: 'today' }));

    TestBed.configureTestingModule({
      imports: [InfiniteScrollModule],
      declarations: [
        XXXComponent
      ],
      providers: [
        { provide: XXXService, useValue: xxxService },
        { provide: TimeframeService, useValue: timeframeService },
        { provide: NavbarService, useValue: navbarService },
        { provide: ActivatedRoute, useValue: route },
        { provide: Logger, useValue: logger }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(XXXComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});