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

- Author: Braydon Coyer
- Published: 2020-10-30
- URL: https://www.braydoncoyer.dev/blog/mocking-services-in-angular
- Tags: angular, programming, testing

## 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](https://braydoncoyer.dev/blog/mocking-components-in-angular/) , open the `AppComponent`, create a constructor and inject the `EmpooyeesService`.

```ts
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`.

```ts
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.

```ts
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](https://twitter.com/BraydonCoyer)!