Angular2 + jquery autocomplete 구성 요소 : spec 파일 내부의 구성 요소에서 메소드를 호출 할 수 없습니다.

Question

API에서 데이터를 가져 오기 위해 서비스를 호출하는 angular2에 jquery 자동 완성 메소드가 사용되었습니다.

export class myComponent { 
private myVar; 
private binding1; 
private binding2; 
constructor(@Inject(ElementRef) private elementRef: ElementRef,private _myService: MyService) { 

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

private ngOnInit() { 
    var _this = this; 
    this.myVar = $(this.elementRef.nativeElement).children().eq(0).autocomplete({ 
     source: function(request,callback){ 
      _this.mainMethod(request,callback); 
     }, 
delay:0, 
select: (event, ui) => { 
// …}, 
open: function(e,ui) 
{ 
    //… 
}, 
appendTo: $('body') 
}); 

//renderMethod add data to the view using $().append() 

public mainMethod (res, callback) { //gets called from inside autocomplete 
if(condition 1) { 
//renders data from service by calling methodOnService() 
//returns binding1 and binding2 which gets rendered in view (see html) 
} 
else { 
//call anotherMethod(); 
//sets binding1 and binding2 which gets rendered in view (see html) 

} 
} 
public anotherMethod() { 
//… 
} 

myComponent.html :

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

나는 그것이 jQuery로 각 혼합되어 있기 때문에 열심히하지 않은 (코드를 테스트하기 위해 찾는거야 여기 myComponent.ts입니다 나는 잘 알고있다). 하지만 지금은 method1, method2, mainMethod, anotherMethod를 테스트 파일에서 호출하여 더 많은 코드 커버리지를 얻고 싶습니다.

myComponent.spec.ts 파일 : 심지어 방법 항목 및 방법 2를 호출

fit(‘my component test file’,inject([TestComponentBuilder, MyComponent, ElementRef], (tcb:TestComponentBuilder) => { 
     tcb.createAsync(MyComponent) 
      .then((fixture) => { 

       const element = fixture.debugElement.nativeElement; 
       const instance = fixture.componentInstance; 
       console.log("component instance", fixture.componentInstance); 
       fixture.componentInstance.binding2 =12; 
       fixture.componentInstance.binding1 = 'aapl'; 

       spyOn(instance, "methodOnService"); 
       spyOn(instance,"anotherMethod"); 
       fixture.detectChanges(); //while debugging, it invokes 'ngOnInit' method but doesn't invoke autocomplete method 
       fixture.componentInstance.symbol= 'aa'; 
       fixture.componentInstance.binding2 =12; 
       fixture.detectChanges(); //it doesn't even invoke 'ngOnInit' 


       expect(instance.methodOnService.calls.any()).toEqual(true); //error : Expected false to equal true 
       expect(instance.anotherMethod).toHaveBeenCalled(); 
// error :Expected spy anotherMethod to have been called. 

, 나는 사양에 this.myVar을 조롱 할 수없는거야? 어떻게 다양한 방법을 시험해보아야합니까?

Answer 1

실제로 답변 (정말 문제를 이해하지 않습니다)하지만 몇 가지 제안은 (코드에서 참조 주석) : 당신이 모의`당신이 무엇을 this.myVar` 시도에 의해 무슨 소리

export class myComponent { 
    private myVar; 
    private binding1; 
    private binding2; 

    // remove `@Inject(ElementRef)` because it's redundant whent the type is 
    // also `ElementRef` 
    constructor(private elementRef: ElementRef,private _myService: MyService) { 
    } 

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

    private ngOnInit() { 
    //var _this = this; 
    this.myVar = $(this.elementRef.nativeElement).children().eq(0).autocomplete({ 
     source: (request,callback) => { // <<=== use arrow instead of `function` 
      this.mainMethod(request,callback); 
     }, 
    delay:0, 
    select: (event, ui) => { 
    // …}, 
    open: (e,ui) => { // <<=== use arrow instead of function 
     //… 
    }, 
    appendTo: $('body') 
    }); 

    //renderMethod add data to the view using $().append() 

    public mainMethod(res, callback) { //gets called from inside autocomplete 
    if(condition 1) { 
     //renders data from service by calling methodOnService() 
     //returns binding1 and binding2 which gets rendered in view (see html) 
    } else { 
     //call anotherMethod(); 
     //sets binding1 and binding2 which gets rendered in view (see html) 
    } 
    } 

    public anotherMethod() { 
    //… 
    } 
}