I am having an issue with error in mand window while executing tests scripts using karma and jasmine , I am using angular 7 as well. I have written unit tests for a phone directive that listens for paste event. I get no error in my code but when i run the tests i receive this error. The tests will run and pass successfully also i get the code coverage i want but this error will continue to pop up every time i run my unit tests.

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

I have tried creating an event inside the test to copy data to the clipboard and possibly populate the clipboardData variable but that didn't work. It is first seeing the value doesn't exist than builds it and runs successfully.

Phone directive typescript

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

Phone test spec

  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(ponent.demForm.controls.PHONE.value).toEqual('');
    });
  });

I am looking for assistance in solving this error and how to stop the error from showing in the test runner cli. Thank you in advance.

I am having an issue with error in mand window while executing tests scripts using karma and jasmine , I am using angular 7 as well. I have written unit tests for a phone directive that listens for paste event. I get no error in my code but when i run the tests i receive this error. The tests will run and pass successfully also i get the code coverage i want but this error will continue to pop up every time i run my unit tests.

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

I have tried creating an event inside the test to copy data to the clipboard and possibly populate the clipboardData variable but that didn't work. It is first seeing the value doesn't exist than builds it and runs successfully.

Phone directive typescript

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

Phone test spec

  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(ponent.demForm.controls.PHONE.value).toEqual('');
    });
  });

I am looking for assistance in solving this error and how to stop the error from showing in the test runner cli. Thank you in advance.

• javascript
• angular
• unit-testing
• event-handling
• karma-jasmine

• Your code works fine for me. Thanks! – Axel Commented Sep 14, 2022 at 19:13

1 Answer 1

You can call the onPaste function manually in spec file and can manipulate the 'event'. Something like below;

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