Question

我想测试一种方法，这些方法有助于在Modal Window容器外部关闭时关闭模态窗口。

组件方法

public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => { this.visible = false; }, 200);
  }

public onModalClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('dialog-container')) {
      this.hide();
    }
  }

单元测试

it('should call hide method', fakeAsync(() => {
    component.hide();
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component.visible).toEqual(false);
      tick(200);
      expect(component.visibleAnimate).toEqual(false);
    });
  }));



it('should call onModalClicked()', () => {
    const mockEvent = new Event('click'); --> Error
    component.onModalClicked(mockEvent);
    console.log(component.visible);
  });

我的单元测试在hide()方法上正常运行，如果我以正确的方式进行，请告诉我。

但我真的很难测试onModalClicked()方法，因为它将 MouseEvent 作为参数。

在我的单元测试方法中，发生了Event和MouseEvent不匹配错误，这是obviouse biut如何覆盖这个方法？

Answer 1

它实际上不需要 MouseEvent，它只需要quack like one。因此，您可以创建一个适合该帐单的虚拟对象并将其强制转换为MouseEvent，以使其符合您的方法参数类型。例如：

function createMouseEvent(hasClass, clazz): MouseEvent {
  const event = { target: { classList: { contains: (arg) => false } } }
  if (hasClass) {
    event.target.classList.contains = (cls) => {
      expect(cls).toBe(clazz)
      return true
    }
  } 
  return <any>event;
}

然后要测试它，您不需要实际测试可见性。这是hide方法的工作（改变可见性）。您只想测试behavior的{{1}}，即根据包含类的元素调用onModalClicked或不调用hide。所以你可以在hide函数上spy，然后检查它是否被调用。

it('onModalClicked() should call hide() when element contains class', () => {
  spyOn(component, 'hide')
  const event = createMouseEvent(true, 'dialog-container');
  component.onModalClicked(event);

  expect(component.hide).toHaveBeenCalled()
})

it('onModalClicked() should NOT call hide() when element DOES NOT contain class', () => {
  spyOn(component, 'hide')
  const event = createMouseEvent(false, null);
  component.onModalClicked(event);

  expect(component.hide).not.toHaveBeenCalled()
})

Angular2单元测试鼠标事件

1 个答案: