Angular2 + jquery autocomplete Компонент: невозможно вызвать методы для компонента внутри файла спецификации

Question

У меня есть метод автозаполнения jquery, который используется внутри angular2, который вызывает услугу для извлечения данных из api. Вот myComponent.ts:

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 (который не является хорошо знаю). Но прямо сейчас я хочу вызвать метод method1, method2, mainMethod, anotherMethod из моего тестового файла, чтобы получить больше покрытия кода.

myComponent.spec.ts файл:

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. 

Даже для вызова method1 и method2, я не могу издеваться this.myVar в спецификации? как мне нужно тестировать различные методы?

Answer 1

Не на самом деле ответ (не очень понимает проблемы), но некоторые предложения (см комментариев в коде):

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() { 
    //… 
    } 
}