如何在Angle 4茉莉花测试用例中窥探服务方法

Question

I want to spy a method in service which is injected into the angular component.

My method in the component which I want to test is :

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

My test case for above method is :

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

The test case is getting failed and the console log : console.log("Response,", response); is not getting displayed and also there is no error in the console.

How can i resolve this issue?

Answer 1

First a bit of cleaner code. It looks like you want to stub out the login service entirely, instead of using the real one and mocking a function.

Define an object in your initial setup called 'loginServiceMock':

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

Then, in your list of providers, add:

{provide: LoginService, useValue: loginServiceMock}

Then the problem you're having. LoginService should return a Promise object, not a plain Typescript object, since you're calling the '.then()' on its result. What you'll want to do is something like:

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