import { TestBed , async } from '@angular/core/testing' ; import { RouterTestingModule } from '@angular/router/testing' ; import { Title } from '@angular/platform-browser' ; import { Component , Input , Output , EventEmitter } from '@angular/core' ; import { ReactiveFormsModule } from '@angular/forms' ; import { Router } from '@angular/router' ; import { StoreModule } from '@ngrx/store' ; import * as fromRoot from '../reducers' ; import { HomeComponent } from './home.component' ; import { RouterStub } from '../../testing' ; import { SpeechService } from '../services/speech.service' ; import { SpeechComponent } from '../speech/speech.component' ; @ Component ( { selector : 'app-footer' , template : '' } ) class FooterStubComponent { } @ Component ( { selector : 'app-lazy-img' , template : '' } ) class LazyImgStubComponent { @ Input ( ) src : string ; @ Input ( ) width : number ; @ Input ( ) height : number ; @ Input ( ) alt : string ; @ Input ( ) showError = true ; @ Output ( ) load : EventEmitter < boolean > = new EventEmitter < boolean > ( ) ; } @ Component ( { selector : 'service-box' , template : '' } ) class ServiceBoxStubComponent { } describe ( 'Component: Home' , ( ) => { beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ RouterTestingModule , ReactiveFormsModule , StoreModule . forRoot ( fromRoot . reducers ) ] , declarations : [ HomeComponent , FooterStubComponent , LazyImgStubComponent , ServiceBoxStubComponent , SpeechComponent ] , providers : [ { provide : Router , useClass : RouterStub } , { provide : Title , useClass : Title } , { provide : SpeechService , useClass : SpeechService } ] } ) ; } ) ; it ( 'should create an instance' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; const component = fixture . debugElement . componentInstance ; expect ( component ) . toBeTruthy ( ) ; } ) ) ; it ( 'should have logo with correct alt text property' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; const image = compiled . querySelector ( 'app-lazy-img' ) ; expect ( image ) . toBeTruthy ( ) ; expect ( image . getAttribute ( 'alt' ) ) . toBe ( 'loklak Search - Distributed Open Source Search for Twitter and Social Media with Peer to Peer Technology' ) ; } ) ) ; it ( 'should have "_queryControl" property.' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; expect ( component . _queryControl ) . toBeTruthy ( ) ; } ) ) ; it ( 'should have an input element for search inputs' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; expect ( compiled . querySelector ( 'div.wrapper div.search-form input#search' ) ) . toBeTruthy ( ) ; } ) ) ; it ( 'should dispatch Input Value Action for getting top hashtags' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; const query$ = component . store . select ( fromRoot . getQuery ) ; let displayString ; const subscription = query$ . subscribe ( query => displayString = query . displayString ) ; expect ( displayString ) . toBe ( 'since:day' ) ; subscription . unsubscribe ( ) ; } ) ) ; it ( 'should focus the input search element on initialization' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; const inputElement = compiled . querySelector ( 'div.wrapper div.search-form input#search' ) ; expect ( document . activeElement ) . toBe ( inputElement ) ; } ) ) ; it ( 'should dispatch "SearchAction" when value of _queryControl changes' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; const value = 'since:day' ; const query$ = component . store . select ( fromRoot . getQuery ) ; let displayString ; const subscription = query$ . subscribe ( query => displayString = query . displayString ) ; component . _queryControl . setValue ( value ) ; expect ( displayString ) . toBe ( value ) ; subscription . unsubscribe ( ) ; } ) ) ; it ( 'should have _queryControl having the control of input field' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; let inputElement = compiled . querySelector ( 'div.wrapper div.search-form input#search' ) ; expect ( component . _queryControl . value ) . toBeFalsy ( ) ; expect ( inputElement . value ) . toBeFalsy ( ) ; component . _queryControl . setValue ( 'a' ) ; fixture . detectChanges ( ) ; inputElement = compiled . querySelector ( 'div.wrapper div.search-form input#search' ) ; expect ( inputElement . value ) . toBe ( 'a' ) ; compiled . querySelector ( 'div.wrapper div.search-form input#search' ) . value = 'a' ; fixture . detectChanges ( ) ; expect ( component . _queryControl . value ) . toBe ( 'a' ) ; } ) ) ; it ( 'should have an app-footer element' , async ( ( ) => { const fixture = TestBed . createComponent ( HomeComponent ) ; fixture . detectChanges ( ) ; const component = fixture . debugElement . componentInstance ; const compiled = fixture . debugElement . nativeElement ; expect ( compiled . querySelector ( 'app-footer' ) ) . toBeTruthy ( ) ; } ) ) ; } ) ;