import { ComponentFixture , TestBed } from '@angular/core/testing' ; import { BannerComponent } from './banner-external.component' ; describe ( 'BannerComponent (external files)' , ( ) => { let component ; let fixture ; let h1 ; describe ( 'setup that may fail' , ( ) => { beforeEach ( async ( ) => { await TestBed . configureTestingModule ( { declarations : [ BannerComponent ] , } ) ; fixture = TestBed . createComponent ( BannerComponent ) ; } ) ; it ( 'should create' , ( ) => { expect ( fixture . componentInstance ) . toBeDefined ( ) ; } ) ; } ) ; describe ( 'Two beforeEach' , ( ) => { beforeEach ( async ( ) => { await TestBed . configureTestingModule ( { declarations : [ BannerComponent ] , } ) . compileComponents ( ) ; } ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( BannerComponent ) ; component = fixture . componentInstance ; h1 = fixture . nativeElement . querySelector ( 'h1' ) ; } ) ; tests ( ) ; } ) ; describe ( 'One beforeEach' , ( ) => { beforeEach ( async ( ) => { await TestBed . configureTestingModule ( { declarations : [ BannerComponent ] , } ) . compileComponents ( ) ; fixture = TestBed . createComponent ( BannerComponent ) ; component = fixture . componentInstance ; h1 = fixture . nativeElement . querySelector ( 'h1' ) ; } ) ; tests ( ) ; } ) ; function tests ( ) { it ( 'no title in the DOM until manually call `detectChanges`' , ( ) => { expect ( h1 . textContent ) . toEqual ( '' ) ; } ) ; it ( 'should display original title' , ( ) => { fixture . detectChanges ( ) ; expect ( h1 . textContent ) . toContain ( component . title ) ; } ) ; it ( 'should display a different test title' , ( ) => { component . title = 'Test Title' ; fixture . detectChanges ( ) ; expect ( h1 . textContent ) . toContain ( 'Test Title' ) ; } ) ; } } ) ;