Example: How to test an Angular application

Testing is an essential part of software development, and Angular applications are no exception. With the latest version of Angular, testing has become even more accessible and more comfortable than ever before. In this post, we’ll explore how to test an Angular application with a real-world example.

Setting Up the Environment

Before we dive into testing, we need to set up our environment. We’ll need Node.js and the Angular CLI installed on our machine. Once we have those installed, we can create a new Angular project using the following command:

ng new my-app

This command will create a new Angular project in a directory called my-app.

Writing the Test

Now that we have our project set up, we can start writing our test. We’ll be testing a simple component that displays a list of users. Here’s the code for our component:

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

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `,
})
// Example Name Expected in Test:  expect(items[0].textContent).toContain('Angad');
 //   expect(items[1].textContent).toContain('Christopher');
 //   expect(items[2].textContent).toContain('Simba');

export class UserListComponent {
  users = [
    { name: 'Angad' },
    { name: 'Christopher' },
    { name: 'Simba' },
  ];
}

Our component simply displays a list of users using the *ngFor directive.

To test this component, we’ll create a new file called user-list.component.spec.ts in the app directory. Here’s the code for our test:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserListComponent } from './user-list.component';

describe('UserListComponent', () => {
  let component: UserListComponent;
  let fixture: ComponentFixture<UserListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserListComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(UserListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should display a list of users', () => {
    const element = fixture.nativeElement;
    const items = element.querySelectorAll('li');
    expect(items.length).toEqual(component.users.length);
    expect(items[0].textContent).toContain('Angad');
    expect(items[1].textContent).toContain('Christopher');
    expect(items[2].textContent).toContain('Simba');
  });
});

Let’s go through this code step by step.

First, we import ComponentFixture and TestBed from @angular/core/testing, as well as our UserListComponent.

Next, we use the describe function to define a test suite for our component. Inside the describe function, we define two variables: component and fixture. We also use the beforeEach function to set up our test environment. In this case, we use the TestBed.configureTestingModule function to configure our test module with our component.

In the second beforeEach function, we use the TestBed.createComponent function to create a new instance of our component. We also use the fixture.detectChanges function to trigger change detection and update the component’s view.

Finally, we define two tests using the it function. The first test simply checks that our component was created successfully. The second test checks that our component is displaying a list of users correctly. We use the fixture.nativeElement property to access the component’s DOM elements and the expect function to make our assertions.

Running the Test

To run our test, we simply need to run the following command:

ng test

This will start the Angular test runner and run our test. If everything is working correctly, we should see something like this:

Chrome 94.0.4606.81 (Windows 10): Executed 2 of 2 SUCCESS (0.02 secs / 0.018 secs)TOTAL: 2 SUCCESS

This means that both of our tests passed successfully!

Conclusion

Testing is an essential part of software development, and Angular makes it easy to write and run tests for our applications. In this post, we explored how to test an Angular component using a real-world example. By following these principles, we can ensure that our Angular applications are robust, reliable, and bug-free.
Reference: Angular Testing Guide: https://angular.io/guide/testing

Share on Facebook

Post on X

Follow us

Save