import { TestBed , async } from '@angular/core/testing' ; import { AppComponent } from './app.component' ; import { HttpClientTestingModule , HttpTestingController } from '@angular/common/http/testing' ; describe ( 'AppComponent' , ( ) => { beforeEach ( async ( ( ) => { TestBed . configureTestingModule ( { imports : [ HttpClientTestingModule ] , 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 ( 'Demo' ) ; } ) ) ; 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 Demo!' ) ; } ) ) ; it ( 'should fetch data from backend' , async ( ( ) => { const http = TestBed . get ( HttpTestingController ) ; const fixture = TestBed . createComponent ( AppComponent ) ; const app = fixture . debugElement . componentInstance ; http . expectOne ( 'resource' ) . flush ( { id : 'XYZ' , content : 'Hello' } ) ; expect ( app . data . content ) . toContain ( 'Hello' ) ; } ) ) ; } ) ;