无法找到管道'translate'，angular2组件测试

Question

我正在使用angular2进行组件测试。 在我的html模板中，我使用了翻译管道。 这是测试的代码：

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

它的NG2-翻译github.com/ocombe/ng2-translate

您需要与库模块，就像你配置与实际应用库配置TestBed。看着那documentation，它显示了通过导入模块

imports: [ 
    TranslateModule.forRoot() 
] 

配置，所以你应该做同样的TestBed配置

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

这就是TestBed.configureTestingModule是：配置模块为测试环境。

Answer 2

随着最新角4兼容ngx-translate您需要直接落实到组件这要考验：

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 
    ...