Angular2 + jQuery自动完成组件:无法在规范文件中调用组件上的方法 [英] Angular2 + jquery autocomplete Component: unable to call methods on component inside spec file
问题描述
我在angular2内部使用了jQuery自动完成方法,该方法调用service从api获取数据。
这是 myComponent.ts :
I have jquery autocomplete method being used inside angular2 which calls service to fetch data from api. Here is 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以获得更多代码覆盖率。
I’m finding it hard to test the code since it is mixing angular with jquery (which is not good I know). But right now, I want to call method1, method2, mainMethod, anotherMethod from my test file to get more code coverage.
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,我也无法在spec中模拟this.myVar吗?我应该如何测试各种方法?
Even For calling method1 and method2, I'm unable to mock this.myVar in spec ? how should i go about testing various method ?
推荐答案
实际上不是答案(不要确实理解问题),但有一些建议(请参见代码中的注释):
Not actually an answer (don't really understand the problem) but some suggestions (see comments in code):
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() {
//…
}
}
这篇关于Angular2 + jQuery自动完成组件:无法在规范文件中调用组件上的方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!