AppDividend
Latest Code Tutorials

Angular Unit Testing Example Tutorial From Scratch

4,890

Get real time updates directly on you device, subscribe now.

In this example, we will see Angular Unit Testing Example Tutorial From Scratch. We will use  Angular 5 for Unit Testing. We will know how you can setup Jasmine and write unit tests for your angular components. Jasmine is the behavior-driven development framework for testing JavaScript code. Jasmine is an open source testing framework from Pivotal Labs that uses behavior-driven notation resulting in a smooth and improved testing experience. The Angular CLI downloads and install everything you need to test an Angular application with the Jasmine test framework. The project you create with the CLI is immediately ready to test. Just run this one CLI command.

Angular Unit Testing Example

You need to set up a dev environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

Step 1. Set up the Development Environment.

Install the Angular CLI globally on your machine.

sudo npm install -g @angular/cli

For Windows machine, type the following command in the administrator mode.

npm install -g @angular/cli

Step 2. Create a new project.

Okay, now we need to create skeleton application by typing the following command.

ng new my-app

Now, we need to go into that project folder and start the development server.

cd my-app

ng serve

You can see our application is running on port: 4200.

The project you create with the CLI is immediately ready to test. Just run this one CLI command:

ng test

 

Angular 5 Unit Test Example

You can see one browser window is open and we can see that our test is passed.

 

Karma Tutorial Example

The test is described inside src  >>  app  >>  app.component.spec.ts file.

// app.component.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

Step 2: Write one Unit Test.

Okay, now create a component by typing the following command.

ng g c dash

It will create a dash folder inside src  >> app folder. Now add new property title inside the dash.component.ts file.

// dash.component.ts

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

@Component({
  selector: 'app-dash',
  templateUrl: './dash.component.html',
  styleUrls: ['./dash.component.css']
})
export class DashComponent implements OnInit {

  title = 'dash';
  constructor() { }

  ngOnInit() {
  }

}

Now, when we have created the component, an angular cli had also created the test file called dash.component.spec.ts.

// dash.component.spec.ts

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

import { DashComponent } from './dash.component';

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

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

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

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

});

Next, We will write one test. So type the following code inside describe() function.

// dash.component.spec.ts

it(`should have as title 'dash'`, async(() => {
    fixture = TestBed.createComponent(DashComponent);
    component = fixture.debugElement.componentInstance;
    expect(component.title).toEqual('dash');
}));

What it will do is that first, it creates an environment to test the dash component, and then we create that component’s instance to check its properties and methods. In this example, we are just testing its property which is equal to ‘dash.’ Now, we have already started the ng test, so we can see that all of our specs are passed, at this time, a total specs is 5.

Angular Jasmine Unit Test

 

So, this is how we can write our own test.

Step 3: Run the DOM Element check spec.

Related Posts
1 of 14

Okay, next step will be to check the text of the component. Whether we are getting the same text as described in a component or not. In our case, the component is a dash. For this spec, we need to include the By() and DebugElement from the @angular/core and @angular/platform-browser package.

 So import that inside dash.component.spec.ts file.

// dash.component.spec.ts

import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

Now, add the third variable inside the describe DashComponent.

// dash.component.spec.ts

let component: DashComponent;
let fixture: ComponentFixture<DashComponent>;
let de: DebugElement;

Finally, write the spec to check the text of the component.

// dash.component.spec.ts

it('should have a h1 tag of `dash works!`', () => {
    expect(de.query(By.css('p')).nativeElement.innerText).toBe('dash works!');
});

Now, our dash.component.html file looks like this by default.

<p>
  dash works!
</p>

So this test must be passed because we are checking the same text. After saving the file, we can see that we have six specs are passed. Now, change in the text like just toBe(‘dash works’). See the output, and you will see the one test is failed.

Jasmine Karma Testing Tutorial

 

We will see an advanced Unit testing the upcoming Tutorials. Our Angular Unit Testing Example is over. Thanks for taking this post.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.