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>
この問題の解決方法
ありがとう。
ng2-translate github.com/ocombe/ng2-translate
実際のアプリケーションでライブラリを構成するのと同じように、ライブラリモジュールでTestBed
を構成する必要があります。 documentation を見ると、モジュールをインポートして設定していることがわかります
imports: [
TranslateModule.forRoot()
]
したがって、TestBed
構成でも同じことを行う必要があります
TestBed.configureTestingModule({
declarations: [ RightComponent ],
imports: [TranslateModule.forRoot()]
});
これはTestBed.configureTestingModule
は、テスト環境用のモジュールを構成するためのものです。
最新のAngular 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
...