Get your big, ol’ Angular app test-ready within an hour
Fix all ng test errors and get your Angular app test-ready, quickly.
So, your Angular app now has tens or hundreds of components, services, pipes, directives, et. al. You feel proud about your work, but there is still one thing missing in your [team’s] development practice: Unit Testing. You finally take up the challenge, and start with ng test. And, oh boy!
An overwhelming number of errors!
Even if you start fixing your components one-by-one, you soon realize that it will take you WEEKS to fix everything. At this point, even the simplest of the test cases, like it('should create'), is difficult to fix. Ah! Now you see! You injected dependencies in the constructors as you saw fit. And now…
There are too many dependencies in your components, services, pipes, and every damn part of the app!
Anyhoo, what’s done is done. So, what can you do now to be able to write unit test cases for, at least, the new stuffs hereafter? Turns out, you can take a shortcut.
Karma setup
Karma is an open source test runner tool on top of Jasmine testing framework, both of which come built-in with an Angular CLI project. The rest of this article focuses on getting your app ng test ready using Karma, although the ideas should be applicable to other frameworks, like Jest, too.
Make sure that you are running the latest package of Karma (supported by your project’s Angular version). You can run npm outdated karma to check those details. This gets a bit tricky. So, be mindful of what you are doing.
Angular configurations — initial issues
Depending on your project setup and current state, there might be some initial issues you face when you first run ng test. I may not be able to cover all those cases, but, I can tell you that most of them may be related to src/test.ts. I have listed down a few issues that I faced at the time.
- If you encounter errors with
pollyfills.ts, try adding/removingimport './polyfills.ts';intest.ts. - If you use any libraries external to Angular Core, like Angular Material, JQuery-plugins or even RxJs operators, and that is causing errors, then you may want to import all of them in
test.tstoo, for now.
Code changes
Once you get past the initial setup issues, you should start seeing errors thrown by your components, services, etc. They are way too many, and you cannot possibly fix all of them in a single session. The solution for this is simple, and quite an anti-climax.
Comment out all code in your *.spec.ts files.
That’s it! Now, try running ng test. You should see that Karma opens up a Chrome browser window, finishes its run and reports all test cases passed (which should be 0 if you commented out all spec codes).
If your app has hundreds and thousands of spec.ts files, just write a program or script to comment out all the code.
What has this helped you achieve?
From here on, you can create test cases for any new and/or specific components or services and need not be restricted by your previous design or decisions. And this time, you should be wiser and make sure:
- You have the least amount of dependencies in your components (and services and directives and pipes, basically everywhere!).
- Your business logics are placed in a domain-only layer.
- Your dependencies (mostly applicable to data services) have
mock-data.service.tsthat can be used inyour.component.spec.ts.
How to design your application and structure your services to enable you to write good (and many) test cases is a whole new and bigger topic. (Will try to cover it some time soon.)
But, wait!
That ain’t enough! Your Angular app is test-ready now. Cool! But, that does not prevent you or your team from creating new components and services, and forgetting to handle the *.spec.ts files again. Back to Square One.
So, to ensure that your Application is always test-ready, you need to integrate it into your CI tool. More on this in How to setup Angular Unit Testing in CI.
I worked on this many months ago. So, it is possible that I missed a few steps. If this article was helpful to you for the most part, but you had to do more to get your test run working, do let me know using the article responses.
And never forget, future is bright
(Read in one of Tomas Trajan’s articles, and I loved it, so copied it. 😄)
