import { Component } from '@angular/core' ; import { async , ComponentFixture , TestBed } from '@angular/core/testing' ; import { ColorServiceModule , colorSets } from '../../services/color' ; import { MediaPlayerModule } from './media-player.module' ; @ Component ( { selector : 'ux-media-player-audio' , template : '<ux-media-player class="media-player" type="audio" [filename]="filename" [source]="audioSource"></ux-media-player>' } ) export class MediaPlayerAudioComponent { filename : string = null ; audioSource = '' ; constructor ( ) { } } describe ( 'Media Player Component - Audio' , ( ) => { let component ; let fixture ; let nativeElement ; beforeEach ( async ( ( ) => { TestBed . configureTestingModule ( { imports : [ MediaPlayerModule , ColorServiceModule . forRoot ( colorSets . keppel ) ] , declarations : [ MediaPlayerAudioComponent ] , } ) . compileComponents ( ) ; } ) ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( MediaPlayerAudioComponent ) ; component = fixture . componentInstance ; nativeElement = fixture . nativeElement ; fixture . detectChanges ( ) ; } ) ; it ( 'should initialise correctly' , ( ) => { expect ( component ) . toBeTruthy ( ) ; } ) ; it ( 'should not display any title when a base64 file type is used' , ( ) => { component . audioSource = 'data:audio/mpeg;base64,/+MYxAAAAANIAAAAAExBTUUzLjk4LjIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' ; component . filename = '' ; fixture . detectChanges ( ) ; expect ( getTitle ( ) ) . toBe ( '' ) ; } ) ; it ( 'should display Display Name when one is added to the mark up' , ( ) => { component . filename = 'Display Name' ; fixture . detectChanges ( ) ; expect ( getTitle ( ) ) . toBe ( 'Display Name' ) ; } ) ; it ( 'should display the filename when a file is used' , ( done ) => { component . filename = '' ; component . audioSource = 'https://uxaspects.github.io/UXAspects/assets/Ocean-Waves.mp3' ; fixture . detectChanges ( ) ; setTimeout ( ( ) => { fixture . detectChanges ( ) ; expect ( getTitle ( ) ) . toBe ( 'Ocean-Waves.mp3' ) ; done ( ) ; } , 2000 ) ; } ) ; function getTitle ( ) { return nativeElement . querySelector < HTMLParagraphElement > ( '.player-container .audio-player .audio-file-name' ) . innerText ; } } ) ;