The pipe 'translate' could not be found , angular2 component testing

user3518668 picture user3518668 · Sep 20, 2016 · Viewed 22.4k times · Source

I am working on component testing with angular2. in my html template i use the translate pipe. This is the code of the 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');
});

});

i got this error the the translate pipe is not known :

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>

How we resolve this problem ?

Thanks.

Answer

Paul Samsotha picture Paul Samsotha · Sep 20, 2016

it's the ng2-translate github.com/ocombe/ng2-translate

You need to configure the TestBed with the library module just like you would configure the library with your real application. And looking at the documentation, it shows configuring it by importing the module

imports: [
  TranslateModule.forRoot()
]

So you should do the same in the TestBed configuration

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

This is what the TestBed.configureTestingModule is for: to configure a module for the test environment.