How to provide different mock services to test Angular 2 component?

Question

I have two Mock services:

@Injectable()
class UserRegistrationServiceMock {
    registerBasicDetails(details: UserRegistrationDetails) {
        let response: UserRegistrationResponse = new UserRegistrationResponse();
        response.success = false;
        response.userMessage = 'Test Message';                
        return Observable.of(response);
    }

    registerAdvancedDetails() {        
    }
}

@Injectable()
class UserRegistrationServiceSuccessMock {
    registerBasicDetails(details: UserRegistrationDetails) {
        let response: UserRegistrationResponse = new UserRegistrationResponse();
        response.success = true;
        response.userMessage = 'Test Message';
        return Observable.of(response);
    }

    registerAdvancedDetails() {
    }
}

In my Jasmine test I provide its definition in the "beforeEachProviders" and "beforeEach" methods:

beforeEachProviders(() => [        
 provide(UserRegistrationService, { useClass: UserRegistrationServiceMock })
]);

beforeEach(inject([UserRegistrationService], (_userRegistration))

Then in my actual test I can reference the user registration service to initialise the component:

it('should create an instance', () => {
        let component: BasicRegistrationComponent =
            new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration);
        expect(component).toBeTruthy();
    });

The question here is how can I provide the second mock implementation of the service for my component?

Answer 1

You provide the second mock class the same way you provide the first.

Include it in beforeEachProviders() and beforeEach

beforeEachProviders(() => [        
  provide(UserRegistrationService, { useClass: UserRegistrationServiceMock }),
  provide(UserRegistrationServiceSuccess, { useClass: UserRegistrationServiceSuccessMock })
]);

beforeEach(inject([UserRegistrationService, UserRegistrationServiceSuccess], (_userRegistration, _userSuccess))

As a tip I would suggest only injecting what you need for each test, not injecting all dependencies into every test. (Unless you only have one test in that file). Keep beforeEachProviders, but instead of using beforeEach, do this in your component test:

it("should create an instance", inject([UserRegistrationService, UserRegistrationServiceSuccess], (_userRegistration : UserRegistrationServiceMock, _userSuccess : UserRegistrationServiceSuccessMock) => {
        let component: BasicRegistrationComponent =
        new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration);
        expect(component).toBeTruthy();
}));

Also if you are using mock services you should reference them like above: _userRegistration : UserRegistrationServiceMock. Basically that inject statement means: when the test is looking for UserRegistrationService I am passing it UserRegistrationServiceMock but I'm calling it _userRegistration. Let me know if this does not help :)

Answer 2

The best and most readable way I've found to do this is by nesting an extra set of describe statements:

describe('SomeComponent', () => {

   describe("Normal Registration", () => {
       beforeEachProviders(() => [        
           provide(UserRegistrationService, { useClass: UserRegistrationServiceMock })
       ]);

       beforeEach(inject([UserRegistrationService], (_userRegistration))

       it('should create an instance', () => {
          let component: BasicRegistrationComponent =
             new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration);
           expect(component).toBeTruthy();
       });
    });

    describe("Registration Success", () => {
        beforeEachProviders(() => [        
            provide(UserRegistrationService, { useClass: UserRegistrationServiceSuccessMock })
        ]);

        beforeEach(inject([UserRegistrationService], (_userRegistration))

        it('should create an instance', () => {
           let component: BasicRegistrationComponent =
              new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration);
            expect(component).toBeTruthy();
        });
    });
});