Question

使用karma和jasmine执行测试脚本时，命令窗口中出现错误，我也使用了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'.

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

电话指令打字稿

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

如何使用Angular 7 Karma / Jasmine对@hostlistener粘贴事件进行单元测试

1 个答案: