Member-only story
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
![](https://miro.medium.com/v2/resize:fit:700/1*pRtZiOK9tHklgjK2nNAZ4A.png)
(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.