如何對組件進行單元測試

Question

我正在Angular App上運行單元測試，但是組件尚未初始化。 它需要三個參數，我將模擬服務，但是前兩個參數呢？

import { HttpClient } from '@angular/common/http';
import { NgxSpinnerService } from 'ngx-spinner';

constructor(private http: HttpClient,
    private spinner: NgxSpinnerService,
    private someService: SomeService) {
    }

預期：組件應創建

實際：未創建組件

Answer 1

為httpClient導入HttpClientTestingModule，並在導入中也添加NgxSpinnerModule

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NgxSpinnerModule } from 'ngx-spinner';
...

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    HttpClientTestingModule, // for httpClient
    NgxSpinnerModule

   ],
   declarations: [ YourComponent],
   providers: [service],
   schemas: [NO_ERRORS_SCHEMA]
 })
 .compileComponents();
 fixture = TestBed.createComponent(YourComponent);
 component = fixture.componentInstance;
}));

Answer 2

這是一個組成部分！ 您應該使用此模式。

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NgxSpinnerModule } from 'ngx-spinner';
...

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    HttpClientTestingModule, // for httpClient
    NgxSpinnerModule

   ],
   declarations: [ YourComponent],
   providers: [service],
   schemas: [NO_ERRORS_SCHEMA]
 })
 .compileComponents();
}));

beforeEach(async() => {
  fixture = TestBed.createComponent(AnalyticsComponent);
  component = fixture.componentInstance;


  // @Inputs
  component.metric    = 'sales';


  component.ngOnInit(); // <===== importand
  component.ngAfterViewInit(); // <===== importand
  await fixture.whenStable(); // <===== importand
  fixture.detectChanges(); // <===== importand
});