angular 2 unit test: How to test keyboard input

Question

I'm trying to write a unit test for an keyboard input. Within my component I have this function to capture my keyboard events:

@HostListener('window:keydown', ['$event'])
  keyboardInput(event: any){
    if(event.code.toLowerCase()==="escape" && this.formProps.ausgeklappt){
      this.closeForm();
      } else if(event.code.toLowerCase()==="enter" && this.dayData.isSelected && !this.formProps.ausgeklappt) {
        console.log("enter wurde gedrückt " + this.dayData.day);
        this.handleHeaderClick();
    }
  }

I tried to simulate the 'escape' event, but failed miserably. My component.spec.ts looks like this:

it('should trigger escape event', () => {
    component.formProps.ausgeklappt = true;
    fixture.detectChanges();
    let spy = spyOn(component, "closeForm");
    const event = new KeyboardEvent("keypress",{
      "key": "escape"
    });
    fixture.nativeElement.dispatchEvent(event)

    component.keyboardInput(event);
    expect(spy).toHaveBeenCalled();
  });

I don't know how to solve this problem and I'm thankful for every help...

Make the test async.

Paul Samsotha
– Paul Samsotha

2017-07-17 06:30:43 +00:00
Commented Jul 17, 2017 at 6:30 — Paul Samsotha
– Paul Samsotha, Commented Jul 17, 2017 at 6:30

BearBytes · Accepted Answer · 2017-07-17 06:45:00Z

4

I had to change it to an Async test. Thanks to @peeskillet ! Also I had to change "key": "escape" to "code": "ESCAPE"

it('should trigger escape event', async(() => {
        component.formProps.ausgeklappt = true;
        fixture.detectChanges();
        let spy = spyOn(component, "closeForm");
        const event = new KeyboardEvent("keypress",{
          "code": "ESCAPE",
        });
        fixture.nativeElement.dispatchEvent(event);

        component.keyboardInput(event);
        expect(spy).toHaveBeenCalled();
      }));

answered Jul 17, 2017 at 6:45

BearBytes

921 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe Over a year ago

Important part: You have to call the handler itself as well component.keyboardInput(event), just dispatching the event is not enough.

diarmuid Over a year ago

for that very reason am doubtful about this solution

Collectives™ on Stack Overflow

angular 2 unit test: How to test keyboard input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related