Angular 2 Testing an Angular 2 App Testing Angular Components - Basic
Example
The component code is given as below.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1>'
})
export class MyAppComponent{
title = 'welcome';
}
For angular testing, angular provide its testing utilities along with the testing framework which helps in writing the good test case in angular. Angular utilities can be imported from @angular/core/testing
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAppComponent } from './banner-inline.component';
describe('Tests for MyAppComponent', () => {
let fixture: ComponentFixture<MyAppComponent>;
let comp: MyAppComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
MyAppComponent
]
});
});
beforeEach(() => {
fixture = TestBed.createComponent(MyAppComponent);
comp = fixture.componentInstance;
});
it('should create the MyAppComponent', () => {
expect(comp).toBeTruthy();
});
});
In the above example, there is only one test case which explain the test case for component existence. In the above example angular testing utilities like TestBed and ComponentFixture are used.
TestBed is used to create the angular testing module and we configure this module with the configureTestingModule method to produce the module environment for the class we want to test.
Testing module to be configured before the execution of every test case that's why we configure the testing module in the beforeEach function.
createComponent method of TestBed is used to create the instance of the component under test. createComponent return the ComponentFixture. The fixture provides access to the component instance itself.
