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 commandng 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 lastarticle , open theAppComponent, create a constructor and inject theEmpooyeesService.

constructor(private employeesService: EmployeesService) {}

Because ourEmployeesService doesn't have any functions and, more importantly, because theAppComponent 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 theapp.component.spec.ts file. At the top of the file where we mocked out theHeaderComponent in the previous article, create a new class that will act as the mock of theEmployeesService.

class MockEmployeesService {}

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

TheTestBed.configureTestingModule currently only has adeclarations array. Create theproviders 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 theAppComponent, we're informing the test environment that the component depends on theEmployeeService. Instead of using the realEmployeesService, we explicitly tell the environment to use the mock class we created above.

Now we can write unit tests that are testing theAppComponent 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!

If you liked this article and want more content like this, read some of myother articles, subscribe to my newsletter and make sure to follow me onTwitter !