testing ng2-translate in view

app.component.spec.ts

/* tslint:disable:no-unused-variable */
import { AppComponent } from './app.component';

import { TestBed } from '@angular/core/testing';

import { By }             from '@angular/platform-browser';

import {TranslateService, TranslateModule} from "ng2-translate/ng2-translate";


////////  SPECS  /////////////

/// Delete this
describe('Smoke test', () => {
  it('should run a passing test', () => {
    expect(true).toEqual(true, 'should pass');
  });
});

describe('AppComponent with TCB', function () {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [TranslateModule.forRoot()],
      declarations: [AppComponent], providers: [TranslateService]
    });
  });

  it('should instantiate component', () => {
    let fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
  });

  it('should translate the view well', () => {
    let fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
    let h1 = fixture.debugElement.query(By.css('h1')).nativeElement;
    expect(h1.innerText).toEqual('hello world');
  });
});

app.component.ts

import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate/ng2-translate';

@Component({
    selector: 'my-app',
    template: `
    <h1>{{ 'HELLO' | translate:{value: param} }}</h1>
  `
})
export class AppComponent {
  param: string = "world";
  constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

    translate.setTranslation('en', {
      "HELLO": "hello {{value}}"
    });

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
  }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {TranslateModule} from 'ng2-translate/ng2-translate';


import { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule, TranslateModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);