使用 Jasmine 进行 Angular2 测试,mouseenter/mouseleave-test
Angular2 testing with Jasmine, mouseenter/mouseleave-test
我有一个 HighlightDirective,它会在鼠标进入某个区域时突出显示,例如:
@Directive({
selector: '[myHighlight]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()'
}
})
export class HighlightDirective {
private _defaultColor = 'Gainsboro';
private el: HTMLElement;
constructor(el: ElementRef) { this.el = el.nativeElement; }
@Input('myHighlight') highlightColor: string;
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
onMouseLeave() { this.highlight(null); }
private highlight(color:string) {
this.el.style.backgroundColor = color;
}
}
现在我想测试是否在事件上调用了(正确的)方法。所以像这样:
it('Check if item will be highlighted', inject( [TestComponentBuilder], (_tcb: TestComponentBuilder) => {
return _tcb
.createAsync(TestHighlight)
.then( (fixture) => {
fixture.detectChanges();
let element = fixture.nativeElement;
let component = fixture.componentInstance;
spyOn(component, 'onMouseEnter');
let div = element.querySelector('div');
div.mouseenter();
expect(component.onMouseEnter).toHaveBeenCalled();
});
}));
与测试类:
@Component({
template: `<div myHighlight (mouseenter)='onMouseEnter()' (mouseleave)='onMouseLeave()'></div>`,
directives: [HighlightDirective]
})
class TestHighlight {
onMouseEnter() {
}
onMouseLeave() {
}
}
现在,我收到消息:
Failed: div.mouseenter is not a function
那么,有人知道哪个函数是正确的(如果存在的话)吗?我已经尝试过使用 click()..
谢谢!
而不是
div.mouseenter();
这应该有效:
let event = new Event('mouseenter');
div.dispatchEvent(event);
枪手回答的附加信息,您需要向事件发送附加参数。否则不会触发。
参考:https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
let event = new Event('mouseenter', {composed: true});
将是为 HTMLElement 定义事件以调用事件的正确方法。
此外,我在创建组件中遗漏了以下内容:
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges(); // <<< THIS
如果你这样做,它会看起来像测试正在运行,但是通过使用覆盖,你会发现事件没有被触发。
一个棘手的问题。
我有一个 HighlightDirective,它会在鼠标进入某个区域时突出显示,例如:
@Directive({
selector: '[myHighlight]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()'
}
})
export class HighlightDirective {
private _defaultColor = 'Gainsboro';
private el: HTMLElement;
constructor(el: ElementRef) { this.el = el.nativeElement; }
@Input('myHighlight') highlightColor: string;
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
onMouseLeave() { this.highlight(null); }
private highlight(color:string) {
this.el.style.backgroundColor = color;
}
}
现在我想测试是否在事件上调用了(正确的)方法。所以像这样:
it('Check if item will be highlighted', inject( [TestComponentBuilder], (_tcb: TestComponentBuilder) => {
return _tcb
.createAsync(TestHighlight)
.then( (fixture) => {
fixture.detectChanges();
let element = fixture.nativeElement;
let component = fixture.componentInstance;
spyOn(component, 'onMouseEnter');
let div = element.querySelector('div');
div.mouseenter();
expect(component.onMouseEnter).toHaveBeenCalled();
});
}));
与测试类:
@Component({
template: `<div myHighlight (mouseenter)='onMouseEnter()' (mouseleave)='onMouseLeave()'></div>`,
directives: [HighlightDirective]
})
class TestHighlight {
onMouseEnter() {
}
onMouseLeave() {
}
}
现在,我收到消息:
Failed: div.mouseenter is not a function
那么,有人知道哪个函数是正确的(如果存在的话)吗?我已经尝试过使用 click()..
谢谢!
而不是
div.mouseenter();
这应该有效:
let event = new Event('mouseenter');
div.dispatchEvent(event);
枪手回答的附加信息,您需要向事件发送附加参数。否则不会触发。 参考:https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
let event = new Event('mouseenter', {composed: true}); 将是为 HTMLElement 定义事件以调用事件的正确方法。
此外,我在创建组件中遗漏了以下内容:
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges(); // <<< THIS
如果你这样做,它会看起来像测试正在运行,但是通过使用覆盖,你会发现事件没有被触发。 一个棘手的问题。