Как выполнить модульное тестирование события @hostlistener paste с использованием угловых 7 карма / жасмин

Question

У меня проблема с ошибкой в ​​командном окне при выполнении тестовых сценариев с использованием кармы и жасмина, я также использую angular 7.Я написал модульные тесты для телефонной директивы, которая прослушивает событие вставки.Я не получаю ошибки в своем коде, но когда я запускаю тесты, я получаю эту ошибку.Тесты пройдут и пройдут успешно, также я получу покрытие кода, которое мне нужно, но эта ошибка будет появляться каждый раз, когда я запускаю свои модульные тесты.

ERROR in /phone/phone-mask.directive.
spec.ts(124,7): error TS2345: Argument of type '{
 clipboardData: DataTransfer;
}' 
is not assignable to parameter of type 'ClipboardEventInit'.
  Object literal may only specify known properties, and 'clipboardData' does not exist in type 'ClipboardEventInit'.

Я пытался создать событие внутри теста, чтобыскопировать данные в буфер обмена и, возможно, заполнить переменную clipboardData, но это не сработало.Сначала он видит, что значение не существует, а затем создает его и запускается успешно.

Машинописная директива телефона

 @HostListener('paste', ['$event'])
 onPaste($event: ClipboardEvent) {
   $event.preventDefault();
   let pastedInput: string = $event.clipboardData
     .getData('text/plain')
     .replace(/\D/g, ''); // get a digit-only string
   if (pastedInput.length === 0) {
       pastedInput = '';
     } else if (pastedInput.length <= 3) {
       pastedInput = pastedInput.replace(/^(\d{0,3})/, '($1)');
     } else if (pastedInput.length <= 6) {
       pastedInput = pastedInput.replace(/^(\d{0,3})(\d{0,3})/, '($1) $2');
     } else {
       pastedInput = pastedInput.replace(/^(\d{0,3})(\d{0,3})(.*)/, '($1) $2-$3');
     }
   this._phoneControl.control.setValue(pastedInput.substring(0, 14), {emitEvent: false});
 }

Спецификация теста телефона

  it('should test that paste event triggers and sets value to empty string if value is empty', () => {
    fixture.detectChanges();
    const dt1 = new DataTransfer();
    const event1 = new ClipboardEvent('paste', {clipboardData: dt1});
    event1.clipboardData.setData('text/plain', '');
    inputEl.nativeElement.dispatchEvent(event1);
    fixture.whenStable().then(() => {
      expect(component.demForm.controls.PHONE.value).toEqual('');
    });
  });

Я ищуза помощь в устранении этой ошибки и о том, как предотвратить отображение ошибки в окне тестирования бегуна.Заранее спасибо.

Answer 1

Вы можете вызвать функцию onPaste вручную в spec-файле и манипулировать 'событием'. Что-то вроде ниже;

const event = {
      target : {
        value: null
      },
      clipboardData : {
        types: ['text/plain'],
        getData(a: string) {
          return 'test';
        }
      }
    };
    comp.onPaste(event);
    expect(event.target.value).toEqual('test');