The new on property improves output testing in Angular Testing Library

profile
Tim Deschryver
timdeschryver.dev

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.

Note

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.

Warning

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.

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post

Twitter LinkedIn