Angular – How to Get Started with Unit Test

0

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.



Ajitesh Kumar

Ajitesh Kumar

Ajitesh has been recently working in the area of AI and machine learning. Currently, his research area includes Safe & Quality AI. In addition, he is also passionate about various different technologies including programming languages such as Java/JEE, Javascript and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.