Angular2는 ngOnInit 오류로 EventEmitter 구독 모듈을 테스트합니다.

Question

작성한 Angular2 구성 요소에 대한 테스트 모듈을 작성하는 데 문제가 있습니다. 해당 컴포넌트는 ngOnInit 메소드에서 다른 서비스의 EventEmitter에 등록합니다. 그런 다음이 구성 요소는이 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입니다. 나는 거기에 많은 기사/게시물이있을 것이라고 확신한다.