Testing Angular Apps with Jasmine and Karma

Creating a New Angular Project

Did you know that CodeLive makes it really easy to explore Angular applications? Hover over a component on the page to view the component name, and click the component to view the dashboard list, filtered for the selected component. Easily jump to the corresponding TypeScript, HTML, or CSS file. Watch this video for a quick demo.

Testing Modules in Your Angular Project

Jasmine

describe(" dunebook Jasmine example", function() {
 it("This is a spec that defines test", function() {
 expect(actual).toBe(true);
 });
});

• `describe` defines a test suite, it takes a string and function as parameters.
• `it`, like `describe`, also takes a string and a function, and defines a test/spec.
• `expect` takes a value, called the actual, which is compared via one of several matchers (`toBe` in this case) to an expected value.

Karma

Testing an Angular Component

Modifying our Angular Root Component

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

1. We have imported the required modules namely `TestBed` and `async` from `angular/core/testing`.
2. In the first test script, we wrote a simple expect statement for the component, tobeTruthy.
3. In the second test script, we created an instance of the component via `TestBed.createComponent`: • We created an instance of the root component via TestBed.createComponent. •  Using `debugElement`, we created the instance of the created component, `app`. •  Using `app`, we are able to get the title of the component, and use the `toEqual` assertion to check whether the title is equal to “angular 4 testing”.
4. In the last test script we use `debugElement#nativeElement` method and target `<h1>`. Here we are checking if `<h1>` contains, “Welcome to angular 4 testing”.
5. The difference between the second and third test scripts is that in third script we are waiting for changes to be detected by using the `detectChanges` method.

Testing an Angular Service

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();
  }));
});

Running the Tests

Creating an Advanced Test

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;
  }
}

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);


    }));
});

In Closing