サービスを提供するコンポーネントの角2のテスト仕様

Question

私は角度2のfinal（2.0.1）を使用しています。 私はサービスを提供するコンポーネントを持っています。それを使用するのは唯一のものなので、それが含まれているモジュールではなく、コンストラクタにも注入されているのです。

@Component({ 
    selector: 'my-comp', 
    templateUrl: 'my-comp.component.html', 
    styleUrls: ['my-comp.component.scss'], 
    providers: [MyService], 
}) 
export class MyComponent { 

    constructor(private myService: MyService) { 
    } 
} 

仕様を実装しようとすると失敗します。

describe("My Component",() => { 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [MyComponent], 
     providers: [ 
      { 
       provide: MyService, 
       useClass: MockMyService 
      }, 
     ] 
    }); 

    this.fixture = TestBed.createComponent(MyComponent); 
    this.myService = this.fixture.debugElement.injector.get(MyService); 

}); 

describe("this should pass",() => { 

    beforeEach(() => { 
     this.myService.data = []; 
     this.fixture.detectChanges(); 
    }); 

    it("should display",() => { 
     expect(this.fixture.nativeElement.innerText).toContain("Health"); 
    }); 

}); 

しかし、サービス提供宣言をコンポーネントから収容モジュールに移動すると、テストに合格します。

私がテストベッドのテストモジュールはモックサービスを定義するので、それがあると仮定しますが、コンポーネントが作成されたとき - それは、実際の実装でモックを上書きします...

誰でもコンポーネントをテストするためにどのように任意のアイデアを持っていますサービスを提供し、モックサービスを利用するもの？

Answer 1

@Component.providersを上書きする必要があります。これは、テストベッドの設定で指定したモックよりも優先されるためです。

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

    TestBed.overrideComponent(MyComponent, { 
    set: { 
     providers: [ 
     { provide: MyService, useClass: MockMyService } 
     ] 
    } 
    }); 
}); 

参照：

• Override Component Providers