import { ComponentFixture , TestBed , waitForAsync } from '@angular/core/testing' ; import { AvatarComponent } from './avatar.component' ; import { SourceFactory } from './sources/source.factory' ; import { AvatarService } from './avatar.service' ; import { By } from '@angular/platform-browser' ; import { SimpleChange } from '@angular/core' ; import { AvatarSource } from './sources/avatar-source.enum' ; import { Observable , of , throwError } from 'rxjs' ; import { Source } from './sources/source' ; class AvatarServiceMock { public fetchAvatar ( avatarUrl ) { return avatarUrl === 'https://api.github.com/users/github-username' ? of ( { avatar_url : 'https://mocked.url/foo.jpg' , } ) : throwError ( new Error ( 'Mocked error for ' + avatarUrl ) ) ; } public compareSources ( source1 , source2 ) { return 0 ; } public isSource ( source ) { return true ; } public isTextAvatar ( sourceType ) { return true ; } public getRandomColor ( avatarText ) { return '' ; } public markSourceAsFailed ( source ) { } public sourceHasFailedBefore ( source ) { return source . sourceType === AvatarSource . GRAVATAR ; } } describe ( 'AvatarComponent' , ( ) => { let component ; let fixture ; let avatarService ; beforeEach ( waitForAsync ( ( ) => { TestBed . configureTestingModule ( { declarations : [ AvatarComponent ] , providers : [ SourceFactory , { provide : AvatarService , useClass : AvatarServiceMock } ] } ) . compileComponents ( ) ; fixture = TestBed . createComponent ( AvatarComponent ) ; component = fixture . componentInstance ; avatarService = TestBed . inject ( AvatarService ) ; fixture . detectChanges ( ) ; } ) ) ; it ( 'should create' , ( ) => { expect ( component ) . toBeTruthy ( ) ; } ) ; describe ( 'AvatarText' , ( ) => { it ( 'should display the initials of the given value' , ( ) => { component . initials = 'John Doe' ; component . ngOnChanges ( { initials : new SimpleChange ( null , 'John Doe' , true ) } ) ; fixture . detectChanges ( ) ; const avatarTextEl = fixture . debugElement . query ( By . css ( '.avatar-container > div' ) ) ; expect ( avatarTextEl . nativeElement . textContent . trim ( ) ) . toBe ( 'JD' ) ; } ) ; } ) ; it ( 'should not try again failed sources' , ( ) => { component . gravatar = 'invalid@example.com' ; component . initials = 'John Doe' ; component . ngOnChanges ( { gravatar : new SimpleChange ( null , 'invalid@example.com' , true ) , initials : new SimpleChange ( null , 'John Doe' , true ) } ) ; fixture . detectChanges ( ) ; const avatarTextEl = fixture . debugElement . query ( By . css ( '.avatar-container > div' ) ) ; expect ( avatarTextEl . nativeElement . textContent . trim ( ) ) . toBe ( 'JD' ) ; } ) ; it ( 'should try next async source if first async source fails' , ( ) => { spyOn ( avatarService , 'isTextAvatar' ) . and . returnValue ( false ) ; component . google = 'invalid@example.com' ; component . github = 'github-username' ; component . ngOnChanges ( { google : new SimpleChange ( null , 'invalid@example.com' , true ) , github : new SimpleChange ( null , 'github-username' , true ) } ) ; fixture . detectChanges ( ) ; const avatarImgEl = fixture . debugElement . query ( By . css ( '.avatar-container > img' ) ) ; expect ( avatarImgEl . nativeElement . src ) . toBe ( 'https://mocked.url/foo.jpg&s=50' ) ; } ) ; describe ( 'AvatarImage' , ( ) => { } ) ; } ) ;