Труба «перевести» не может быть найдена, тестирование компонентов angular2

Я работаю над тестированием компонентов с 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>

Как мы решаем эту проблему?

Спасибо.


angular angular-cli angular2-testing ng2-translate
person user3518668    schedule 20.09.2016    source источник
comment
это пользовательский канал или служба перевода angular2?   -  person micronyks    schedule 20.09.2016
comment
это ng2-translate github.com/ocombe/ng2-translate   -  person user3518668    schedule 20.09.2016

Ответы (2)


arrow_upward
38
arrow_downward

это ng2-translate github.com/ocombe/ng2-translate

Вам нужно настроить TestBed с библиотечным модулем точно так же, как вы настроили бы библиотеку с вашим реальным приложением. Глядя на документацию, он показывает, как настроить его, импортировав модуль

imports: [
  TranslateModule.forRoot()
]

Так что вы должны сделать то же самое в конфигурации TestBed

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

Для этого и предназначен TestBed.configureTestingModule: настроить модуль для тестовой среды.

person Paul Samsotha    schedule 20.09.2016
comment
Это убивало меня часами. Я пытался протестировать компонент, который использует канал перевода. Пробовал импортировать модуль без .forRoot(), но это не сработало. - person jpgrassi; 24.10.2016
comment
этот ответ привел меня к правильному ответу. Однако, импортируя мой PipesModule в набор тестов, я импортировал множество ненужных мне каналов, что замедляло выполнение теста. Импортируя только конкретный канал, который мне нужен, в раздел объявлений, я получил лучшее решение. Спасибо за руководство здесь. - person danday74; 20.01.2017

arrow_upward
6
arrow_downward

С последней версией, совместимой с 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
   ...
person Steve K    schedule 24.04.2017
comment
Это решение, которое я искал, но мне просто нужно было добавить { provide: Http, useValue: true }, к providers - person J.J. Bocanegra; 17.07.2017