Angular – How to Get Started with Unit Test

This blog represents code sample on how to get started with unit test in an Angular app (Angular 2/Angular 4). The code sample shown below could be used as a template for creating a unit test spec for any component.

Unit Test Code Sample for Angular Component

Pay attention to following two points:

• Need to declare component which needs to be tested; In the code shown below, it is the SignupComponent which is tested. Note that SignupComponent represents template-driven form for Signup. In another example, the unit test for AppComponent is shown.
• Need to declare the modules which are required for testing the component; In the unit test code given below for SignupComponent, it is FormsModule which needs to be declared owing to the fact that Signup form is a template-driven form. In another example, for AppComponent, the feature module which is referenced in AppModule needs to be declared as part of imports array.

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

import { SignupComponent } from './signup.component';
import { FormsModule } from '@angular/forms';

describe('SignupComponent', () => {
  beforeEach(async(() =>; {
    TestBed.configureTestingModule({
      <strong>declarations: [
        SignupComponent
      ],
      imports: [
        FormsModule
      ],</strong>
    }).compileComponents();
  }));

  it('should create the app', async(() => {
<strong>    const fixture = TestBed.createComponent(SignupComponent);</strong>
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Below is the code which represents the unit test spec for bootstrap component, app.component.ts, which is found at the root level. This component is used to bootstrap the app.

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

import { AppComponent } from './app.component';
import {SignupModule} from './signup/signup.module';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      <strong>declarations: [
        AppComponent
      ],
      imports: [SignupModule]</strong>
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    <strong>const fixture = TestBed.createComponent(AppComponent);</strong>
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

Pay attention to some of the following in above code:

• Feature module such as SignupModule needs to be declared if it is referenced in the template code
• Component which is tested needs to be declared; In above code, this is AppComponent which is tested.

How to Run Unit Test

Execute the following command in the root folder to run the unit tests:

ng test

In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.