Угловое интеграционное тестирование: как указать цель на MouseEvent - PullRequest
Новая
       25

Угловое интеграционное тестирование: как указать цель на MouseEvent

1 голос
/ 30 апреля 2019

Я пытаюсь вызвать событие click в моем интеграционном тестировании, используя «triggerEventHandler» на одном из элементов HTML. Я ожидал, что свойство «target» события будет установлено «triggerEventHandler». Этого не происходит. Когда я выполняю тест, в консоли регистрируется следующая ошибка: « Невозможно прочитать свойство 'tagName' из null ", и это происходит, когда я пытаюсь получить tagName целевого элемента.

Как мне реализовать этот тест?

VIEW 

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

SPEC 

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

1 Ответ

0 голосов
/ 30 апреля 2019

«triggerEventHandler» не имитирует реальное событие , все, что он делает, это вызывает всех слушателей для данного eventName.

Чтобы смоделировать реальное событие, например щелчок мышью или щелчок правой кнопкой мыши, вам нужно будет использовать «dispatchEvent (event)»: Как смоделировать щелчок мыши, используя javascript .

...