модульный тест ввода угловой мыши не работает

Я пытаюсь проверить ввод мыши в модульном тестировании angular 4 karma. Ошибок нет, но ввод мыши не вызывает метод, привязанный к событию ввода мыши.

  <div class="contacts-content row no-gutters justify-content-between"
       (mouseover)="onMouseEnter($event)"
       (mouseout)="onMouseLeave($event)"
       (click)="click()"
       [ngClass]="{'edit': hover}">

  </div>

В классе компонентов я вызываю методы ниже

  onMouseEnter(event: any) {
    this.hover = true;
    this.elementRef.nativeElement.addClass = 'edit';
  }

  onMouseLeave(event: any) {
    this.hover = false;
    this.elementRef.nativeElement.addClass = 'un-edit';
  }

Тестирование ввода мыши:

  it('should mouse over show the edit options to the user', () => {
    const div = fixture.nativeElement.querySelector('.contacts-content');
    const event = new Event('mouseenter');
    div.dispatchEvent(event);
    expect(component.hover).toBeTruthy('true');
    expect(fixture.nativeElement.querySelector('.col-1').getAttribute('display')).toBeTruthy('inline-block !important');
  });

В моем тесте я пытаюсь вызвать событие ввода мыши, но ожидаемый результат не соответствует. Более того, когда я вижу покрытие кода, метод даже не вызывается.

есть идеи?


angular angular-test angular-unit-test
person Aniruddha Das    schedule 27.09.2017    source источник
comment
Почему не mouseover? const event = new Event('mouseover');   -  person yurzui    schedule 27.09.2017
comment
Я могу попробовать это, но фактический компонент вызывается при вводе мыши, поэтому проверка ввода мыши   -  person Aniruddha Das    schedule 27.09.2017
comment
Это будет работать с mouseover   -  person yurzui    schedule 27.09.2017
comment
Мне удалось заставить директиву mouseenter/mouseleave работать, используя debugEl.triggerEventHandler('mouseenter', {});. В моем случае мне нужно было использовать debugEl = fixture.debugElement.query(By.directive(MyDirectiveClass));, а в директиве есть @HostListener('mouseenter') myHandler() { }.   -  person Jon Onstott    schedule 08.07.2020

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте с triggerEventHandler:

it('should mouse over show the edit options to the user', fakeAsync(() => {
    ...
    div.triggerEventHandler('mouseenter', {});
    tick();
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('.col-1').getAttribute('display')).toEqual('inline-block !important');
}));

или вы можете использовать реальное присоединение события мыши к целевому элементу:

it('should mouse over show the edit options to the user', fakeAsync(() => {
        const div = fixture.debugElement.query(By.css('.contacts-content'));
        let event = new MouseEvent('mouseenter', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        div.nativeElement.dispatchEvent(event);
        tick();
        fixture.detectChanges();
        expect(fixture.nativeElement.querySelector('.col-1').getAttribute('display')).toEqual('inline-block !important');
    }));
person Zivko    schedule 16.10.2019
comment
Только одно замечание по этому поводу: .triggerEventHandler() не нужно использовать с fakeAsync() или tick() (и, вероятно, не с fixture.detectChanges(), но, возможно, это зависит от того, что вы делаете в директиве). - person Jon Onstott; 08.07.2020