import { APP_BASE_HREF } from '@angular/common' ; import { inject , TestBed } from '@angular/core/testing' ; import { RouterModule } from '@angular/router' ; import { SpyLocation } from '@angular/common/testing' ; import { Angulartics2 , Angulartics2Module } from 'angulartics2' ; import { ModalComponent } from './modal.component' ; import { ModalService } from '../../services/modal' ; import { By } from '@angular/platform-browser' ; describe ( 'ModalComponent' , ( ) => { beforeEach ( ( ) => { TestBed . configureTestingModule ( { declarations : [ ModalComponent ] , imports : [ Angulartics2Module . forRoot ( ) , RouterModule . forRoot ( [ ] ) ] , providers : [ Angulartics2 , { provide : APP_BASE_HREF , useValue : '/' } , { provide : Location , useClass : SpyLocation } , ModalService ] } ) ; this . fixture = TestBed . createComponent ( ModalComponent ) ; this . modalComponent = this . fixture . componentInstance ; this . modalService = this . modalComponent . modalService ; } ) ; it ( 'should display a title in h1 when component\'s title property is set' , ( ) => { let newTitle = 'Foobar' ; this . modalService . showModal ( { description : undefined , title : newTitle , url : undefined } ) ; this . fixture . detectChanges ( ) ; let element = this . fixture . debugElement . query ( By . css ( 'h1' ) ) ; expect ( element . nativeElement . innerHTML ) . toBe ( newTitle ) ; expect ( this . modalComponent . visible ) . toBeTruthy ( ) ; } ) ; it ( 'should NOT display a title or h1 tag when component\'s title property is set ' + 'to undefined' , ( ) => { let newTitle = undefined ; this . modalService . showModal ( { description : undefined , title : newTitle , url : undefined } ) ; this . fixture . detectChanges ( ) ; let element = this . fixture . debugElement . query ( By . css ( 'h1' ) ) ; expect ( element ) . toBeNull ( ) ; } ) ; it ( 'should display a description when component\'s description property is set' , ( ) => { let newDesc = 'Modal Desc' ; this . modalService . showModal ( { description : newDesc , title : undefined , url : undefined } ) ; this . fixture . detectChanges ( ) ; let element = this . fixture . debugElement . query ( By . css ( '.modal-content' ) ) ; expect ( element . nativeElement . children [ 0 ] . innerHTML ) . toBe ( newDesc ) ; } ) ; it ( 'should show a url link when component\'s url property is set' , ( ) => { let newUrl = 'http://foo.bar/' ; this . modalService . showModal ( { description : undefined , title : undefined , url : newUrl } ) ; this . fixture . detectChanges ( ) ; let element = this . fixture . debugElement . query ( By . css ( 'a' ) ) ; expect ( element . nativeElement . href ) . toBe ( newUrl ) ; } ) ; describe ( 'close' , ( ) => { it ( 'should hide the modal' , ( ) => { this . modalService . showModal ( { description : undefined , title : undefined , url : undefined } ) ; this . fixture . detectChanges ( ) ; this . modalComponent . close ( ) ; this . fixture . detectChanges ( ) ; let element = this . fixture . debugElement . query ( By . css ( '.overlay' ) ) ; expect ( element ) . toBeNull ( ) ; expect ( this . modalComponent . visible ) . toBeFalsy ( ) ; } ) ; it ( 'should trigger a close Event via Angulartics2' , inject ( [ Angulartics2 ] , ( angulartics2 ) => { spyOn ( angulartics2 . eventTrack , 'next' ) ; this . modalComponent . close ( ) ; expect ( angulartics2 . eventTrack . next ) . toHaveBeenCalledWith ( { action : 'Close' , properties : { category : 'Modal' } } ) ; } ) ) ; } ) ; describe ( 'destroy' , ( ) => { it ( 'should unsubscribe from router events on destroy' , ( ) => { this . fixture . detectChanges ( ) ; spyOn ( this . modalComponent . modalSub , 'unsubscribe' ) ; this . fixture . destroy ( ) ; expect ( this . modalComponent . modalSub . unsubscribe ) . toHaveBeenCalled ( ) ; } ) ; } ) ; } ) ;