Unit Testing Input Event in Angular6

Question

I have an Input field in the UI

<input matInput placeholder="BLC" id='blc' formControlName="blc" (change)="onBLCChanged($event)" />

I want to do unit testing for this, but this field send $event not any value to the function, how can I mock this.

  it('some text', async(async() => {
    spyOn(component, 'onBLCChanged');
    // first round of change detection
    fixture.detectChanges();
    // get ahold of the input
    let input = debugElement.query(By.css('#blc'));
    let inputElement = input.nativeElement;

    //set input value
    inputElement.value = 'test';
    inputElement.dispatchEvent(new Event('change'));

    expect(component.onBLCChanged).toHaveBeenCalledWith({});
  }));

This is not working, Expected spy onBLCChanged to have been called with [ Object({ }) ] but actual calls were [ [object Event] ].

Please help, onBLCChanged is the method in the .ts file.

Archit Garg · Accepted Answer · 2020-01-20 14:02:45Z

2

Try this-

it('some text', async(async() => {
      spyOn(component, 'onBLCChanged');
      // first round of change detection
      fixture.detectChanges();
      // get ahold of the input
      let input = debugElement.query(By.css('#blc'));
      let inputElement = input.nativeElement;

      //set input value
      inputElement.value = 'test';

      // save event object so that you can do comparison.
      const event = new Event('change');
      inputElement.dispatchEvent(event);

      expect(component.onBLCChanged).toHaveBeenCalledWith(event);
    }));

answered Jan 20, 2020 at 14:02

Archit Garg

3,3172 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

German Quinteros · Accepted Answer · 2020-01-20 15:51:48Z

0

Try this:

 it('some text', async(async() => {
    const spyOnFunction = spyOn(component, 'onBLCChanged');
    // first round of change detection
    fixture.detectChanges();
    // get ahold of the input
    let input = debugElement.query(By.css('#blc'));
    let inputElement = input.nativeElement;

    //set input value
    inputElement.value = 'test';
    inputElement.dispatchEvent(new Event('change'));

    expect(spyOnFunction).toHaveBeenCalled();
  }));

answered Jan 20, 2020 at 15:51

German Quinteros

1,9401 gold badge12 silver badges38 bronze badges

Collectives™ on Stack Overflow

Unit Testing Input Event in Angular6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related