Как смоделировать событие Key Up на входе в модульном тесте Angular -cli 4

Question

В vanilla JS вы можете смоделировать ключ ввода, выполнив:

testComponent.dispatchEvent(new Event("keyup"))

Однако выполнение этого в модульном тесте angular-cli или в консоли не вызывает эту функцию в моем компоненте, который реагирует на ключевые события следующим образом:

  @HostListener('keyup', ['$event'])
  onKeyUp(event: KeyboardEvent) {

Есть идеи?

Answer 1

Вы должны создать событие

const event = new KeyboardEvent('keyup', {
      bubbles : true, cancelable : true, shiftKey : false
});

А затем получить ссылку на debugElement с помощью селектора CSS

const input = debugElement.query(By.css('#id_of_element'));

А потом ссылка на нативный элемент HTML из предыдущего

const inputElement = input.nativeElement;

Назначьте значение для собственного элемента как, теперь значение текстового поля содержит 12.

inputElement.value = 12;

наконец, отправить событие Key Up

inputElement.dispatchEvent(event);

это вызовет функцию

Не забудьте добавить следующую строку перед каждым и убедитесь, что вы определили debugElement

debugElement = fixture.debugElement;

Надеюсь, поможет

Answer 2

В моем случае какое-то значение было пустым, чтобы мне пришлось его явно определить:

function generateKeyUpEvent(value: string): KeyboardEvent {
    const event: KeyboardEvent = new KeyboardEvent('keyup', { bubbles: true, cancelable: true });
    Object.defineProperty(event, 'target', { value: { value } });
    return event;
}

а затем отправить в моем тестовом примере:

component.input.nativeElement.dispatchEvent(generateKeyUpEvent('a'));

Answer 3

В моем компоненте у меня есть

      <textarea [(ngModel)]="selectedAnswer" (keyup)="textAnswerChanged()"></textarea>

Мне нужно было проверить, что ввод в поле вызовет метод службы, который вызывается изtextAnswerChanged(). Просто отправляюkeyupсобытия недостаточно, чтобы вызвать изменение. Вы должны отправить 2 события.

• KeyboardEvent('input')- причиныngModelобновить
• KeyboardEvent('keyup')- причины(keyup)на<textarea>стрелять

      it('should update the selected answer when a value is typed', () => {
  const textArea = element.querySelector('textarea') as HTMLTextAreaElement;

  spyOn(injectedExampleSvc, 'changeAnswer');
  
  //no selection initially
  expect(component.selectedAnswer).toBeUndefined();

  textArea.value = 'foo';
  textArea.dispatchEvent(new KeyboardEvent('input'));
  textArea.dispatchEvent(new KeyboardEvent('keyup'));
  fixture.detectChanges();

  expect(component.selectedAnswer).toEqual('foo');
  expect(injectedExampleSvc.changeAnswer).toHaveBeenCalled();
});