Angular Unittest | teardown property | Execution Speedup | Surprising Improvement (~25% less time)

As a developer, we always try to improve the web application performance by doing reducing the page loading time, minified the web code etc. but unittest are the equally important part of web development which we can’t ignore.

In Angular generally when we run unittest then they take noticeable time to execute. So we should always try to seek the ways which could reduce the unittest execution time because if execution time is less that means developer waiting time to see the unittest result will be lesser which indirectly help any team to improve the developer productivity.

Why Angular unittest takes noticeable time to execute ?

There are multiple reasons of it listed below (when unittest gets executed):

• The host element is not removed from the DOM until another component fixture is created
• Component styles are never removed from the DOM
• Application-wide services are never destroyed
• Feature-level services using the any provider scope are never destroyed
• Angular modules are never destroyed
• Components are destroyed 1 time less than the number of tests

For example — Just run the unittest using singleRun = false in karma.conf.js and once all unittest executed, go to browser window where unittest cases are executed, right click -> inspect and analyzed #document — head on Elements tab, you will see below similar screen:

In the above screen, you can see that all component’s styles are persisted and not removed once unittest cases are executed which is mentioned above in the #2 point. This is one of the major reason why unittest takes so much execution time.

Now what is the solution ?

Thanks to Angular team to work on all above points mentioned and introduced teardown property in Angular 12.1 so now after execution of every unittest, below things happens —

• The host element is removed from the DOM
• Component styles are removed from the DOM
• Application-wide services are destroyed
• Feature-level services using the any provider scope are destroyed
• Angular modules are destroyed
• Components are destroyed
• Component-level services are destroyed

For example — If you try to run unittest with Angular 12.1 or above version having below code highlighted in green box in test-main.ts file

then you will notice tremendous improvement in unittest execution time (almost 25% less time than before)

As a proof, once all unittest are executed, go to browser window where unittest cases are executed, right click -> inspect and analyzed #document — head on Elements tab, you will see below similar screen:

In the above screenshot you will notice that document is now only having 2 style tags which is having karma UI specific css and all angular component’s specific styles are removed and thats why unittest execution is very fast this time.

I hope this article will help you to further reduce the unittest time and improve the team productivity!!!

Stay tuned and subscribe my medium channel!!!