方法未获得更改事件的单元测试代码覆盖率答案

【问题标题】：Method not getting Unit test code coverage for change event方法未获得更改事件的单元测试代码覆盖率
【发布时间】：2021-10-04 22:35:32
【问题描述】：

我正在我的 Angular 应用程序上运行 Jasmine 测试。我创建了一个通过的测试，我认为它会涵盖我的更改事件方法。输入是一组单选按钮。我正在测试的只是事件触发时值发生了变化。

.ts 文件

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

.html 文件

       <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 文件

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

谁能明白为什么这两行没有被覆盖？这是一个 stackBlitz - https://stackblitz.com/edit/angular-queryparam-gbb23f?file=src/app/app.component.spec.ts

【问题讨论】：

似乎您只是覆盖了onBehalfOfChangeEvent，但从未真正调用它的实现。尝试在onBehalfOfChangeEvent 上将and.callThrough() 添加到您的间谍中。测试是否通过了您检查 params.onBehalfOf 是否正确设置？
当我添加 .and.callThrough() 时，测试在“预期未定义等于 'Self'”时失败。
是的，那是因为你现在需要在你的测试中调用de.triggerEventHandler('change', x)。
它涵盖了这些行，谢谢。要添加官方答案吗？
做到了。谢谢你:)

标签： javascript angular unit-testing jasmine karma-jasmine

【解决方案1】：

你安排间谍的方式会导致测试出错。您没有调用onBehalfOfChangeEvent 的实际实现，而是（使用您的间谍）覆盖它并让它在调用时不执行任何操作。

这是由于这一行：

spyOn(testee, 'onBehalfOfChangeEvent');

相反，您想编辑它以指定一个间谍，以及调用原始方法：

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

现在只需更改调用事件处理程序的方式

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

到

de.triggerEventHandler('change', x);

你可以走了。

您还需要先声明和初始化变量x，然后才能使用它。请注意这个陷阱。

【讨论】：