3 tips to improve your Angular Karma testing experience

At Voya, we’re continuously trying to build better and more stable applications. A good balance of E2E tests and Karma tests are essential for those — Karma tests to get quick feedback and help us ensure that we’ve implemented the right features, E2E to test end user flows.

This post contains some lessons we’ve learned along the way while working with Karma.

When you’re growing your test suite, doing a full Karma run might eat up a lot of time.

Use xit instead of it to skip the current test — useful when you’re implementing a lot of new tests through test-driven development, but you know you’re missing the features for having them pass.

Use fit instead of it to isolate the current test — only that test will run. Useful when you have hundreds of tests, but only one seems to be failing all the time. That way you can focus on getting that one to turn into beautiful green, too.

Testing timing and asynchronous tests are are breeze using tick inside a fakeAsync test. Here we’re verifying that a map only slides in after 300ms.

Unit testing itself can not tell you sufficiently about the interaction between the component and other modules it interacts with, unless you mock and monitor those modules. For mocking subcomponents, ng2-mock-component is a great choice. It helps making a fake component available, so you don’t have to import the real one.

To ensure also the right data gets passed through, you can inspect what attribute values exists on inputs — like below.

What are your favourite tools when it comes to testing, both E2E and Karma? What patterns occur that you’ve found good work-arounds for? Did I over-complicate matters or did I take too many shortcuts? Other glaring oversights? Any feedback is welcome.