如何使用Angular 7 Karma/Jasmine进行单位测试@HostListener粘贴事件

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'.

我尝试在测试中创建一个事件，以将数据复制到剪贴板上，并可能填充剪贴板DATA变量，但这不起作用。首先看到该值不存在并成功运行。

电话指示打字稿

 @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('');
    });
  });

我正在寻找解决此错误的帮助以及如何阻止错误在测试跑步者CLI中显示。预先感谢您。

Answer 1

您可以在规格文件中手动调用OnPaste函数，并可以操纵'事件'。如下;

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