The new on property improves output testing in Angular Testing Library
![The new on property improves output testing in Angular Testing Library](https://timdeschryver.dev/blog/the-new-on-property-improves-output-testing-in-angular-testing-library/images/banner.png)
![The Angular logo](/images/angular.png)
The latest version of Angular Testing Library (v17.1.0) introduces a new API on
that allows you to test the output of your components more easily. In this article, we'll take a look at how you can use this new method to enhance your output testing in Angular, and why it's a better alternative to the existing componentOutputs
or componentProperties
API.
Thanks to Suguru Inatomi (lacolaco) who started this by creating an issue, and S. Mumenthaler for the implementation. 🏆
In previous versions of Angular Testing Library, to test output properties of a component you had to use componentOutputs
to access the output properties of a component.
This was required to assign a spy to the output property and test if it was called correctly.
However, this method had some limitations.
There was no type safety, you had to manually create a "fake" event emitter (or Observable) and use a type assertion to any
to have code that compiles.
Also, from an implementation perspective, the componentOutputs
override the component's properties, which isn't ideal as it could lead to unexpected behavior.
For example, to test an output property of a component that emits an event, you would have to do something like this:
The new on
API solves this issue by providing a more intuitive way to listen to the output properties of a component, making it easier to assign a spy.
To use it, set the on
property in the render
function with the output property you want to listen to and the spy (or other callback function) you want to assign to it.
Under the hood, on
also unsubscribes from the output properties when the component is destroyed or rerendered, which is a nice bonus.
Here's how you can use the on
API to test the output of a component:
As you can notice, this new API is more intuitive and improves the experience of writing and reading tests in Angular Testing Library that involve output properties.
Because of this change the current componentOutputs
and componentProperties
properties are deprecated and will be removed in the next major version of Angular Testing Library.
Feel free to update this blog post on GitHub, thanks in advance!
Join My Newsletter (WIP)
Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.
Support me
I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.