Mocking Services in Angular

Mocking Services in Angular

In part two of this series, I want to continue the discussion of testing in isolation and briefly turn our attention to services.

While child-components are one type of dependency in a component, injected services are another type of dependency that must be mocked when writing unit tests.

Angular's foundation is built on dependency injection and services allow us to extrapolate logic into classes that can be shared between components (or other services).

Creating & Injecting a Service

Using the Angular CLI, run the following command ng g s employees. The CLI will create a new service called EmployeesService and place it in the app directory of your project.

Now, continuing the example we started in the last article , open the AppComponent, create a constructor and inject the EmpooyeesService.

constructor(private employeesService: EmployeesService) {}

Because our EmployeesService doesn't have any functions and, more importantly, because the AppComponent isn't calling any functions from the service, the tests continue to pass. Regardless, we should get in the habit of mocking services as soon as we inject them in a component.

Mocking the Injected Service

Open the app.component.spec.ts file. At the top of the file where we mocked out the HeaderComponent in the previous article, create a new class that will act as the mock of the EmployeesService.

class MockEmployeesService {}

Now that we've created a mock class, we need to tell the test environment to use that class instead of the real EmployeesService.

The TestBed.configureTestingModule currently only has a declarations array. Create the providers array and create a new object inside. Refer to the code below.

TestBed.configureTestingModule({
    declarations: [
    ...
    ],
    providers: [
        {provide: EmployeesService, useClass: MockEmployeesService}
    ]
}).compileComponents();

What does this do?

When we run the tests for the AppComponent, we're informing the test environment that the component depends on the EmployeeService. Instead of using the real EmployeesService, we explicitly tell the environment to use the mock class we created above.

Now we can write unit tests that are testing the AppComponent in isolation.

Conclusion

Great job! Now you know how to mock components and services! In the next article we'll begin to actually write tests in our Angular project!

Thanks for reading! If you liked this article and want more content like this, read some of my other articles and make sure to follow me on Twitter!