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

Question

我运行正在对我的 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

Answer 1

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

这是由于这一行造成的：

spyOn(testee, 'onBehalfOfChangeEvent');

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

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

现在只需更改从

调用事件处理程序的方式

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

至

de.triggerEventHandler('change', x);

一切顺利。

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

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

Method not getting Unit test code coverage for change event

javascript

unit-testing

jasmine

karma-jasmine

angular