Executing Unit Tests Using the Angular CLI

The Angular CLI is arguably the most powerful part of the Angular framework. Apart from giving you the power to generate new projects, components, and services, the Angular CLI also gives you the tools you need to easily unit test your app or project. In this guide, you will learn how to use the Angular CLI to test a new Angular project. The fundamentals you learn in this guide will apply to existing Angular projects that still use the default Angular unit testing framework (Jasmine) and test runner (Karma).

Let's get started!

The Angular CLI can be downloaded onto your machine by running the following command using NPM:

You can now use the ng command to access the CLI. To see a full listing of available commands, run ng -h.

The command that you will be learning in this guide is the ng test command. First, you will need to create a new Angular app to test with. Bootstrapping an Angular app via the CLI is as simple as running:

This command will create a new Angular app within your current directory named dog-breed-app. In the following section, you will learn how to test this and future Angular projects via the CLI. Once you have followed the on-screen prompts and waited for all dependencies to download for your new app, you are ready to run your unit tests! You can execute the unit tests for your app via the CLI by running ng test from within the root, project directory.

Upon running ng test, two things happen. First, Angular uses the Karma test runner to open up a new browser window that contains the reporting mechanism for your unit tests. Basically, this is the window that shows the output of your tests and any errors that might occur. Once the test runner is ready, Angular then executes your unit tests via the Jasmine testing framework.

The ng test command works out of the box and is great! But what if you want to customize this command to better suit the needs of your app? Angular has you covered! The ng test command provides one named argument that is optional and corresponds to the project you are trying to test. It is possible for one Angular workspace to contain multiple projects, so this capability allows you to specify. In this instance, though, the new app we generated has a single, default project.

Apart from this named argument, the ng test CLI command has a number of other options at your disposal. Below, you can find a breakdown of some of the most useful options:

• browsers: This option allows you to specify directly the browsers you want to run your unit tests within
• codeCoverage: A boolean indicating whether or not you want a full, code coverage report generated for this unit testing run
• include: This very useful option allows you to specify globbed file patterns for specifying which unit tests you would like to run (instead of running all of them)
• karmaConfig: A file path to custom Karma config through which you can further customize your unit testing experience
• reporters: This allows you to specify custom Karma reporters which you want to use
• watch: This option, if set to true, will continue to re-run your tests every time you change your project source code

This isn't even all of the options available! There are other options that include niceties for unit testing web workers, for example. As you can see, the Angular CLI has you covered when it comes to testing your project by giving you a lot of control and customization.

In this guide, you learned how to easily generate a new Angular app and execute the unit tests for it via the Angular CLI. You learned that you can use the ng test command to execute all of your unit tests via the Jasmine testing framework while using the Karma test runner. You are also now aware of all of the options that you can use directly with the ng test command to further customize your unit testing experience.

With the help of these available options, you can be confident when it comes to testing your Angular project! For more information, please check out the Angular testing documentation.