Angular2 testing: change the injected value of a service

Question

I am testing a simple service. The service uses 2 values from another service.

Basically, I would like to test those 2 values : isLogged = false and isLogged = true.

Is it possible to just change the value of an injected service, or do I need to do something else ? (which I don't know, so if you could lead me on the way, I'd appreciate it).

Here is my code for testing :

EDIT I have found a solution to my problem. You need to inject the provider to the inject parameters, and you can change its properties as you want after.

  import { TestBed, async, inject } from '@angular/core/testing';
  import { AuthGuardService } from './authguard.service';
  import { Router } from '@angular/router';

  import { AuthService } from './auth.service';

  describe('AuthguardService', () => {

    let calledUrl = '/logged/main/last';

    let authServiceStub = {
      isLogged: false,
      redirectUrl: calledUrl
    };

    class RouterStub {
      navigate(url: string) { return url; }
    };

    beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [
          AuthGuardService,
          { provide: AuthService, useValue: authServiceStub },
          { provide: Router, useClass: RouterStub },
        ]
      });
    });

    it('should ...', inject([AuthGuardService, Router], (service: AuthGuardService, router: Router) => {
      let spy = spyOn(router, 'navigate');

      service.checkLoginState(calledUrl);
      expect(spy).toHaveBeenCalledWith(['/login']);
    }));
  });

AuthService says that if `isLogged` is false, it redirects to `'login'` and if it's true, to the parameter given to the function **checkLoginState** — , Mar 27 '17 at 12:30

score 1 · Answer 1 · answered May 11 '17 at 15:30

Your stated solution is one way. If all you want to accomplish is to change the values in a test, an even more concise way is simply to change the values in authServiceStub directly:

// inside tests:
authServiceStub.isLogged = false;
...
authServiceStub.isLogged = true;

^ Simple but not very encapsulated.

Or parameterize it:

let isLogged: false;
let authServiceStub = {
      isLogged: isLogged,
      redirectUrl: calledUrl
    };
...
// inside tests:
isLogged = false;
...
isLogged = true;

^ Concise but still not encapsulated.

Or add a setter:

let authServiceStub = {
      isLogged: false,
      setLogged: function(logged) { this.isLogged = logged; },
      redirectUrl: calledUrl
    };
...
// inside tests:
setLogged(false);
...
setLogged(true);

^ A bit more encapsulated. Could be combined with your injection approach.

Or if isLogged were reimplemented as a function, you could use spyOn:

// inside tests:
spyOn(authServiceStub, "isLogged").and.returnValue(false);
...
spyOn(authServiceStub, "isLogged").and.returnValue(true);

^ More black-box and potentially more flexible/future-proof, especially if combined with your injection solution (because you could change the stub or mock drastically and still get the behavior you want). This is more work up front, so may not be worth it. But thinking of AuthService in this black-box way may give you a reason to refactor isLogged into a function (or not).

Am I the only person that couldn't get this to work? I change the value(s) of my provided stub, but the test is running with the old values. — Felipe Centeno, Jul 21 '20 at 22:14
Doesn't work for me either. Looks like the reference is lost once the service is in the provider. — Dan, Aug 31 '21 at 15:23

Angular2 testing: change the injected value of a service

1 Answers1