Unit Testing Keyup AngularJS

Question

I am having the hardest time trying to figure out how to write unit tests for this simple directive. Any help would be greatly appreciated.

Quick description: left and right arrow keys will change the focus of the test component.

import { Directive, HostListener, QueryList, ElementRef } from '@angular/core';

@Directive({
  selector: '[giTabMenuKeyboardControls]'
})

export class TabMenuKeyboardControlsDirective {
  constructor(private el: ElementRef) { }

  @HostListener('keyup', ['$event']) onkeyup(e: KeyboardEvent) {
    const tabs: QueryList<any> = this.el.nativeElement.querySelectorAll('[role="tab"]');
    const currentFocused = document.activeElement;
    const index = Array.prototype.indexOf.call(tabs, currentFocused);

    // Left Arrow
    if (e.keyCode === 37) {
      currentFocused.previousElementSibling ? tabs[index - 1].focus() : tabs[tabs.length - 1].focus();
    }
    // Right Arrow
    if (e.keyCode === 39) {
      currentFocused.nextElementSibling ? tabs[index + 1].focus() : tabs[0].focus();
    }
  }
}

Here's what it looks like while i'm getting started.

import { TestBed, ComponentFixture} from '@angular/core/testing';
import { Component, DebugElement, Input} from '@angular/core';
import { By } from '@angular/platform-browser';
import { TabMenuKeyboardControlsDirective } from './tab-menu-keyboard-controls.directive';

// When creating test for a directive we need to provide a dummy component
@Component({
  template: `<div class="tab-menu" role="tablist" giTabMenuKeyboardControls>
  <button role="tab">test 1</button>
  <button role="tab">test 2</button>
</div>`
})

class TestTabMenuKeyboardControlsComponent {
}

describe('Directive: TabMenuKeyboardControlsDirective', () => {

  let component: TestTabMenuKeyboardControlsComponent;
  let fixture: ComponentFixture<TestTabMenuKeyboardControlsComponent>;
  let buttonElement: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ TabMenuKeyboardControlsDirective, TestTabMenuKeyboardControlsComponent ]
    });

    fixture = TestBed.createComponent(TestTabMenuKeyboardControlsComponent);
    component = fixture.componentInstance;
    buttonElement = fixture.debugElement.query(By.css('button'));
  });

  it('on key press', () => {
    buttonElement.triggerEventHandler('keyup', null);
    fixture.detectChanges();
  });

});

How do I check for the individual keys and focus?

Thanks again.