角鼠标进入单元测试不起作用

Question

我正在尝试在 Angular 4 业力单元测试中测试鼠标输入，没有错误但鼠标输入没有调用绑定到鼠标输入事件的方法。

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

在我的测试中，我试图调用鼠标输入事件，但预期的结果不匹配。当我看到代码覆盖率时，甚至没有调用该方法。

有什么想法吗？

Answer 1

尝试使用 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');
    }));