如何在 Angular 4 jasmine 测试用例中监视服务方法

Question

我想监视一个注入到角度组件中的服务方法。

我要测试的组件中的方法是：

validateLogin() {
    console.log("Before calling validateLogin method,", this.form.value.Username, this.form.value.Password);
    this.loginService.validateLogin(this.form.value.Username, this.form.value.Password)
        .then(response => {
          console.log("Response,", response);
            if(response.SkipWelcomePage) {
                this.router.navigateByUrl("/");
            }
            else this.router.navigateByUrl("/welcome");
        })
        .catch(err => {
           this.errorMessage = err;
        });
}

我对上述方法的测试用例是：

it('should validate login', async(() => {

    const loginService = fixture.debugElement.injector.get(LoginService);
    spyOn(loginService,'validateLogin').and.returnValue(function (username, password) {
      return {SkipWelcomePage: false}
    });
    fixture.componentInstance.form.controls['Username'].setValue("test");
    fixture.componentInstance.form.controls['Password'].setValue("test");
    fixture.detectChanges();
   fixture.debugElement.query(By.css('.loginButton')).nativeElement.click();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/welcome']);
  }));

测试用例失败，控制台日志：console.log("Response,", response); 没有显示，控制台也没有错误。

我该如何解决这个问题？

Answer 1

首先是一些更简洁的代码。看起来您想完全删除登录服务，而不是使用真实的服务并模拟一个函数。

在您的初始设置中定义一个名为“loginServiceMock”的对象：

const loginServiceMock = jasmine.createSpyObj('LoginService', ['validateLogin']);

然后，在您的提供者列表中，添加：

{provide: LoginService, useValue: loginServiceMock}

那么你遇到的问题。 LoginService 应该返回一个 Promise 对象，而不是普通的 Typescript 对象，因为您在其结果上调用了“.then()”。你想要做的是这样的：

loginServiceMock.validateLogin.and.returnValue(Promise.resolve({SkipWelcomePage: false});