ng2-translate - Die Pipe 'translate' konnte nicht gefunden werden

Question

Ich repariere meine Karma-Konfiguration, um Tests für Angular2 - rc 1 Version durchzuführen. Ich kann die Tests ausführen, aber sie schlagen fehl, wenn ich eine Übersetzungsleitung innerhalb des HTML habe. (Die Konfiguration konnte ich es ich es aus an die Arbeit [hier] [1])

mein karma.conf

module.exports = function(config) { 
    config.set({ 

    basePath: '', 

    frameworks: ['jasmine'], 

    files: [ 
     // Polyfills. 
     'node_modules/es6-shim/es6-shim.js', 

     'node_modules/reflect-metadata/Reflect.js', 

     // System.js for module loading 
     'node_modules/systemjs/dist/system-polyfills.js', 
     'node_modules/systemjs/dist/system.src.js', 

     // Zone.js dependencies 
     'node_modules/zone.js/dist/zone.js', 
     'node_modules/zone.js/dist/jasmine-patch.js', 
     'node_modules/zone.js/dist/async-test.js', 
     'node_modules/zone.js/dist/fake-async-test.js', 

     // RxJs. 
     { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 
     { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 
     { pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false}, 

     {pattern: 'karma-test-shim.js', included: true, watched: true}, 

     // paths loaded via module imports 
     // Angular itself 
     // {pattern: 'node_modules/@angular/router-deprecated/index.js', included: false, watched: true}, 
     {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, 
     // {pattern: 'node_modules/@angular2-material/**/*.js', included: false, watched: true}, 
     {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, 

     // Our built application code 
     {pattern: 'dist/**/*.js', included: false, watched: true}, 

     // paths loaded via Angular's component compiler 
     // (these paths need to be rewritten, see proxies section) 
     {pattern: 'dist/**/*.html', included: false, watched: true}, 
     {pattern: 'dist/**/*.css', included: false, watched: true}, 

     {pattern: 'dist/assets/images/**/*.jpg', watched: false, included: false, served: true}, 
     {pattern: 'dist/assets/images/**/*.png', watched: false, included: false, served: true}, 
     {pattern: 'dist/assets/i18n/**/*.json', watched: false, included: false, served: true}, 
     {pattern: 'dist/local_config.json', watched: false, included: false, served: true}, 
     // paths to support debugging with source maps in dev tools 
     // {pattern: 'src/**/*.ts', included: false, watched: true}, 
     //{pattern: 'dist/**/*.js.map', included: false, watched: false} 
    ], 

    // proxied base paths 
    proxies: { 
     // required for component assests fetched by Angular's compiler 
     "/app/": "/base/dist/app/", 
     "/assets/": "/base/dist/assets/", 
     "/i18n/": "/base/dist/assets/i18n/" 
    }, 

    // list of files to exclude 
    exclude: [ 
     'node_modules/@angular/**/*spec.js' 
    ], 

    // // preprocess matching files before serving them to the browser 
    // // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
     'dist/**/!(*spec).js': ['coverage'] 
    }, 

    // test results reporter to use 
    // possible values: 'dots', 'progress' 
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter 

    coverageReporter: { 
     dir: 'coverage/', 
     reporters: [ 
      { type: 'text-summary' }, 
      { type: 'json', subdir: '.', file: 'coverage-final.json' }, 
      { type: 'html' } 
     ], 
     instrumenterOptions: { 
      istanbul: { noCompact: true } 
     } 
    }, 

    // reporters: ['progress', 'coverage'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }) 
} 

mein Karma-Test-shim.js

/*global jasmine, __karma__, window*/ 
Error.stackTraceLimit = Infinity; 
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 

__karma__.loaded = function() { 
}; 

var distPath = '/base/'; 
var appPath = distPath; 

function isJsFile(path) { 
    return path.slice(-3) == '.js'; 
} 

function isSpecFile(path) { 
    return path.slice(-8) == '.spec.js'; 
} 

function isAppFile(path) { 
    return isJsFile(path) && (path.substr(0, appPath.length) == appPath); 
} 

var allSpecFiles = Object.keys(window.__karma__.files) 
    .filter(isSpecFile) 
    .filter(isAppFile); 

// Load our SystemJS configuration. 
System.config({ 
    baseURL: distPath 
}); 

System.import('systemjs.config.test.js').then(function() { 
    // Load and configure the TestComponentBuilder. 
    return Promise.all([ 
    System.import('@angular/core/testing'), 
    System.import('@angular/platform-browser-dynamic/testing') 
    ]).then(function (providers) { 
    var testing = providers[0]; 
    var testingBrowser = providers[1]; 

    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 
     testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); 
    }); 
}).then(function() { 
    // Finally, load all spec files. 
    // This will run the tests directly. 
    return Promise.all(
    allSpecFiles.map(function (moduleName) { 
     return System.import(moduleName); 
    })); 
}).then(__karma__.start, __karma__.error); 


    [1]: http://stackoverflow.com/questions/37178267/angular2-rc1-karma-error-unable-to-find-angular-core-testing 

Einer meiner Tests:

...

import { TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate'; 
import { TranslationService } from '../../services/localization/translation.service'; 

... beschreiben ('Login Nachrichten',() => {

beforeEachProviders(() => [ 
     provide(CmsService, { useClass: MockCmsService }), 
     provide(Config, { useClass: MockConfig }), 
     ROUTER_PROVIDERS, 
     HTTP_PROVIDERS, 
     provide(Router, { useClass: MockRouter }), 
     TranslateService, 
     // provide(TranslateService, { useClass: MockTranslateService }), 
     // provide(TranslationService, { useClass: MockTranslationService }), 
     TranslationService, 
     SessionService, 
     provide(TranslateLoader, { 
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), 
      deps: [Http] 
     }), 
     ModuleLoaderService, 
     MyGlobals 
    ]); 

    beforeEach(() => { 
     Config.params = { 
      fleetVersionNumber: 'xyz' 
     }; 
    }); 

    fit('should display messgages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
     return tcb.createAsync(LoginMessages).then((componentFixture) => { 
      componentFixture.componentInstance.messages = MESSAGES; 
      let element = componentFixture.nativeElement; 
      componentFixture.detectChanges(); 
      expect(element.querySelectorAll('.msg-row').length).toBe(3); 

      expect(element.querySelectorAll('.msg-row')[0].querySelector('span').innerText).toBe('Plain bla bla'); 

....

Die Komponente html:

...

<div style="margin:0 5px 0 25px"><span [innerHTML]="msg.key | translate "></span></div> 

...

Der Fehler, den ich bekomme, wenn Karma läuft:

Die Pipe 'translate' konnte nicht gefunden werden ("class =" glyphicon glyphicon-info-zeichen msg-icon "> ] [innerHTML] =" msg.key | übersetzen "> "): LoginMessages @ 6: 47 Fehler: Template Fehler analysieren: ...

zu erwähnen, dass das übersetzt Rohr innerhalb der eigentlichen App funktioniert ok. Irgendwelche Ideen würden geschätzt!

Answer 1

Endlich fand ich die Antwort: Es war kein Karma-Config-Problem. das Rohr zu sehen, ich innerhalb der Komponente Um es im Test benötigt, um:

beforeEachProviders(() => [ 
    .... 
    provide(PLATFORM_PIPES, {useValue: TranslationPipe, multi: true}) 
    .... 
    ])