Angular 角度集成测试：如何在MouseEvent上指定目标

在集成测试中，我试图通过对其中一个HTML元素使用“triggerEventHandler”来调用click事件。我希望事件的“target”属性由“triggerEventHandler”设置。这并没有发生。当我执行测试时，控制台中会记录以下错误：“无法读取null的属性“tagName”，当我尝试获取目标元素的标记名时会发生这种情况

我应该如何实现这个测试

看法

规格

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”
从“./biq dbg.component”导入{biqdbgponent}；
fdescribe（'BiqDbgComponent'，（）=>{
let组件：biqdbg组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[BIQDBG组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（BiqDbgComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
它（'h1应该对点击作出反应'，（）=>{
设h1=fixture.debugElement.query（By.css（“.h1类”）；
让mouseEvent:mouseEvent=newmouseevent（“单击“，{clientX:10，clientY:20，按钮：0}”）；
h1.触发EventHandler（“单击”，鼠标事件）；
fixture.detectChanges（）；
})
拟合（'h1应对右键单击作出反应'，（）=>{
设h1=fixture.debugElement.query（By.css（“.h1类”）；
让mouseEvent:mouseEvent=newmouseevent（“contextmenu”，{clientX:10，clientY:20，button:2}）；
h1.triggerEventHandler（“上下文菜单”，MouseeEvent）；
fixture.detectChanges（）；
})
});

“triggerEventHandler”，只需调用给定事件名的所有侦听器

为了模拟真实事件，如鼠标单击或鼠标右键单击，您必须使用“dispatchEvent（event）”：。

“triggerEventHandler”，所做的只是调用给定事件名称的所有侦听器

为了模拟真实事件，如鼠标单击或鼠标右键单击，您必须使用“dispatchEvent（event）”：

<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();
  })
});