import { ChangeDetectionStrategy , ChangeDetectorRef , Component , Injectable , ViewChild , ElementRef } from '@angular/core' ; import { TestBed , fakeAsync , tick , discardPeriodicTasks } from '@angular/core/testing' ; import { TimeagoModule , TimeagoClock , TimeagoFormatter , TimeagoPipe , TimeagoIntl , TimeagoCustomFormatter , IL10nsStrings } from '../lib/src/public_api' ; const strings = { prefixAgo : null , prefixFromNow : null , suffixAgo : 'ago' , suffixFromNow : 'from now' , second : '%d second' , seconds : '%d seconds' , minute : '%d minute' , minutes : '%d minutes' , hour : '%d hour' , hours : '%d hours' , day : 'a day' , days : '%d days' , month : '%d month' , months : '%d months' , year : '%d year' , years : '%d years' , wordSeparator : ' ' , } ; class FakeChangeDetectorRef extends ChangeDetectorRef { markForCheck ( ) { } detach ( ) { } detectChanges ( ) { } checkNoChanges ( ) { } reattach ( ) { } } @ Injectable ( ) @ Component ( { selector : 'app-root' , template : `
    <div #static>{{date | timeago:false}}</div>
    <div #live>{{date | timeago:true}}</div>
    <div #var>{{date | timeago:isLive}}</div>
  ` , } ) class AppComponent { @ ViewChild ( 'static' ) static : ElementRef ; @ ViewChild ( 'live' ) live : ElementRef ; @ ViewChild ( 'var' ) var : ElementRef ; date = Date . now ( ) - 1000 ; isLive = false ; } describe ( 'TimeagoPipe' , ( ) => { let clock ; let formatter ; let intl ; let pipe ; let ref ; let date ; beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ TimeagoModule . forRoot ( { formatter : { provide : TimeagoFormatter , useClass : TimeagoCustomFormatter } } ) ] , providers : [ TimeagoIntl ] , declarations : [ AppComponent ] } ) ; date = Date . now ( ) - 1000 ; clock = TestBed . get ( TimeagoClock ) ; formatter = TestBed . get ( TimeagoFormatter ) ; intl = TestBed . get ( TimeagoIntl ) ; intl . strings = { ... strings } ; ref = new FakeChangeDetectorRef ( ) ; } ) ; afterEach ( ( ) => { clock = undefined ; formatter = undefined ; intl = undefined ; ref = undefined ; pipe = undefined ; } ) ; it ( 'is defined' , ( ) => { pipe = new TimeagoPipe ( intl , ref , formatter , clock ) ; expect ( TimeagoPipe ) . toBeDefined ( ) ; expect ( pipe ) . toBeDefined ( ) ; expect ( pipe instanceof TimeagoPipe ) . toBeTruthy ( ) ; } ) ; it ( 'should render a formatted timestamp' , ( ) => { pipe = new TimeagoPipe ( intl , ref , formatter , clock ) ; expect ( pipe . transform ( date ) ) . toEqual ( '1 second ago' ) ; } ) ; it ( 'should call markForCheck when it formats a timestamp' , ( ) => { pipe = new TimeagoPipe ( intl , ref , formatter , clock ) ; spyOn ( ref , 'markForCheck' ) . and . callThrough ( ) ; pipe . transform ( date ) ; expect ( ref . markForCheck ) . toHaveBeenCalled ( ) ; } ) ; it ( 'should throw if you dont give a valid date' , ( ) => { pipe = new TimeagoPipe ( intl , ref , formatter , clock ) ; expect ( ( ) => { pipe . transform ( null ) ; } ) . toThrowError ( `Wrong parameter in TimeagoPipe. Expected a valid date, received: null` ) ; } ) ; it ( 'should handle clock ticks properly based on input' , fakeAsync ( ( ) => { const fixture = TestBed . createComponent ( AppComponent ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . static . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; expect ( fixture . debugElement . componentInstance . live . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; tick ( 1000 ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . static . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; expect ( fixture . debugElement . componentInstance . live . nativeElement . innerHTML ) . toEqual ( '2 seconds ago' ) ; discardPeriodicTasks ( ) ; } ) ) ; it ( 'should listen to intl changes' , ( ) => { const fixture = TestBed . createComponent ( AppComponent ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . static . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; intl . strings . second = '%d testSecond' ; intl . changes . next ( ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . static . nativeElement . innerHTML ) . toEqual ( '1 testSecond ago' ) ; } ) ; it ( 'should listen to date changes' , ( ) => { const fixture = TestBed . createComponent ( AppComponent ) ; fixture . componentInstance . date = Date . now ( ) - 2000 ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . static . nativeElement . innerHTML ) . toEqual ( '2 seconds ago' ) ; } ) ; it ( 'should listen to live changes' , fakeAsync ( ( ) => { const fixture = TestBed . createComponent ( AppComponent ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . var . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; tick ( 1000 ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . var . nativeElement . innerHTML ) . toEqual ( '1 second ago' ) ; fixture . componentInstance . isLive = true ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . var . nativeElement . innerHTML ) . toEqual ( '2 seconds ago' ) ; tick ( 1000 ) ; fixture . detectChanges ( ) ; expect ( fixture . debugElement . componentInstance . var . nativeElement . innerHTML ) . toEqual ( '3 seconds ago' ) ; discardPeriodicTasks ( ) ; } ) ) ; } ) ;