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/

Aiko Klostermann
Better Programming
3 min readJun 19, 2017

--

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.

--

--

Responses (15)

What are your thoughts?