angular2测试，如何测试事件绑定到一个元素

Posted 2023-02-23

【中文标题】angular2测试，如何测试事件绑定到一个元素

【英文标题】：angular2 test, how to test event is bound to an element

【发布时间】：2016-07-02 12:56:05

【问题描述】：

我正在为一个组件编写一个 angular2 单元测试。 完全使用 JQuery 可以找到绑定到元素的事件。但是在 Angular2 中，我不确定这是否可能

比如下面的代码有一个点击事件，是一个组件的公共函数

      <button (click)="doLogin()" [disabled]="myDisabled">Login</button>

通过读取 DOM 元素，我可以通过运行测试来确保所有属性和数据绑定都是正确的。唯一我不知道的是，“event 绑定是否正确”，因为生成的 html 如下所示

      <button>Login</button>

我想通过为其编写测试来确保将来不会有人删除此事件绑定。

总之，我如何知道事件是否正确绑定到 DOM 元素？

编辑： 有没有办法知道有点击事件而不实际点击它？

【问题讨论】：

为什么不测试一下里面的函数是否被调用呢？如果不是，您可以假设有人删除了它。

【参考方案1】：

您可以使用以下方法（调用click：

it('should render list', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => 
  return tcb.createAsync(MyList).then((componentFixture: ComponentFixture) => 
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('li').length).toBe(5);
    document.getElementById('test').click();
  );
));

查看这个问题了解更多详情：

How can I trigger a javascript event click

【讨论】：

有没有办法知道有点击事件而不点击它？问这种方法而不是触发点击事件可能是错误的。