Testing is one of the most important aspect of the modern application development process. Angular app testing is really required to point out the bugs and errors that were made during the development phases. Nobody likes a buggy application. A proper testing should be done before providing it to your clients or customers.

Creating a New Angular Project

Let’s get started by firing up our Angular IDE and creating a new Angular project named Angular1.

Now you will see the New Angular Project wizard where you can select the Node.js, NPM and Angular CLI versions. In the New Angular Project wizard, enter Angular 1 as the project name and select Angular CLI version 1.1.0, Node.js version 7.10.0 and NPM version 4.6.1.

Finally, click Finish to complete the creation of a new Angular 4 project. In the Terminal+ view, you can see several commands being executed by Angular CLI. After the installation of all the modules, we are now ready to continue with our project.

Starting the server

There is a server view in Angular IDE, as shown in the below image. To open it click on the Window menu item and select  Show view. Then select Servers.  Right click on your project (here Angular 1) and select Start Server. Angular IDE serves the application on localhost port 4200 by default. So open up http://localhost:4200 in your browser to see the running app.

You should see a screen like the one below at http://localhost:4200.

Important Notes

• When we created project using the AngularIDE, the Jasmine framework is automatically included in the project with Karma.
• Jasmine have Default integration with Karma.
• Karma: This is the test runner for JavaScript
• Jasmine: This refers to the behavior-driven JavaScript testing framework
• To test if something evaluates to true, you use the toBeTruthy matcher
• TestBed is the most important testing utility provided by Angular. It creates an Angular testing module (an @NgModule class), which we can use for our testing purposes.
• you can learn more about TestBed here.

  Why Karma

Karma is not a framework to write tests , it is a test runner. Karma gives us the ability to run tests in several different browsers in an automated way.  Karma Makes it easy to integrate with a continuous integration server. Karma Requires additional tools like jasmine which comes Default integration with Karma.

Why Jasmine

 Jasmine is a javascript testing framework that supports a software development practice called Behaviour Driven Development, or BDDfor short. It’s a specific flavour of Test Driven Development (TDD).  It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

describe(" dunebook Jasmine example", function() {
 it("This is a spec that defines test", function() {
 expect statement // asserts the logic etc
 });
});

Testing in Angular 4

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'angular 4 testing';
}

<div style="text-align:center">
 <h1>
 Welcome to {{title}}!!
 </h1>

</div>

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

import { AppComponent } from './app.component';

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

it('it should work well', async(() => {
 const fixture = TestBed.createComponent(AppComponent);
 const app = fixture.debugElement.componentInstance;
 expect(app).toBeTruthy();
 }));

it(`should have as title 'angular 4 testing'`, async(() => {
 const fixture = TestBed.createComponent(AppComponent);
 const app = fixture.debugElement.componentInstance;
 expect(app.title).toEqual('angular 4 testing');
 }));

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 angular 4 testing');
 }));
});

Creating Angular Service

To create a new Angular Service in Angular IDE, we use the menu File > New > Service.

The file named src/app/app.Service.ts is the Service file and it’s content is below:

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

@Injectable()
export class AppService {

constructor() { }

}

In the above code snippet  We imported the injectable from Angular core.

The app.service.spec.ts file is responsible for testing and it contains the following code –

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

import { AppService } from './app.service';

describe('AppService', () => {
 beforeEach(() => {
 TestBed.configureTestingModule({
 providers: [AppService]
 });
 });

it('App service is Running Fine', inject([AppService], (service: AppService) => {
 expect(service).toBeTruthy();
 }));
});

Let’s Understand the code snippet  above :

1. We imported the required modules TestBed and inject from core/testing.
2. We imported the AppService service from app.service.
3. Using Dependency Injection(DI), we created the service instance of AppService.

Testing our App

Angular IDE has a terminal view from which we can execute commands. So from the menu, select Window, then Show view and then click Terminal+. In the opened terminal, type the following command to run tests –

ng test

After running the test you will see the output as shown in the above screenshot.

Creating  advanced Test

The file named src/app/app.Service.ts is the Service file , Replace  the content as below

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

@Injectable()
export class AppService {

getTopicCount() {
 const Topics = [
 {name : 'laravel'},
 {name: 'angular'},
 {name: 'java'},
 {name: 'python'}
 ];
 return Object.keys(Topics).length;
 };
}

let’s  understand the code snippet above

• We defined the getTopicCount method to return the count of Topic.
• we have inserted 4 values laravel , angular , java & python

The app.service.spec.ts file is responsible for testing and Replace the content with code  below –

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

import { AppService } from './app.service';

describe('AppService', () => {
 beforeEach(() => {
 TestBed.configureTestingModule({
 providers: [AppService]
 });
 });

it(' Angular Service should return 3 values', inject([AppService], 
 (service: AppService) => {
 let countTopic = service.getTopicCount;
 expect(countTopic).toBe(3);


 }));
});

let’s understand the  code snippet above

• We create a test case; we need to inject the service, invoke the getTopicCount method, and assert whether the value matches to 3.

Re-Testing our App

In the opened terminal, type the following command to run tests –

ng test

After running the test you will see the  Failed output as shown in the above screenshot. it failed because we have 4 values in app.service.ts file & does not matches to 3. Removing one value from app.service.ts file will test our app successfully.

Conclusion

Testing is a crucial part of software development process. Bugs and crashes can defame the development company as well as hurt the clients too. Therefore a separate testing team is hired by companies to check the software from all the possible angles known to them. Angular IDE has an inbuilt testing tool known as Jasmine. Its a framework designed to test the Angular app. There are some syntax which are used against the output and compared with the desired value. It then displays the list of errors occurred during testing. AngularI DE is a very power too for the development of Angular 4 apps and in this article we covered the testing feature of Angular IDE.