Core: Cannot test angular-2-quickstart project with ng2-translate

[egidijusj]

Hi there, I have difficulties setting up tests with ng2-translate. I'm using Angular 2 quickstart project with System.js. I have TranslateService dependency in my AppComponent:

import {Component} from 'angular2/core';
import {TranslateService} from 'ng2-translate/ng2-translate'

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {  
    constructor(translateService: TranslateService) {
        translateService.use('en');
    }
}

I have fixed ng2-translate path in index.html:

  System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          'ng2-translate': {'defaultExtension': 'js'}
        },
        map: {
          'ng2-translate': 'node_modules/ng2-translate'
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

I tried to recreate this config in karma-test-shim.js:

// Configure systemjs packages to use the .js extension for imports from the app folder
var packages = {};
packages[appPackage] = {
    defaultExtension: false,
    format: 'register',
    map: Object.keys(window.__karma__.files)
      .filter(onlyAppFiles)
      // Create local module name mapping to karma file path for app files
      // with karma's fingerprint in query string, e.g.:
      // './hero.service': '/base/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
      .reduce(function (pathsMapping, appPath) {
        var moduleName = appPath.replace(appRootRe, './').replace(/\.js$/, '');
        pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
        return pathsMapping;
      }, {})
  }

packages['ng2-translate'] = 'node_modules/ng2-translate'

System.config({ packages: packages, map: { 'ng2-translate': 'node_modules/ng2-translate' } });

When I run karma, I get following error:

02 05 2016 13:44:40.416:WARN [web-server]: 404: /node_modules/ng2-translate/ng2-translate.js
[1] Missing error handler on `socket`.
[1] TypeError: Object [object Object] has no method 'replace'

Any help would be appreciated!

[simon-sharp]

+1

[egidijusj]

I've got it!

Firstly, I did not properly define ng2-translate paths in karma.config.js. I changed it from

node_modules/ng2-translate/bundles/ng2-translate.js

to

node_modules/ng2-translate/**/*.js

And I forgot to add karma's /base prefix to SystemJs config in karma-test-shim.js:

System.config({ packages: packages, map: {'ng2-translate': '/base/node_modules/ng2-translate'} });

[Emerceen]

@egidijusj

I have the same problem with angular 2.0.2, can you show how you configure npm packages to test?

[egidijusj]

Sorry man, I've did this long before 2.0.2 and have scraped the project since then.

[joaopgrassi]

@egidijusj I followed @egidijusj advice and it worked. I was getting the exact same error when running my gulp build or tests. I think my problem was that in karma-test.shim.js I missed the /base in the path.

Basically:

systemjs.config:

map: {
    application: 'src/app',

    //..more stuff here

    'ng2-translate': 'node_modules/ng2-translate'
},
packages: {
    ...

    'ng2-translate': {
        defaultExtension: 'js'
    }
}

In karma.config.js inside Files[]:

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

And in karma-test.shim.js

System.config({
    baseURL: '/base',

    //more stuff here

    map: {
        //more stuff here
        'ng2-translate': '/base/node_modules/ng2-translate'
    },
});

[KDusak]

@Emerceen Did you solve the problem? I am facing something similar and I am looking for some karma configuration example. I am new to Angular2 and Karma and other stuff and internet is full of weird examples. I will apreciate any help, thank you

[ocombe]

The karma setup is really complicated right now... you should always take this app as a reference: https://github.com/juliemr/ng2-test-seed
@juliemr is the lead dev on tests for angular 1 & 2

[Emerceen]

@KDusak I didn't solve problem. I have no idea how configure karma for test with ng2-translate. Every attempt did not work.

[Emerceen]

@KDusak

I was able to configure karma.

My karma.conf.js files array:

var files = [ gulpConfig.tmpTest + 'test-helpers/global/**/*.js', gulpConfig.src + 'systemjs.conf.js', 'config/test/karma-test-shim.js', createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }), createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }), createFilePattern(gulpConfig.app + '**/*.html', { included: false }), createFilePattern(gulpConfig.app + '**/*.css', { included: false }), createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }), createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false }), createFilePattern('node_modules/ng2-translate/**/*.js', { included: false, watched: false })

Import in component:

import { TranslateService, TranslateLoader } from 'ng2-translate';