How to Write Tests for Components With OnPush Change Detection in Angular

Making Angular aware of changes in component tests

Ali Kamalizade
Nov 25, 2020 · 3 min read
Neon sign that reads “Change”
Neon sign that reads “Change”
Photo by Ross Findon on Unsplash.

The Angular framework does a lot under the hood to detect changes and update the UI accordingly. Similarly to other frameworks like React or Vue.js, Angular supports data binding to always show the latest data.

While Angular is already a fast framework, we can always improve things. One improvement idea is to reduce the amount of change detection work to keep the UI as smooth as possible. For Angular components, there are two change detection strategies available:

  • Default uses the default CheckAlways strategy in which change detection is automatic until explicitly deactivated. If you don’t specify a strategy, then this will be used.

The OnPush change detection strategy is a good choice for dumb components that typically:

  • Have few or no internal states.

Sadly, components that use the OnPush change detection strategy are harder to test in unit tests. The problem is that such a component will run change detection only once when calling fixture.detectChanges()for the first time. There are popular issues on GitHub (example) that highlight the severity of this problem. Let’s have a look at some ideas to solve this problem:

  • You can try to write your test code in such a manner that you only need to trigger change detection once. However, this can be cumbersome and some tests need multiple change detection runs.

These approaches can work, but they seem to involve more effort than necessary in my opinion. One advantage of open source projects is that even if there’s no officially supported way, the community will often figure out a way. Now, I want to share with you what the community figured out to attempt to solve this problem.

How to Trigger Change Detection for OnPush Components in Tests

Not satisfied with having to deal with this problem, I tried out multiple ways to trigger change detection for such components in tests. Looking for a solution, I stumbled upon a neat function that I’d like to share with you:

Whenever you need to run change detection for a component using the OnPush change detection strategy, you can call this function (make sure to use await since it returns a Promise) and your changes should be picked up. The only argument you need to provide is a ComponentFixture, which you typically get when creating your component with TestBed.

Conclusion

Thanks for reading this article. Using the OnPush change detection strategy is a good way to improve performance by reducing the amount of change detection in your Angular application. By using a simple helper function outlined above, we can easily trigger change detection as often as we like in component tests — even for OnPush components. I hope that the Angular team will make change detection for OnPush components easier in the future without having to resort to these kinds of workarounds.

Do you know other ways to reliably detect changes in unit tests for OnPush components? Let me know in the comments.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Ali Kamalizade

Written by

Senior Software Engineer @LeanIX. Co-founder of Sedeo. Passion for software engineering and startups. Looking forward to build great things. 有難うございます。🚀

Better Programming

Advice for programmers.

Ali Kamalizade

Written by

Senior Software Engineer @LeanIX. Co-founder of Sedeo. Passion for software engineering and startups. Looking forward to build great things. 有難うございます。🚀

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store