Question

我正在尝试测试一个鼠标输入角度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');
  });

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

想法？

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

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

1 个答案: