Method not getting Unit test code coverage for change event

Question

I am running a a Jasmine test on my Angular application. I have created a test that passes and I assumed it would cover my change event method. The input is a set of radio buttons. and all I am testing is that the value changed when the event was triggered.

.ts file

  onBehalfOfChangeEvent(x) {
        const value = x.value; // this line not covered on report
        this.params.onBehalfOf = value; // this line not covered on report
    }

.html file

       <div formGroupName="onBehalfOfGroup" class="form-group">
        <div *ngFor="let radio of onBehalfOfArray; let i = index">
        <label class="col-12 customradio"
          ><span>{{ radio.value }}</span>
          <input
            [ngClass]="{ checked: registerForm.get('onBehalfOfGroup.onBehalfOf').value == params.onBehalfOf }"
            class="radioBtn"
            id="radio-{{ i }}"
            type="radio"
            [value]="radio.value"
            name="onBehalfOf"
            formControlName="onBehalfOf"
            (change)="onBehalfOfChangeEvent(radio)"
          />
          <span class="checkmark"></span>
        </label>
        </div>
    </div>

.spec file

  it('should trigger onBehalfOfChangeEvent method on change', () => {
        const testee = component;
        expect(testee).toBeTruthy();
        let de = fixture.debugElement.query(By.css('.radioBtn'));
        spyOn(testee, 'onBehalfOfChangeEvent');
        de.triggerEventHandler('change', {});

        const x = { value: 'Self' };
        const value = x.value;
        component.onBehalfOfChangeEvent(value);
        expect(testee.onBehalfOfChangeEvent).toHaveBeenCalled();
        expect(component.params.onBehalfOf).toEqual(value);
    });

Can anybody see why those two lines are not covered? Here is a stackBlitz - https://stackblitz.com/edit/angular-queryparam-gbb23f?file=src/app/app.component.spec.ts

Seems like you just overwrite onBehalfOfChangeEvent but never actually call its implementation. Try to add and.callThrough() to your spy on onBehalfOfChangeEvent. Does the test even pass where you check that params.onBehalfOf was correctly set? — Philipp Meissner
– Philipp Meissner, Commented Jul 29, 2021 at 9:10
When I add the .and.callThrough() the test fails on "Expected undefined to equal 'Self'." — Tom Rudge
– Tom Rudge, Commented Jul 29, 2021 at 9:21
Yes, that is because you need to call de.triggerEventHandler('change', x) in your test now. — Philipp Meissner
– Philipp Meissner, Commented Jul 29, 2021 at 10:40
It covered those lines, thanks. Do you want to add an official answer? — Tom Rudge
– Tom Rudge, Commented Jul 29, 2021 at 12:52

Philipp Meissner · Accepted Answer · 2021-07-31 17:30:16Z

2

The way how you arrange the spies causes the test to be wrong. You are not calling the actual implementation of onBehalfOfChangeEvent but instead overwrite it (with your spy) and have it perform no operation when called.

This happens due to this line:

spyOn(testee, 'onBehalfOfChangeEvent');

Instead you want to edit it to specify a spy, as well as call the original method:

spyOn(testee, 'onBehalfOfChangeEvent').and.callThrough();

Now just change the way how you call your event handler from

de.triggerEventHandler('change', {});

to

de.triggerEventHandler('change', x);

and you are good to go.

You will also need to declare and initialize the variable x before you can use it. Be aware of this pitfall.

edited Jul 31, 2021 at 17:30

answered Jul 29, 2021 at 13:25

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Method not getting Unit test code coverage for change event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related