Angular 2 Testing an Angular 2 App Testing Angular Components - Basic

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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.



Got any Angular 2 Question?