What, How and Why to use Unit Testing in Angular.

Angular Jasmine and Karma

Unit Testing

Unit testing is a technique to test an individual module or a component or a simple function to know whether we are able to achieve all the use cases and scenarios (Positive or negative) required.

Unit testing helps us to reduce the bugs/issues in the testing either for newly implemented code or for the enhanced features.

There are many tools for writing and executing unit testing. We can implement unit testing using Jasmine, Cypress, Jest and many more.

Unit testing in Angular

Unit testing in angular uses Jasmine as Testing framework and Karma as a test runner tool for running and executing tests in our application.

Angular testing flow and execution

Configuring Unit testing in Angular

No need to install or do extra stuff’s for configuring angular unit tests, by default Angular provides this unit testing feature when we are creating the project itself.

Angular provides karma.conf.ts where whole configuration required for a project to write, run and execute the test cases is configured.

In angular, when we create a Component or Service or Directive or a Pipe using CLI, by default we get a file with spec.ts extension which indicates a testing file with a boilerplate code.

If we want to avoid the test file to be created then we can use — skipTests options in the latest angular version whereas in previous angular version, we need to use — spec=false

In angular.json file we will have a test object which contains all the configurations required.

angular.json file structure

From above, the test object points to the following properties

1. Builder: It points to a build-angular:karma package which is already installed by angular and will exist in our project node_modules
2. Main: This property points to a file where the test needs to be instantiated or started.(From above it points to test.ts file inside src).
3. Karma config: This points to a file where all the karma tool configurations can be made.
4. Polyfills: This points to the global polyfills for browser compatibilities.
5. Assets: This points to all the assets related content which should be loaded when running the test cases.
6. Styles: Points to list of styles used inside our project. Mostly we will configure all the required global styles and third party styles. Example: Bootstrap styles.
7. Scripts: Points to list of scripts used inside our project. Mostly we will configure all the required global scripts and third party scripts. Example: jQuery.

How to Run Angular unit tests

We can run unit tests in 2 ways

1. Without Angular CLI

Package.json structure

npm run test

The above command calls the test script which exist in the package.json. The script from package.json calls the required node_modules and internally runs the ng test.

This is used when we don't want to have or use the Global angular CLI.

2. With Angular CLI

ng test

If we have configured our system with Global Angular CLI, then we can use the above command for running the test cases. This will trigger the angular test runner by using the global ng command.

Output

Once we ran the above commands successfully then it opens a browser with random port number. By default, Angular uses Chrome browser to show the output of your tests.

From above image, we have 7 successful test cases in one service and one component. Karma tool shows complete detailed information about the success and failure test cases.

Karma tool provides a live-reload capability to detect the changes on saving the file and show the result by reloading the browser.

Note: Further posts i would like to share how to write different test cases in angular.

For more updates follow me @ https://techshare-skk.medium.com/