Unit Testing

Unit Testing

In this section, we will cover step by step of unit testing for any angular CLI applications. Unit testing is the process of software development where we will test smallest testable units or components of an application. It is also known as Isolated Testing, because the main objective of Unit Testing is to isolate a section of code and verify its correctness.

Why Unit Testing ?

Unit Testing is very important for any applications, because:-

• It analyze the code behavior.
• It improve the design of implementations.
• It allows refactoring and new features implementation without breaking anything.
• It make developers more confident about their code.
• Its a good documentation of our work.

Setup and configuration for unit testing.

There are various libraries and tools are available for testing such as JSUnit, UnitJS, QUnit, Jasmine, Karma, Mocha etc. Here we will you Jasmine and Karma to test our Angular CLI application.

Jasmine:- It is an open source, very simple, behavior-driven development framework for writing Angular tests.

Karma:- It is just a test runner simple tool that allows us to execute JavaScript code in multiple real browsers. The main purpose of Karma is to make our test-driven development easy and fast.

When we create Angular CLI application, then CLI will download and install everything we need to test an Angular application with the Jasmine test framework.

When we create a component, directive, pipe, service etc through CLI, spec.ts file will be created automatically with the default test suite. Once we created an application through Angular CLI, just navigate to root directory of an CLI application and run the below command to run the test suite.

										    
											ng test
											
										

The ng test command builds the application in watch mode, and launches the Karma test runner. The console output almost looks like below:-

										    
											11% building 10/10 modules 0 active...
											...INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
											...INFO [launcher]: Launching browsers Chrome ...
											...INFO [launcher]: Starting browser Chrome
											...WARN [karma]: No captured browser, open http://localhost:9876/
											...INFO [Chrome 72.0.3626 (Windows 10.0.0)]: Connected on socket ...
											Chrome ...: Executed 3 of 3 SUCCESS (0.839 secs / 0.804 secs)
											
										

Also, ng test opens up the chrome window to displays the success and failed test cases in the Jasmine HTML Reporter like below:-

Enable code coverage

An Angular CLI can run unit tests and create code coverage reports and this reports shows us the parts of our code base that may not be properly tested by our unit tests. To generate a code coverage report, just type below code in terminal.

										    
											ng test --no-watch --code-coverage
											
										

Once the tests are complete, the above command creates a new "/coverage" folder in the root of application. Now, just open the index.html file to see the code coverage report with source code.

To create code coverage reports every time we test, just set the following option in the CLI configuration file, i.e. angular.json:-

										    
											"test": {
												"options": {
													"codeCoverage": true
												}
											}