javascript - How to unit test @hostlistener paste event using angular 7 karmajasmine - Stack Overflow

admin管理员组

文章数量:1022544

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

Share Improve this question Follow asked May 15, 2019 at 16:39 Jeffrey BellJeffrey Bell 5111 silver badge33 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

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

Share Improve this question Follow asked May 15, 2019 at 16:39 Jeffrey BellJeffrey Bell 5111 silver badge33 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： javascriptHow to unit test hostlistener paste event using angular 7 karmajasmineStack Overflow