Angular Components Unit Test — Common Use Cases

Nichola Alkhouri
Feb 4 · 3 min read

In this article, I will provide a collection of some important statements used to unit test Angular components. You can use any of the following examples directly in your project, or you may prefer to extract some of them into separate helper functions and reuse them all over your project. This article covers testing the following scenarios:

For this purpose, lets assume we have the following simple example component generated using Angular CLI ng g c ExampleComponent:

A very basic component consists of one input header and one property name displayed in the template using a direct interpolation, a form with one input field and a submit button, and one output nameChange which will emit an event when the user submits the form.

When you create the above component using Angular CLI you will get automatically a unit test file in the same directory as your component. All the next sections in this article are based on this file, especially the fixture object let fixture: ComponentFixture;. If you don't use Angular CLI to generate your component file, you may copy the above file in your project, and replace ExampleComponent with your component class name.

Text interpolation:

Here we make sure that our component will bind the correct values in the template. Don’t forget to call fixture.detectChanges() which forces the TestBed to perform data binding and update the view.

User Input Value Change:

Here we test that the user interaction with the text input is reflected correctly into our component class. Notice here the use of fakeAsync and tick, because the forms binding involves some asynchronous execution.

Clicking HTML Element

Access Child (nested) Component:

Let's assume that our component contains a nested child component:

<app-nested-component></app-nested-component>

You can access the child component and interact with it as the following:

Content projection

Testing content projection is not straightforward, to do so we need to add a wrapper component around the component being tested and use this wrapper component to pass content through projection. Let’s add the following projected content to the view of our component

<div class=”projected-content> 
<ng-content select=”[description]”></ng-content>
</div>

And we can test is by adding a wrapper ExampleWrapperComponent as the following:

Component inputs and outputs

You can test component input similar to any normal component property. On the other hand, the outputs can be spied on and check if it emits the correct value.

Component Dependencies

Components usually have dependencies (services) that help the component to function correctly, and the component needs to interact with these dependencies. When testing a component we need to provide our tests with those dependencies in order to run correctly. Here we need to distinguish between two way of providing a dependency:

Dependencies provided in the root injector:

When the component has a dependency on a service that is provided in the root injector, you need to provide this service to the TestBed configuration to be available to the component while running the tests:

Notice that we are using a mock service here since it is easier and safer to interact with. After that, you will be able to access that service in your tests by calling the inject method of the TestBed.

Dependencies provided in the component injector:

When you have a dependency provided in your component, you can not access it using the TestBed, since it will be available only on the component level of the injection tree. In this case, we need to override the component providers to provide this dependency, and then you can use the component injector to access it.

Do you have or need a specific testing scenario that is not covered by this article? Feel free to add it in the comments sections and we will add a use case for you :)

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Nichola Alkhouri

Written by

Senior Front-end Engineer with a passion for Angular

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store