您可以在将服务注入测试组件之前手动实例化服务吗？

Question

I am trying to test a component, ProfileComponent in Angular. ProfileComponent depends on AuthenticationService through injection:

profile.component.ts

constructor(public authenticationService: AuthenticationService) { }

My ProfileComponent is simply a page, and cannot be navigated to unless the user is logged in because my router re-routes all navigations away from this page if authenticationService.isLoggedIn() returns false .

My code in ProfileComponent therefor expects authenticationService.isLoggedIn() to return true, and does not ever check it. Instead, it executes code based on the currently logged in user, which would break if no user was actually logged in.

I am trying to test ProfileComponent , but the AuthenticationService object is injected into ProfileComponent before I can call authenticationService.logIn(username, password) to stop the code in ProfileComponent from breaking.

Here's the idea of what I'd like to do:

profile.component.spec.ts

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;
  let authenticationService: AuthenticationService;

  beforeEach((done) => {

    // Configure the AuthenticationService's injections
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule
      ]
    });

    // Get the AuthenticationService object
    authenticationService = TestBed.get(AuthenticationService);
    expect(authenticationService).toBeTruthy();

    // Make sure authentication service is logged in
    authenticationService.login(TestVariables.username, TestVariables.password).then(() => {
      // Configure the ProfileComponent's injections, passing the already logged in AuthenticationService
      TestBed.configureTestingModule({
        declarations: [ ProfileComponent ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        imports: [HttpClientModule],
        providers: [
          {
            provide: AuthenticationService,
            useValue: authenticationService
          }
        ]
      }).compileComponents().then(() => {
        fixture = TestBed.createComponent(ProfileComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        done();
      });
    });
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

When I try this, I am getting the following error:

'Cannot configure the test module when the test module has already been instantiated. Make sure you are not using `inject` before `TestBed.configureTestingModule`.

Is there a way that I can perform some operations on my service before injecting it into a component that is being tested?

Answer 1

If you're going to be testing your component you will want to use a fake service for it to interact with. Instead of configuring the test module twice, you should do something similar to

const fakeAuthenticationService = jasmine.createSpyObj<AuthenticationService>('auth', ['isLoggedIn']);

// set the response to isLoggedIn
fakeAuthenticationService.isLoggedIn = jasmine.createSpy('isLoggedIn').and.returnValue(true);

Then in your providers you will have

{
  provide: AuthenticationService,
  useValue: fakeAuthenticationService
}

Now when your test runs your component will receive a true value from isLoggedIn . In general you should use a similar strategy for every service (component, pipe, etc) so that your test is ONLY testing the component. If you use real dependencies you risk having their code affect the test for your component. This also allows you to control what your dependencies return and test that your component handles each different response correctly.