Angular2 ngOnInitエラーのEventEmitterサブスクリプションでモジュールをテストする

Question

私が作成したAngular2コンポーネント用のテストモジュールを作成するのに問題があります。問題のコンポーネントは、別のサービスのEventEmitterにngOnInitメソッドでサブスクライブします。コンポーネントはこのEventEmitterにサブスクライブされ、変更を待ち受けます。

import { Component } from "@angular/core"; 
import { Product } from "../../../classes/Product"; 
import { ProductService } from "../../../services/product.service"; 
import { ConfigObject } from "../../../ConfigObject"; 
import { productHelper } from "../../../helpers/productHelper"; 


@Component({ 
    selector: 'product-component', 
    templateUrl: '/app/views/catalog/products/product-dashboard.html', 
    moduleId: module.id 
}) 

export class ProductComponent { 
    globals = ConfigObject; 
    products: Product[] = []; 
    productsLoaded = false; 

    productPayload = { 
     order   : 'asc', 
     order_by  : 'title', 
     category_id  : 0, 
     resize   : true, 
     imgHeight  : 200, 
     imgWidth  : 200, 
     active   : 1, 
     searchTerm  : '', 
     manufacturer : null 
    }; 

    constructor(
     private _productService: ProductService 
    ) { 

    } 

    getProducts(filters) { 
     this.productsLoaded = false; 

     this._productService.getProducts(filters) 
      .subscribe(
       products => { this.products = productHelper.processImagesAndDownloads(products)}, 
       ()  => { }, 
       ()  => { this.productsLoaded = true } 
     ); 
    } 

    ngOnInit() { 
     this._productService.emitter.subscribe(
      (products) => { 
       this.products = productHelper.processImagesAndDownloads(products); 
      }, 
      ()  => { }, 
      ()  => { } 
     ); 

     this.getProducts({}); 
    } 

} 

あなたは_productService.emitter持つEventEmitterが加入しているngOnInitメソッドを使用して、見ることができるように：ここで問題になっているコンポーネントです。

私はspyOnメソッドを使用してこのイベントエミッタをモックしようとしましたが、成功しませんでした。私はこのコンポーネントのテストを正しく行うことができません。誰もが、問題はここにあるものを見ることができます。

import { ProductService } from "../../../../services/product.service"; 
import { TestBed, ComponentFixture, async } from "@angular/core/testing"; 
import { ProductComponent } from "../../../../components/catalog/products/ProductComponent"; 
import { HttpModule } from "@angular/http"; 
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; 

let MockProductService = { 
    emitter:() => {} 
}; 

let comp: ProductComponent; 
let fixture: ComponentFixture<ProductComponent>; 
let de:  DebugElement; 
let el:  HTMLElement; 

describe('Component: Product Component',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       ProductComponent 
      ], 
      providers: [ 
       { 
        provide: ProductService, useValue: MockProductService 
       } 
      ], 
      imports: [ 
       HttpModule 
      ], 
      schemas: [CUSTOM_ELEMENTS_SCHEMA] 
     }); 
    }); 

    it('Should check that products are loaded in the template', async(() => { 

     TestBed.compileComponents() 
      .then(() => { 

       fixture = TestBed.createComponent(ProductComponent); 
       comp = fixture.componentInstance; 

       spyOn(MockProductService, 'emitter').and.returnValue({ 
        subscribe:() => {} 
       }); 
       comp.ngOnInit(); 

       expect(MockProductService.emitter).toHaveBeenCalled(); 
     }); 
    })); 

}); 

私は、受信エラーがある：

Failed: Uncaught (in promise): TypeError: this._productService.emitter.subscribe is not a function 

Answer 1

emitterは、コンポーネントからのメソッドとして呼び出されません。それが唯一の財産

this._productService.emitter 

としてアクセスされ、それは決してメソッドとして呼び出さないますので、あなたのスパイは無用です。

emitterの値をObservableに割り当てることができます。こうすることで、コンポーネントが加入したときに、それは実際にあなたはまた、モックのgetProductsメソッドを処理するために必要になるだろう

import 'rxjs/add/observable/of'; 

MockProductService.emitter = Observable.of(products); 

// don't call ngOnitInit. Use detectChanges instead 
fixture.detectChanges(); 

// wait for observable subscription to resolve 
fixture.whenStable().then(() => { 
    // do other stuff 
    expect(comp.products).toBe(whatever) 
}) 

値を取得します。

これ以外にも、EventEmitterは実際にサービスに使用されることはありません。そのためにはSubjectを使用してください。彼らはほとんど同じことですが、それでもEventEmitterをこの方法で使用しないことをお勧めします。ちょうどGoogleの使用方法Subject秒。私はそこに記事の束/投稿があると確信しています。