2016-06-01 2 views
4

method1, method2ngOnInit을 포함하는 myComponent가 있습니다.사양 파일에 angular2 구성 요소의 새 인스턴스를 만들어 메서드를 호출 할 수 있습니까?

<input type="text" value="{{symbol}}" size="{{size}}" maxlength="94"><span></span> 

여기 내 사양 파일입니다 : 여기

export class myComponent { 

//input and output declaration 

public myVar; 
constructor(@Inject(ElementRef) private elementRef: ElementRef) { 

} 
public method1() { return this.myVar.val().toUpperCase(); } 
public method2() { return this.myVar .val(""); } 
public ngOnInit() { 

this.myVar = //calling jQuery autocomplete method which in turns calls $.JSON() to get data . 
// 
} 

이 구성 요소에 대한 HTML 템플릿입니다. 삽입되는 값이 모두 대문자로 변환되었는지 확인해야합니다.

describe('myComponent Component',() => { 
    beforeEachProviders(() => [myComponent, provide(ElementRef, { useValue: new MockElementRef() })]); 
    class MockElementRef implements ElementRef { 
     nativeElement = {}; 
    } 

    it('should check uppercase conversion',inject([TestComponentBuilder, myComponent , ElementRef], (tcb:TestComponentBuilder) => { 
      tcb.createAsync(myComponent) 
       .then((fixture) => { 
        const element = fixture.nativeElement.firstChild; 
        element.setAttribute("value", "g"); 
        element.setAttribute("size", 12); //setting size and value for input element 
        var getMyElem= $(element); 

        let ac= new myComponent(fixture.nativeElement); 

        ac.ngOnInit(); //undefined 
    //ac.method1(); unable to call 
        console.log(myComponent.prototype.method1()); //it calls value method but outputs cannot read val of undefined      
        expect(element.getAttribute("value")).toBe("G"); 

       }); 
     })); 
}); 

나는 "G"는 method1()를 호출 한 후에 반환되는 것을 "g"뿐만 아니라 체크 같게 설정 값 "g"를 원한다.

질문 : 권리를 myComponent의 인스턴스를 생성하는 동안 1.Is

는 매개 변수로 fixture.nativeElement을 통과?
2. 또한 $ .JSON 메서드가 구성 요소에서 내부적으로 호출되는 것을 테스트하도록 도울 수 있다면. JSON 요청을 조롱하는 방법?

답변

2

new SomeComponent()으로 구성 요소 인스턴스를 만들지 마십시오. 구성 요소는 Angular로 작성해야 tcb.createAsync(SomeComponent)과 같이 작성해야합니다. myComponentAutocompleteComponent 템플릿에 있으면 fixture에서 쿼리하십시오.

+0

수정 된 코드를 참조 할 수 있습니까? 하나의 구성 요소 ('myComponent')가 있습니다. 'AutocompleteComponent'도 없었습니다 –

+1

코드에 여전히 새로운 myComponent()가 있습니다. 이게 뭐야? –

+0

내 생각에 그는 myComponent에 대한 새 인스턴스를 만들고 method1, method2를 호출하려고합니다. – candidJ