angular - 角度集成测试:如何在 MouseEvent 上指定目标
问题描述
我试图通过在其中一个 HTML 元素上使用“triggerEventHandler”来在我的集成测试中调用单击事件。我希望事件的“目标”属性由“triggerEventHandler”设置。那没有发生。当我执行测试时,控制台中记录了以下错误:“ Cannot read property 'tagName' of null ”,当我尝试获取目标元素的 tagName 时会发生这种情况。
我应该如何实施这个测试?
看法
<h1 class="h1-class" (click)="click($event)" (contextmenu)="rightClick($event)">H1</h1>
<h2 class="h2-class" (click)="click($event)" (contextmenu)="rightClick($event)">H2</h2>
零件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'biq-dbg',
templateUrl: './biq-dbg.component.html',
styleUrls: ['./biq-dbg.component.less']
})
export class BiqDbgComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
click(event: MouseEvent) {
console.log(event);
let targetElement = event.target as HTMLElement;
if (targetElement.tagName.toLocaleLowerCase() == "h1")
console.log("H1 was clicked");
if (targetElement.tagName.toLocaleLowerCase() == "h2")
console.log("H2 was clicked");
}
rightClick(event: MouseEvent) {
console.log(event);
let targetElement = event.target as HTMLElement;
if (targetElement.tagName.toLocaleLowerCase() == "h1")
console.log("H1 was right-clicked");
if (targetElement.tagName.toLocaleLowerCase() == "h2")
console.log("H2 was right-clicked");
}
}
规格
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser'
import { BiqDbgComponent } from './biq-dbg.component';
fdescribe('BiqDbgComponent', () => {
let component: BiqDbgComponent;
let fixture: ComponentFixture<BiqDbgComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BiqDbgComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BiqDbgComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('h1 should react to click', () => {
let h1 = fixture.debugElement.query(By.css(".h1-class"));
let mouseEvent: MouseEvent = new MouseEvent("click", { clientX: 10, clientY: 20, button: 0});
h1.triggerEventHandler("click", mouseEvent);
fixture.detectChanges();
})
fit('h1 should react to right-click', () => {
let h1 = fixture.debugElement.query(By.css(".h1-class"));
let mouseEvent: MouseEvent = new MouseEvent("contextmenu", { clientX: 10, clientY: 20, button: 2});
h1.triggerEventHandler("contextmenu", mouseEvent);
fixture.detectChanges();
})
});
解决方案
“triggerEventHandler”不模拟真实的事件,所做的只是为给定的事件名称调用所有侦听器。
为了模拟真实事件,例如鼠标单击或鼠标右键单击,您必须使用“dispatchEvent(event)”:如何使用 javascript 模拟鼠标单击。
推荐阅读
- php - 在 Laravel 中 queue:work 和 config/queue.php 传递的参数之间的区别
- javascript - JavaScript scrollBy(x,y) 不适用于 Android WebView 中的样式列宽
- kubernetes - 只能通过 HTTP 而不是 HTTPS 访问我的应用程序
- c# - 由于计时和线程问题,NUnit 测试执行失败
- php - PHP上传本地文件无按钮
- reactjs - 在反应中触发 NavLink 上的焦点()
- python - 使用 dataframe.at 时浮点数被舍入,而不是 dataframe.iloc
- javascript - setInterval 和 setTimeout 中的间隔不准确
- asciidoc - 如何为现有的 Asciidoctor Asciidoc 宏创建自定义 HTML 输出?
- java - 来自 SQL 数据库的带有时间的 JFreechart 图表