sinon - コンポーネントの角度2のテストコンポーネントは定義されていません

Question

私は、Angularチームのquickstartチュートリアルよりもシンプルな（さらに複雑に見える）テストをしようとしています。私はダースかそれ以外の記事を見てみましたが、おそらく最後の6〜12ヶ月間のng2フレームワークの "流動的な"性質のため、現在はかなりのリソースがあります。

私はAngular 2バージョン2.4.10、Typescript、Sinonバージョン2.1.0、Webpack 2（問題があればag-grid）を使用しています。

コンポーネントコード：

import { ComponentFixture, TestBed } from "@angular/core/testing"; 
import { expect } from "chai"; 
import { spy } from "sinon"; 
import { EventListComponent } from "./event-list.component"; 

// dependency of component 
import { EventDataService } from "./data-service/event-data.service"; 
import { AgGridModule } from "ag-grid-angular/main"; 

let component: EventListComponent; 
let fixture: ComponentFixture<EventListComponent>; 

let spies = { 
    beginPollingLoop: {} 
}; 

let eventServiceStub = { 
    getEvents: Observable.from([]) 
}; 

describe("EventListComponent",() => { 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [AgGridModule.withComponents([])], 
      declarations: [ EventListComponent ], 
      providers: [{ provide: EventDataService, useValue: eventServiceStub }] 
     }); 
     fixture = TestBed.createComponent(EventListComponent); 
     component = fixture.componentInstance; // component is undefined 

     spies.beginPollingLoop = spy(component, "beginPollingLoop"); 
    }); 

    describe("EventListComponent",() => { 
     describe("When the component initializes",() => { 
      it("should set loadingEvents to 'false'",() => { 
       expect(component.loadingEvents).to.be.true; 
      }); 
     }); 

     describe("when OnInit() runs",() => { 
      let beginPollingLoop = spy(component, "beginPollingLoop"); 
      expect(beginPollingLoop.called).to.equal(true); 
     });  
    }); 
}); 

：私が最初にこの

import { Component, OnInit } from "@angular/core"; 
import { GridOptions } from "ag-grid"; 
import { EventDataService } from "./data-service/event-data.service"; 
import { OtherService } from "./data-service/other.service"; 
import { ColumnDefs } from "../shared/event-grid/event-grid-column-defs"; 
import { Event } from "./event/event.interface"; 
import { Observable } from "rxjs/Rx"; 

@Component({ 
    templateUrl: "./event-list.component.html", 
    styleUrls: ["./event-list.component.scss"] 
}) 

export class EventListComponent implements OnInit { 

    // grid data & settings 
    private gridOptions: GridOptions; 
    private columnDefs: any; 

    // auto refresh/event-service messaging settings 
    public loadingEvents: boolean; 

    // main data array = holds event list displayed by grid 
    private events: Event[]; 

    // updated question with privateOtherService, which I had missed when I first copied this over 
    constructor(private eventDataService: EventDataService, private otherService: OtherService) { 

     // initialize grid 
     this.gridOptions = <GridOptions>{}; 
     this.gridOptions.columnDefs = ColumnDefs; 

     // initialize flag to indicate we are waiting for events from service 
     this.loadingEvents = false; 
    } 

    beginPollingLoop(): void { 
     this.getEvents(); 

     // ... other logic that will repeat the getEvents call periodically... 
    }; 

    getEvents() { 
     this.loadingEvents = true; 

     // treats response from event service as an observable to subscribe to 
     return this.eventDataService.getEvents() 
      .subscribe(
      (events: Event[]) => { this.events = events; }, 
      (error: any) => // handle errors, 
      () => {this.loadingEvents = false; }); 
    }; 

    ngOnInit(): void { 
     // begin polling loop (using defaults) once component loads 
     this.beginPollingLoop(); 
    } 
}  

オーバースペックコードをコピーしたとき、私が見逃していたコンストラクタでOtherServiceを含める

更新質問私がコンソールに入っている特定のエラーは、 "Uncaught TypeError：未定義のプロパティ 'beginPollingLoop'を読み取れません。デバッガによれば、componentは未定義です。 "TypeError：ヌルのプロパティ 'インジェクタ'を読み取ることができません。

私がテストベッドをビルドしているように感じます。私のコンポーネントのすべての依存関係を正しく登録していない。これは私のcomponentが正しく作成されない原因となります。

ありがとうございます！

Answer 1

私は問題を把握しました。仕様では、componentはTestBedがcomponentを作成しようとしたときに、EventListComponentのコンストラクタで追加サービスが使用されていたために失敗していたためです。私はこれを実感して、そのサービスを私の仕様でも外しました。コンポーネントはうまく作成されました。

これは問題の根本でした - Angularが投げていたエラーが自分のコードのどこかに深く埋もれていたので、私はそれを見ませんでした。 "TestBedがコンポーネントの作成に失敗しました：コンストラクタの引数の不一致"などの有用なものの代わりに、私は正常に作成されたと仮定したコンポーネントを使用しようとしている他のものに関連するエラーを見ていました。これにより、コンポーネントが作成されていないことがわかりました。なぜが失敗しましたか：私が作成していたコンポーネントは、コンストラクタが期待する引数を与えられていませんでした。 `期待（component.beginPollingLoop）.toBeCalled（）と`;

import { ComponentFixture, TestBed } from "@angular/core/testing"; 
import { expect } from "chai"; 
import { spy } from "sinon"; 
import { EventListComponent } from "./event-list.component"; 

// dependency of component 
import { EventDataService } from "./data-service/event-data.service"; 
import { OtherService } from "./data-service/other.service"; 

let component: EventListComponent; 
let fixture: ComponentFixture<EventListComponent>; 

let eventServiceStub = { 
    getEvents: Observable.from([]) 
}; 

// forgot this one 
let otherServiceStub = { 
    getStuff:() => {} 
}; 

describe("EventListComponent",() => { 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [], 
      declarations: [ EventListComponent ], 
      providers: [ 
       { provide: EventDataService, useValue: eventServiceStub }, 
       { provide: OtherDataService, useValue: otherServiceStub } // this was missing 
      ] 
     }); 
     fixture = TestBed.createComponent(EventListComponent); 
     component = fixture.componentInstance; // component is undefined 
    }); 

    describe("EventListComponent",() => { 
     describe("when OnInit() runs",() => { 
      let beginPollingLoop = spy(component, "beginPollingLoop"); 
       expect(beginPollingLoop.called).to.equal(true); 
      });  
     }); 
    }); 
});