Core: Template parse errors: The pipe "translate" could not be found

[protagonist51]

Karma Jasmine unit testing causing Template parse errors: The pipe "translate" could not be found

Current behavior
I'm trying to unit test the simple ng2-translation application. Karma Jasmine unit test spec is not recognizing HTML tags, for example

{{'PAGE.HELLO' | translate}}

I have written my piece of spec like this

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ SidenavComponent ], // declare the test component
        providers: [
            TranslateService,

           { provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, 'public/assets/i18n', '.json'), deps:[Http]},
]
});
});

I'm not sure that I'm providing the JSON files in proper format like above. How to resolve this pipe error?
Ocombe- Please provide sample unit tests for the examples you have provided in the git

Expected/desired behavior

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:btpW3l0jr5beJVjohy1Q).

What is the expected behavior?

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ng2-translate version: x.x.x

• Angular version: 2.1.0-rc.X

• Browser: [IE 11 ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[ocombe]

Hi,
you just need to import the module into your testbed (like you would for any other module, like HttpModule or RouterModule):

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'public/assets/i18n', '.json'),
            deps: [Http]
        })],
        declarations: [SidenavComponent] // declare the test component
    });
});

[protagonist51]

Thank you Ocombe for your quick response. I added those imports and pipe error got resolved. But I see that content of

{{ 'PAGE.HELLO' | translate }}

in the spec

de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
console.log(el.textContent);

is empty. i.e ' '. Can you please suggest me something?

[ocombe]

If you use the TranslateStaticLoader then you must resolve the requests before the content can change: https://github.com/ocombe/ng2-translate/blob/master/tests/translate.service.spec.ts#L62

But unless you're trying to test that translations work, you should probably mock the TranslateLoader with a custom loader that doesn't use http requests, that will make all you test much easier https://github.com/ocombe/ng2-translate/blob/master/tests/translate.service.spec.ts#L570-L594

[protagonist51]

I tried with that method but I'm getting TypeError: undefined is not an object (evaluating 'connection.mockRespond') in config/karma-test-shim.js error
This is my code

const mockBackendResponse = (connection: MockConnection, response: string) => {
    connection.mockRespond(new Response(new ResponseOptions({body: response})));
};
describe('SideNav Component Test', () => {
    let translate: TranslateService
    let connection: MockConnection;

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/public/assets/i18n', '.json'),
            deps: [Http]
        }),
            HttpModule
        ],
        declarations: [ SidenavComponent ], // declare the test component
        providers: [
            TranslateService,
        ],
    });
});
it('should be able to get translations', () => {
        mockBackendResponse(connection, '{"TEST": "Allgemein"}');
        translate.get('TEST2').subscribe((res: string) => {
            expect(res).toEqual('Allgemein');
        });
    });
});

[ocombe]

You forgot to create the connection in your beforeEach: https://github.com/ocombe/ng2-translate/blob/master/tests/translate.service.spec.ts#L37

// sets the connection when someone tries to access the backend with an xhr request
backend.connections.subscribe((c: MockConnection) => connection = c);

[ocombe]

Closing this, let me know if you need it to be reopened.

[TeodorKolev]

Not working!. I am using this plugin, and when I add 'Something' | translate in template of plugin not working

[saiy2k]

@ocombe Can you please tell how to fix this issue Pipe translate could not be found in [email protected]?

[hectorggp]

Please, answer the question set in the tittle for reference

[matheusmurta]

For problemns with Jasmine test.

Its works for me guys 😉

Add this on MyComponent..component.spec.ts
import { TranslateModule } from "@ngx-translate/core";

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmailMessageComponent ],
imports: [
TranslateModule.forRoot(),
]
})
.compileComponents();
}));