Угловая - модульное тестирование нажатия клавиш - PullRequest
Новая
       6

Угловая - модульное тестирование нажатия клавиш

0 голосов
/ 30 августа 2018

У меня есть функция, которая обнаруживает нажатие клавиши, и если клавиша нажата = escape, функция срабатывает.

У меня проблемы с подделкой самого KeyboardEvent для передачи.

Я видел это сообщение , но реализация этого решения дает следующий вывод (я console.logged самого события):

LOG: KeyboardEvent {isTrusted: false} Chrome 68.0.3440 (Mac OS X 10.13.6) ConfirmationComponent должен вызывать onDeny при нажатии кнопки ESCAPE FAILED Ожидаемый шпион onDeny был вызван.

component.ts 

@HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    console.log(event);
    // Press escape - close dialog with simulated 'cancel' click
    if (event.code === 'Escape') {
      this.onDeny();
    }
  }

  onDeny() {
     // something is done here
  }

test.ts 

it('should autofocus on cancel button on init', () => {
    spyOn(component, 'onDeny');
    component.keyEvent(ESCAPE);
    expect(component.onDeny).toHaveBeenCalled();
  });

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Попробуйте следующее - 

import { Component, OnInit, Input, EventEmitter, Output, HostListener, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-nav-header',
  templateUrl: './nav-header.component.html',
  styleUrls: ['./nav-header.component.scss']
})
export class NavHeaderComponent implements OnInit {
  @ViewChild('ham')
  hamburgerRef: ElementRef;

  @Output()
  toggleMenu: EventEmitter<void>;

  constructor() {
    this.toggleMenu = new EventEmitter<void>();
  }

  ngOnInit() {}

  emitToggle() {
    this.toggleMenu.emit();
  }

  @HostListener('keydown', ['$event'])
  public handleKeyboardEvent(event: any): void {
    event.stopPropagation();
    switch (event.key) {
      case 'Enter': {
        if (this.hamburgerRef.nativeElement.contains(event.target)) {
          this.emitToggle();
        }
        break;
      }
      case 'Tab': {
        break;
      }
    }
  }
}


 it('it should user emit toogle', () => {
   spyOn(component.toggleMenu, 'emit');
   spyOn(component.hamburgerRef.nativeElement, 'contains').and.returnValue(true);
   component.handleKeyboardEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
   expect(component.toggleMenu.emit).toHaveBeenCalled();
 });
0 голосов
/ 30 августа 2018

Не беспокойтесь о реализации события клавиатуры: оно меняется в каждом браузере и обычно даже не работает.

Вместо этого протестируйте саму свою функцию (оставьте тестирование поведения Angular самим Angular): 

it('should log event and call self.onDeny() when keyEvent', () => {
  const spy1 = spyOn(component, 'onDeny');
  const spy1 = spyOn(console, 'log');
  const eventMock = {code: 'Escape'};
  component.keyEvent(eventMock);
  expect(spy1).toHaveBeenCalledWith();
  expect(spy2).toHaveBeenCalledWith(eventMock);
});
...