Testing Angular Components With @Input()

Out of free stories? Get this article for free at https://aiko.dev/angular_test_input_decorator/

This article covers multiple ways of testing a component that binds an input via the @Input() decorator

(An updated version of this post can be found here.)

When developing an Angular component that takes an input, you might decide to unit test the whole component. At least I hope you do!

For example, we have a component, ComponentUnderTest, in which we want to display upcased input… I know right: what a great use-case, every business owner needs that!

So, let’s say the ComponentUnderTest binds and displays input.

To verify that processInput() correctly upcases our input, we can simply assign a test value to the input variable and assert that, after calling the method, the displayed input is in ALL CAPS.

Easy peasy! Right?

But by now, we need to manually call processInput() and until we call it, our input is still displayed in lousy lowercase.

Luckily, with Angular’s OnInit lifecycle hook, we can trigger our processInput() even before displaying anything. So let’s implement it and call processInput() in the corresponding method.

Let’s run the tests!

Oh no! The tests fail!

Cannot read property ‘toUpperCase’ of undefined