Testing Angular Apps with Jasmine and Karma: A Comprehensive Guide
Learn How to Write Unit Tests with Jasmine and Karma in Angular
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:
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 (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:
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.
Angular CLI
Jasmine
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
andCalculatorService
.We use the
describe
function to group the tests.We then define the
beforeEach
function, which is called before each test. Here, we configure theTestBed
to use theCalculatorService
.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.