パイプ 'translate'が見つかりませんでした、angular2コンポーネントテスト

Question

私はangular2でコンポーネントテストを行っています。私のHTMLテンプレートの 私はtranslateパイプを使用します。 これはテストのコードです：

import { ComponentFixture, TestBed ,getTestBed} from '@angular/core/testing'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { RightComponent } from './right.component'; 
import {TranslateService} from 'ng2-translate/ng2-translate'; 
import {Injector} from "@angular/core"; 
let comp: RightComponent; 
let fixture: ComponentFixture<RightComponent>; 
let el:  DebugElement; 
let translate: TranslateService; 
let injector: Injector; 

describe('testComponent',() => { 

beforeEach(() => { 
TestBed.configureTestingModule({ 
    declarations: [ RightComponent ] 
}); 

injector = getTestBed(); 
translate = injector.get(TranslateService); 
fixture = TestBed.createComponent(RightComponent); 

comp = fixture.componentInstance; // BannerComponent test instance 

// get title DebugElement by element name 
el = fixture.debugElement.query(By.css('h2')); 
}); 
it('should display original title',() => { 
fixture.detectChanges(); // trigger data binding 
expect(el.nativeElement.textContent).toContain('Liste des droits'); 
}); 

}); 

私が翻訳パイプが知られていない、このエラーを得た：

Error: Template parse errors: 
The pipe 'translate' could not be found ("<h2>[ERROR ->]{{'RIGHT_TITLE' |  translate}}</h2> 
<div class="table-responsive"> 
<table id="rightTableId" clas"): RightComponent@0:4 
The pipe 'translate' could not be found (" 
    <table id="rightTableId" class="table table-striped"> 
    <tr> 
     <th>[ERROR ->]{{'NAME_LABEL' | translate}}</th> 
    </tr> 
    <tr *ngFor="let right of rights"> 
"): RightComponent@4:16 
    The pipe 'translate' could not be found (" 
    </tr> 
    <tr *ngFor="let right of rights"> 
     <td>[ERROR ->]{{right.name | translate}}</td> 
    </tr> 
</table> 

我々はこの問題を解決する方法は？

ありがとうございました。

Answer 1

それはあなたがあなたの本当のアプリケーションとライブラリを設定するのと同じようにライブラリモジュールでTestBedを設定する必要がgithub.com/ocombe/ng2-translate

NG2は、翻訳します。モジュールを構成するには：そしてdocumentationを見て、それはあなたがTestBed構成で

TestBed.configureTestingModule({ 
    declarations: [ RightComponent ], 
    imports: [TranslateModule.forRoot()] 
}); 

を同じことを行う必要がありますので、これがためにTestBed.configureTestingModuleが何であるかである

imports: [ 
    TranslateModule.forRoot() 
] 

をモジュールをインポートすることで、それを構成する示しテスト環境用です。あなたが直接あなたがテストしたいコンポーネントにこれを実装する必要があり、最新の角度4互換ngx-translateで

Answer 2

：

import {TranslateHttpLoader} from "@ngx-translate/http-loader"; 
import {Http, HttpModule} from "@angular/http"; 
import { 
    MissingTranslationHandler, 
    TranslateLoader, 
    TranslateModule, 
    TranslateService 
} from "@ngx-translate/core"; 

... 

export function HttpLoaderFactory(http: Http) { 
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json"); 
} 

    ... 

    imports: [ 
       TranslateModule.forRoot({ 
        loader: { 
         provide: TranslateLoader, 
         useFactory: HttpLoaderFactory, 
         deps: [Http] 
        } 
       }) 
      ], 
    ... 

    providers: [ 
       TranslateService 
    ...