angular2 test, how to test event is bound to an element

Question

I am writing an angular2 unit test for a component. With fully using JQuery it's possible to find what event is bound to an element. However in Angular2, I am not sure it's possible or not

For example, the following code has a click event, which is a public function of a component

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

By reading DOM element, I can make it sure all properties and data binding is correct by running a test. Only thing that I don't know is, "event binding is correct or not" because the generated html is like the following

      <button>Login</button>

I want to make it sure someone does not delete this event binding in the future by writing a test for it.

In summary, how do I know event is properly bound to DOM element?

EDIT: Is there a way to know there is click event without actually clicking it?

Why don't you test that the function inside is called? If it is not, you can assume that somebody removed it. — Eric Martinez, Mar 16 '16 at 15:06

score 2 · Answer 1 · edited May 23 '17 at 12:09

2

You could use the approach below (calling the 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();
  });
}));

See this question for more details:

How can I trigger a JavaScript event click

edited May 23 '17 at 12:09

Community

1
1

answered Mar 16 '16 at 15:19

Thierry Templier

198,364
44
396
360

Is there a way to know there is click event without clicking it? I might be wrong to ask this approach instead of triggering click event. – allenhwkim Mar 16 '16 at 16:07

angular2 test, how to test event is bound to an element

1 Answers1

Linked