Introduction Unit testing is a critical component of software development, and Angular provides a robust testing framework. The testing framework comprises Jasmine, a popular JavaScript testing library, and Karma, a test runner, that can be used to execute the tests. In this article, we will explore how to write unit tests using Jasmine and Karma in Angular.

Prerequisites

Before we get started with writing unit tests, let's make sure we have the necessary tools installed. We will require the following tools:

1. Node.js and NPM

   Installing Node.js and npm is a simple process that can be done in a few steps.

Step 1

Download Node.js Installer Go to the Node.js website and download the installer for your operating system (https://nodejs.org/en/download/).

Step 2

Run the Installer Once the installer is downloaded, run it and follow the installation wizard.

Step 3

Verify Installation To verify that Node.js and npm are installed, open a terminal or command prompt and enter the following commands:

1.   node -v
   

   This will print the version of Node.js installed.

    npm -v
   

   This will print the version of npm installed.

   If both of these commands return a version number, then Node.js and npm have been successfully installed.

   Note: On some operating systems, you may need to restart your computer for the changes to take effect.

   That's it! You have successfully installed Node.js and npm.

2. Angular CLI

3. Jasmine

4. Karma

Step 1

Creating an Angular Application To get started with writing unit tests, we need an Angular application. Let's create a new Angular application using the Angular CLI.

ng new my-app

Step 2

Creating a Service Let's create a simple service that will perform a basic arithmetic operation.

ng generate service calculator

This will generate a service file in the app directory. We can then add a method that will perform the arithmetic operation.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CalculatorService {

  add(a: number, b: number): number {
    return a + b;
  }
}

Step 3

Creating a Unit Test Now that we have a service, let's create a unit test for it. The following code snippet shows a basic unit test for the add method.

import { TestBed } from '@angular/core/testing';

import { CalculatorService } from './calculator.service';

describe('CalculatorService', () => {
  let service: CalculatorService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(CalculatorService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should add two numbers', () => {
    const result = service.add(2, 3);
    expect(result).toBe(5);
  });
});

Let's break down the code to understand what's happening:

• We start by importing the necessary modules - TestBed and CalculatorService.

• We use the describe function to group the tests.

• We then define the beforeEach function, which is called before each test. Here, we configure the TestBed to use the CalculatorService.

• In the first test, we check if the service has been created by calling the toBeTruthy method.

• In the second test, we call the add method of the service and check if the result is equal to 5.

Step 4

Running the Unit Test Now that we have a unit test, let's run it using Karma. We can use the following command to start the test runner:

ng test

This will start the Karma test runner, and the tests will be executed in Chrome. Once the tests are complete, the results will be displayed in the terminal.

Conclusion

In this article, we have explored how to write unit tests using Jasmine and Karma in Angular. We started by creating a new Angular application, creating a service, and then creating a unit test for the service. Finally, we ran the unit test using Karma. Writing unit tests is an essential part of software development, and using the Angular testing framework, we can ensure that our code is robust and reliable.

End Note

For more such blogs, do follow me on HashNode. You can also consider following my other socials, GitHub, LinkedIn, and Twitter.