web-dev-qa-db-fra.com

Le tube «translate» est introuvable, test des composants angular2

Je travaille sur le test de composants avec angular2. dans mon modèle html j'utilise le tube de traduction. Voici le code du test:

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');
});

});

j'ai eu cette erreur le tube de traduction n'est pas connu:

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>

Comment résoudre ce problème?

Merci.

angularangular-cliangular2-testingng2-translate
13
user3518668

c'est le ng2-translate github.com/ocombe/ng2-translate

Vous devez configurer le TestBed avec le module de bibliothèque comme vous le feriez pour la bibliothèque avec votre application réelle. Et en regardant le documentation , il montre la configuration en important le module

imports: [
  TranslateModule.forRoot()
]

Vous devriez donc faire de même dans la configuration TestBed

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

C'est ce que le TestBed.configureTestingModule est pour: configurer un module pour l'environnement de test.

20
Paul Samsotha

Avec la dernière Angular 4 compatible ngx-translate vous devez l'implémenter directement dans le composant que vous souhaitez tester:

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