Sharing Top Content from the Angular-sphere.

Three Ways to Test Angular Components – Angular

  • In this article we will look at three ways to test Angular components: isolated tests, shallow tests, and integration tests.ExamplesFor all the examples we will use a mail app akin to Inbox or Gmail.
  • Thus the isolated test will have to only check that the action has been returns the root of the router state, and gives us the conversation route to read the id parameter from.Now, let’s look at the test.As you can see, testing Angular components in isolation is no different from testing any other JavaScript object.Shallow TestingTesting component classes without rendering their templates works in certain scenarios, but not in all of them.
  • Second, instead of using a real activated route, we are using a fake one, which is just an object with the params and data properties.Integration TestingFinally, we can always write an integration test that will exercise the whole application.Even though both the shallow and integration tests render components, these tests are very different in nature.
  • Integration tests are only used to check the correctness.SummaryIn this article we looked at three ways to test Angular components: isolated tests, shallow tests, and integration tests.
  • Shallow tests are isolated tests on steroids, and they should be used when writing a meaningful test requires to render a component’s template.

Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection…

@russfrith: Three Ways to Test Angular Components, by @victorsavkin #angularjs #angular2

In this article we will look at three ways to test Angular components: isolated tests, shallow tests, and integration tests.

For all the examples we will use a mail app akin to Inbox or Gmail. The application displays a list of conversations, which we can browse through. Once we click on a conversation, we can see all its messages. We can also compose new messages.

It is often useful to test complex components without rendering them. To see how it can be done, let’s write a test for the following component:

compose.html:

There a few things in this example worth noting:

Now, let’s look at the test.

As you can see, testing Angular components in isolation is no different from testing any other JavaScript object.

Testing component classes without rendering their templates works in certain scenarios, but not in all of them. Sometimes we can write a meaningful test only if we render a component’s template. We can do that and still keep the test isolated. We just need to render the template without rendering the component’s children. This is what is colloquially known as shallow testing.

Let’s see this approach in action.

This constructor, although short, may look a bit funky if you are not familiar with RxJS. So let’s step through it. First, we pluck “folder” out of the params object, which is equivalent to “route.params.map(p => p[‘folder’])”. Second, we pluck out “conversations”.

In the template we use the async pipe to bind the two observables. The async pipe always returns the latest value emitted by the observable.

Now let’s look at the test.

First, look at how we configured our testing module. We only declared ConversationsCmp, nothing else. This means that all the elements in the template will be treated as simple DOM nodes, and only common directives (e.g., ngIf and ngFor) will be applied. This is exactly what we want. Second, instead of using a real activated route, we are using a fake one, which is just an object with the params and data properties.

Finally, we can always write an integration test that will exercise the whole application.

Even though both the shallow and integration tests render components, these tests are very different in nature. In the shallow test we mocked up every single dependency of a component. In the integration one we did it only with the location service. Shallow tests are isolated, and, as a result, can be used to drive the design of our components. Integration tests are only used to check the correctness.

In this article we looked at three ways to test Angular components: isolated tests, shallow tests, and integration tests. Each of them have their time and place: isolated tests are a great way to test drive your components and test complex logic. Shallow tests are isolated tests on steroids, and they should be used when writing a meaningful test requires to render a component’s template. Finally, integration tests verify that a group of components and services (e.g., the router) work together.

Three Ways to Test Angular Components – Angular

Comments are closed, but trackbacks and pingbacks are open.