Angular Testing With Jasmine And Karma Using Selenium [Tutorial]

Introduction to Unit Testing

Unit testing is a type of software technique where individual units or components of an application are tested to ascertain they are working as expected. Unit tests are typically automation tests written and run by the software developer during the coding phase to test standalone modules of the application for its functional correctness. A unit can be an individual function, method, procedure, module, or object.

The main goal of Unit testing is to break the application source code into isolated units to identify, analyze and fix the defects arising from that particular unit. Testing a unit in isolation means testing without external resources like API endpoint or database. Instead, substitutes such as stub methods, mock objects or fakes will be used to harness a fake response and test code will be written based on that. 

Example: A library named Moxios is used to mock API calls using Axios.

Developers and product owners often overlook Unit testing by pointing out limited development time and resources as reasons, making them proceed without it. And yes, this seldom works out. But the companies that are serious about the quality delivery of their product understands the significance of Unit testing and is diligent in enforcing it.

Since we are talking about Unit testing, it is also worth mentioning the most popular approaches that are used in combination with it – Test-Driven Development (TDD) and Behaviour-Driven Development (BDD).

Read More: TDD vs. BDD Comparison

Benefits of Unit testing

Unit testing is becoming more popular in the web development world. According to the reports presented by the fourth annual Developer Ecosystem Survey (2020) conducted by JetBrains, 77% of the developers stated that testing is an integral part of the development process in their companies or teams. Furthermore, 68% voted for Unit testing as the most popular approach.

Source

Larger or smaller, every project can enjoy the benefits of Unit testing. A few significant advantages are listed below:

• Helps identify and fix bugs early in the development cycle and save costs. 
• Forces developers to improve the design of implementations as it is difficult to write unit tests for poorly written code.
• Ensures the developer that the new feature added is not breaking the existing code hence giving confidence in code quality.
• Simplified debugging fails; only the latest code needs to be if the test fails debugged.
• Aids in overall faster development.
• Allows better refactoring of code.
• Good Unit testing can even serve as project documentation. Developers, especially those who newly joined the team, can look at the unit tests to learn about the functionality provided by the unit, how to use it etc.

Limitations of Unit testing

It is equally important to understand the limitations of Unit testing. A few are listed below: 

• It is impossible to catch every error in the program using Unit testing as it cannot evaluate every execution path. It cannot catch integration errors, complex broad system errors or non-functional attributes like usability, scalability, performance etc.
• The difficulty of setting up realistic and relevant unit tests. If they are not set correctly, it can diminish the value and accuracy of test results.
• If the Unit test involves just passing input and verifying the output for a method, it tends to be easy to create. However, it is not so simple if it includes something more complex like interaction with an external resource.

Unit testing With Angular Framework

Since Unit testing has become an integral part of development, all the major development frameworks now come with support for Unit testing. Numerous testing libraries and frameworks are available to reduce the amount of time taken to write tests.

In the further section of Angular testing with Jasmine and Karma tutorial, you will learn how to test Angular applications with Karma Testrunner and Jasmine framework using Selenium.  

On a side note, you can refer to our detailed guide on Angular E2E Testing to learn how to perform End-To-End Testing With JavaScript And Karma.

But before that, let us know and understand why we are using them.

Why Karma?

Karma is the default test runner for applications created using Angular CLI. Being a direct product of the AngularJS team, Karma is very well suited for testing Angular or any other JavaScript-based project. Running on Node.js, Karma test runner can be seamlessly integrated with testing frameworks like Jasmine, Mocha, QUnit and integration services like Jenkins, CircleCI, TravisCI etc. In addition, it allows you to run your automated tests on various browsers and devices.

Karma uses a configuration file to set the startup file, the testing framework, the reporters, the browser and other things. It aims to bring a productive testing environment to developers by spending less time on setting up the configurations but more time on coding. Additionally, there is also good online documentation. 

The NPM package download trends show that even in 2021 Karma is the most popular Test Runner for Angular Testing.

Source

Why Jasmine?

Jasmine is a testing framework for JavaScript that supports the Behavior-Driven Development (BDD) practice. It plays very well with Karma and is part of the default setup with Angular CLI. Jasmine is known to be feature-rich and provides easy integration with reporting. Also, it provides additional functions such as fakes, spies and pass-throughs. We will be performing Angular Testing with Jasmine.

Behaviour-Driven Development (BDD) is a testing practice that focuses on the application’s behavior. BDD allows you to write tests in human-readable (simple English) format so that even non-technical people can easily understand what is being tested.  This plain English format used to write BDD test scenarios is known as the Gherkin language.

Also Read: Behavior Driven Development in Selenium With Gherkin

The BDD tests can act as living test documentation that is easy to maintain and can be consumed by all team members including product owners, business analysts, developers, testers, etc.

We will be writing our unit tests using Jasmine following the BDD approach. Then using Karma test runner, we can trigger the test execution from the CLI. Karma also has a watch mode that can automatically detect changes in development files and re-runs the test. Don’t worry! You will reach a better understanding once you start writing the unit tests.

Why Selenium?

Although Selenium is a tool that needs no introduction among software testers, because this article is primarily aimed at developers, let us first specify what is Selenium.

Selenium is a free open-source test automation framework that is used to automate web browsers. It allows you to validate websites and web apps across multiple devices, browsers and OS to ensure it is working properly as expected. Selenium Webdriver and Selenium Grid are the integral components of the Selenium automation framework.

If you are looking for ways to scale by running tests distributedly, Selenium Grid is the best choice. Selenium Grid allows you to run tests parallely on multiple machines (environments) against various browsers, OS and device combinations hence boosting the speed of the testing cycle without compromising on the test coverage.

In this Angular testing with Jasmine and Karma tutorial, we will be configuring the Jasmine framework with the online Selenium Grid provided by TestMu AI platform. TestMu AI serves you with a cloud-based Grid infrastructure through which you can access 3000+ desktop and mobile browser environments.

Now that you got a gist of the above discussed tools, let us move on to writing Unit test cases in an Angular application. 

But before that let us set up a dummy project upon which we will be writing meaningful Unit tests.

Writing your first Angular Unit Test using Jasmine

We have successfully completed our test configuration.In this section of Angular testing with Jasmine, we will write unit test cases for Angular using Jasmine.

Understanding the Test Run flow

As mentioned earlier, associated with each component, a spec.ts file will be generated inside which we will be writing our test case. The default spec file generated for the App component app.component.spec.ts is shown below:

Let us understand the test run flow.

• Import all the tools we will be going to use like TestBed.
• Import all of the dependencies for this component.
• To start our test block, we use the “describe” function, the title of which will be matching the component name under test.describe(string, function)
• Then we have the “it” function, which is used to define test cases. Meaningful names can be given to the test case.it(string, function)
• Additionally, we also have setup and teardown functions which will be run before or after each “it” function. Here, “beforeEach” is defined which contains async code. The purpose of this is to await till all the async code is finished before continuing. This function is called before each test specification (it function) is run.

We have three Unit tests over here:

• First one verifies that the app is created successfully.
• Second one verifies the app title is equal to the expected value.
• Third one verifies that the title is rendered.

The overall run flow can be visualized as below:

Writing Unit test cases for Components

Now that you have an idea about how the test run flows, let us start by writing Unit test cases for the header component. To write meaningful tests, it is crucial to identify what you need to test. 

For the header component, I want to verify the following cases:

• It should display a logo containing the text “My Stay”.
• It should have six nav links.
• It should navigate to the register page by clicking the signup/login button.

The code for testing the header component is shown below.

//header.component.spec.ts
 
import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Location } from "@angular/common";
 
import { HeaderComponent } from './header.component';
 
describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HeaderComponent ]
    })
    .compileComponents();
  });
 
  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 
  it('should display logo containing text "My Stay"', () => {
     const logoText =fixture.debugElement.query(By.css('.navbar-brand')).nativeElement;
     expect(logoText.textContent).toBe('My Stay ');
  });
 
  it('should contain 6 nav links', () => {
    const navLinks = fixture.debugElement.queryAll(By.css('li.nav-item'));
    expect(navLinks.length).toEqual(6);
  });
 
  it('navigates to register page on clicking signup/signin button', () => {
    const location: Location = TestBed.inject(Location);
    const button =fixture.debugElement.query(By.css('button.btn')).nativeElement;
    button.click();
    expect(location.path()).toBe('/user-register');
  });
});

Now I want to test my footer component. Following are the test cases:

• It should contain the copyright text
• It should contain three social media contact buttons

The code for testing footer component is shown below:

//footer.component.spec.ts
 
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
 
import { FooterComponent } from './footer.component';
 
describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ FooterComponent ]
    })
    .compileComponents();
  });
 
  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 
  it('should contain copyright text', () => {
    const text =fixture.debugElement.query(By.css('.copyright')).nativeElement;
    expect(text.textContent).toContain('Copyright');
  });
 
  it('should contain 3 social media contact buttons ', () => {
    const btns = fixture.debugElement.queryAll(By.css('a.btn'));
    expect(btns.length).toEqual(3);
  });
});

Lastly, I want to test my Login Component. Following are the test cases:

• It should be able to login by entering an email and password and submitting form
• It should route to register page by clicking the “Sign Up here” link

The code for testing the login component is shown below.

//login.component.spec.ts
 
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { Location } from "@angular/common";
 
import { LoginComponent } from './login.component';
 
describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FormsModule ],
      declarations: [LoginComponent],
    }).compileComponents();
  });
 
  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 
  it('should be able to login by entering email and password and submitting form', () => {
    component.User['email'] = '[email protected]';
    component.User['password'] = '123456789';
    const loginBtn = fixture.debugElement.query(By.css('button.login-btn')).nativeElement;
    loginBtn.click();
    expect(component.submitted).toBeTrue;
  });
 
 
  it('should route to register page by clicking “Sign Up here” link', () => {
    const location: Location = TestBed.inject(Location);
    const link =fixture.debugElement.query(By.css('a')).nativeElement;
    link.click();
    expect(location.path()).toBe('/user-register');
  });
});

Now it is time to run the test cases. Execute the following command.

ng test

Go to the TestMu AI Automation Dashboard. You can notice the test starts running on a cloud-based Selenium grid.

Go to Automation Logs to see the detailed report of your tests.

We have successfully executed our Unit test cases in Angular.

Navigate to the TestMu AI Analytics Dashboard to view test performance metrics of your Unit tests. The Test Overview will provide a screenshot of tests with consistent behavior. Meanwhile, the Test Summary will show the total number of passed or failed tests, and any completed or queued tests.