DEV Community

Cover image for Mocking Services in Angular
Braydon Coyer for This is Angular

Posted on • Edited on • Originally published at braydoncoyer.dev

2

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) {}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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!

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

Image of Stellar post

🚀 Stellar Dev Diaries Series: Episode 1 is LIVE!

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple “thank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay