In my previous blog post, we learned that there were two ways to unit test Angular pipes:
- Isolated tests (without TestBed)
- Integrated tests (with TestBed)
But we put the focus on isolated tests. I this article, we are going to switch our focus on how to write integrated unit tests for Angular pipes.
We talk about integrated unit testing when we are testing the pipe in the same condition that it will be used at runtime. This means that we will test it when used inside an Angular component's template.
The Pipe Under Test
In case, you didn't read my previous blog post, here is the code of the pipe we are going to test. It is a simple pipe that transforms an array to its mean.
- Implement the
- Return the mean of the array of numbers.
We Need a Host Component
Because we want to write integrated tests for our pipe, we need a component that hosts our pipe. A host component is like any other Angular component. There is nothing specific about it. It is just a way to use the pipe in an Angular component's template.
The code for the host component is straightforward:
- Define property that holds the values to be passed to the pipe
- Display the result of the transformation of those values through the pipe.
Setting Up the Integrated Tests!
TestBed.configureTestingModule, as its name implies, allows us to create a specific Angular module for testing purposes. It accepts pretty much the same parameters as the
- Notice that we wrap the body of our first
beforeEachinside a special Angular zone. We do so by calling the
asyncfunction, one of the many Angular testing utilities. We need this because
TestBet.compileComponentsis asynchronous. So this ensures that our component's template is compiled beforehand (although technically this is not necessary in this example because our template is inlined).
ComponentFixtureis a wrapper around our host component. It allows us to interact with the environment of our component like its change detection or its injector.
- The fixture is returned by
- From the fixture, we can get the
DebugElementis a wrapper around our component's HTML element. It provides more functionality than the native
- We can also get the real instance of our component from the fixture.
We made sure that our fixture can be properly instantiated. Now we can start writing real expectations.
The Actual Tests
- We start by updating the
valuesproperty of our component and we call
fixture.detectChangeskicks off change detection for our component. It is necessary if we want our template to reflect the changes we made to the component class.
- Next, we use
debugElement.querypassing it a predicate
By.css('div'). This allows us to target the div element by using its CSS selector.
- From there, we can get the native
- Then we can write our expectations.
In this article, we learned how to write integrated unit tests for our Angular pipes. The setup for this kind of is more complicated than for isolated unit tests. There are also more concepts involved because we need to use Angular testing utilities. But the effort is forth it as integrated unit tests can help us detect bugs that isolated tests cannot reveal.
Thank you very much for reading!
If you enjoyed this article, follow @ahasall on Twitter for more content like this.