Unit Testing in Angular

• Unit Testing is a level of software testing where individual units/ components of a software are tested.
• The purpose is to validate that each of the software performs as designed.
• A unit is the smallest testable part of any software. It usually has one or a few inputs and usually a single output.
• In procedural programming, a unit may be an individual program, function, procedure, etc.
• In object oriented programming the smallest unit is a method, which may belong to a base/ super class, abstract class or derived/child class.
• In case of JavaScript/ Typescript in Angular we have to test our functions.

Benefits of Unit Testing:-

• Improve the design of implementations:- Start coding a feature without giving it a lot of thought to the design is a very common mistake among developers. Using unit testing is going to enforce to think and re-think the design
• Allows Refactoring:- Since you already have tested that ensure you that everything is working as expected, you can easily add changes to that code with the certainty that you are not adding any bugs.
• Add New Features Without Breaking:- When you are adding a new feature you can run the tests to ensure that you ain’t breaking any other part of the application.

When we create project using Angular CLI there are dome files which gets created for testing purpose.

Jasmine-core:-

• Jasmine is an open source testing framework for JavaScript.
• It aims to run on ant JavaScript-enabled platform.
• It has a bunch of functionalities to allow us the write different kinds of tests.

karma:-

• Karma is a task runner for our tests. It uses a configuration file in order to set the startup file, the reporter, the testing framework, the browser among other things.

Consider the below eg Which uses the concept of Unit Testing:-

For eg. if we wanted to test this function

1. describe(string,function):- This function defines what we call a Test Suite, a collection of individual Test Specs.
2. it(string,function):- This function defines an individual Test Spec, this contains one or most Test Expectations.
3. expect(actual):- This expression is what we call an Expectation . In conjunction with a Matcher it describes an expected piece of behaviour in the application.
4. matcher(expected):- This expression is what we call a Matcher. It does a boolean comparison with the expected value passed in vs the actual value passed to the expect function, if they are false the spec fails.

Jasmine comes with a few pre-built in matchers like:-

Jasmine has a few functions we can use:-

• beforeAll:- This function is called once, before all the specs in describe test suite are run.
• afterAll:- This function is called once after all the specs in a test suite are finished.
• beforeEach:- This function is called before each test specification, it function has been run.
• afterEach:- This function is called after each test specification has been run.

This are the contents of files which is created by Angular CLI and which is required for Testing

Karma.conf.js:-

This file contains some important things as

• Frameworks:- This is where jasmine gets set as a testing framework. If you want to use another framework this is the place to do it.
• Reporters:- This is where you set the reporters. You can change them or add new ones.
• AutoWatch:- If this is set to true, the tests run in watch mode. If you change any test and save the file the tests are re-build and re-run.
• Browsers:- This is where you set the browser where the test should run. By default is google but you can install and use other browsers launchers.

Test.ts File

• While testing there is no need to change anything in this file, but there are some important things as
• An environment to run angular tests is being created using all the imports at the beginning of the file
• TestBed is a powerful unit testing tool provided by angular, and it is initialized in this file.
• Finally karma loads all the test files of the application matching their names against a regular expression.
• All the files inside our app folder that has “spec.ts”on its name considered as test.

app.component.spec.ts:-

To start Unit testing we can use below command as:-

ng test

The ng test command builds the app in watch mode, and launched the karma test runner.

We can update app.component.spec.ts file for unit testing purpose.