Angular2 testing: change the injected value of a service
Asked Answered
D

1

6

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']);
    }));
  });
Dextrality answered 27/3, 2017 at 12:10 Comment(1)
AuthService says that if isLogged is false, it redirects to 'login' and if it's true, to the parameter given to the function checkLoginStateDextrality
B
1

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).

Blood answered 11/5, 2017 at 15:30 Comment(2)
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.Catabolite
Doesn't work for me either. Looks like the reference is lost once the service is in the provider.Euhemerize

© 2022 - 2024 — McMap. All rights reserved.