使用 spyon 时的代码覆盖率问题答案

【问题标题】：Code Coverage issue when spyon is used使用 spyon 时的代码覆盖率问题
【发布时间】：2017-07-04 07:26:05
【问题描述】：

我正在使用Karma-Jasmine 为我的component（Angular2 应用程序）写一个unit test。我正在使用Istanbul 进行代码覆盖率报告。

这是我的测试用例，

it('Should Invoke onNext function', async(() => {
    const fixture = TestBed.createComponent(LoginComponent);
    fixture.detectChanges();
    const login = fixture.componentInstance;

    spyOn(login, 'onNext');

    let email = fixture.debugElement.nativeElement.querySelector("input[name='username']");
    email.value = "email";

    let nextButton = fixture.debugElement.nativeElement.querySelectorAll("button")[1];
    nextButton.click();

    fixture.whenStable().then(() => {
      expect(login.onNext).toHaveBeenCalled();
    })
  }));

如您所见，我是 spying on onNext function 来验证它是否在 nextbutton click 上被调用。它工作正常，测试通过。

但是我的登录页面的代码覆盖率报告显示 onNext 函数没有被覆盖。

我做错了什么？

而且如果我不监视 onNext 函数，该函数也会被覆盖，

it('Should Invoke onNext function', async(() => {
    const fixture = TestBed.createComponent(LoginComponent);
    fixture.detectChanges();
    const login = fixture.componentInstance;


    let email = fixture.debugElement.nativeElement.querySelector("input[name='username']");
    email.value = "email";

    let nextButton = fixture.debugElement.nativeElement.querySelectorAll("button")[1];
    nextButton.click();
  }));

【问题讨论】：

因为spy实际上替换了函数调用。你必须做两个测试：第一个测试函数是否被实际调用（你做了什么），第二个测试你的 onNext 函数。
不知道..感谢您的信息。有没有更好的方法来做到这一点？这样我可以同时实现两者？
是的，将它们放在同一个it 中（尽管我不建议这样做）。顺便说一句，调用component.onNext() 将在代码覆盖范围内覆盖它，但它不是测试！测试意味着你必须使用断言来测试你是否得到正确的值

标签： angular typescript karma-runner karma-jasmine istanbul

【解决方案1】：

使用这个：

spyOn(login, 'onNext').and.callThrough()

【讨论】：

正是我想要的......谢谢