Cannot load the injected service in test

Question

I have an "injectable" service which I would like to do a basic test for:

login.service.ts

import { Injectable } from 'angular2/core'; import { Http, Response } from 'angular2/http';

@Injectable()
export class LoginService {

    constructor(private http: Http) { }
    response: JSON;
    getPartners() {
        return this.http.get('http://bla/bla/partners')
                        .map((res: Response) => res.json());
    }
}

Now my test: login.service.spec.ts

import { it, iit, describe, expect, inject, injectAsync, beforeEachProviders, fakeAsync, tick } from 'angular2/testing';
import { provide } from 'angular2/core';
import { LoginService } from './login.service';



describe('login service', () => {
  beforeEachProviders(() => [LoginService])

  it('should get partners', inject([LoginService], (service) => {
    console.log('HERE ', service)
    expect(true).toBe(true);
    // todo expect(service.getPartners())...
  }));

I cannot go anywhere yet as I am getting a 404: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9876/base/dist/components/login/login.service I am probably missing something basic as I get this issue for any class I need to test BUT not for a interface.

My karma-test-shim.js:

// Tun on full stack traces in errors to help debugging
Error.stackTraceLimit = Infinity;


jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// // Cancel Karma's synchronous start,
// // we will call `__karma__.start()` later, once all the specs are loaded.
__karma__.loaded = function () { };


System.config({
    packages: {
        'base/src': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files).
                filter(onlyAppFiles).
                reduce(function createPathRecords(pathsMapping, appPath) {
                    // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
                    // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
                    var moduleName = appPath.replace(/^\/base\/src\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {})

        }
    }
});

System.import('angular2/src/platform/browser/browser_adapter').then(function (browser_adapter) {
    browser_adapter.BrowserDomAdapter.makeCurrent();
}).then(function () {
    return Promise.all(
        Object.keys(window.__karma__.files) // All files served by Karma.
            .filter(onlySpecFiles)
        // .map(filePath2moduleName)        // Normalize paths to module names.
            .map(function (moduleName) {
                // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec')
                return System.import(moduleName);
            }));
})
    .then(function () {
        __karma__.start();
    }, function (error) {
        __karma__.error(error.stack || error);
    });


function filePath2moduleName(filePath) {
    return filePath.
        replace(/^\//, '').              // remove / prefix
        replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
    return /^\/base\/src\/.*\.js$/.test(filePath)
}


function onlySpecFiles(path) {
    return /.spec\.js$/.test(path);
}

my karma.conf.js:

files: [
    // paths loaded by Karma
    { pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true },
    { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true },
    { pattern: 'node_modules/rxjs/bundles/rx.js', included: true, watched: true },
    { pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true },
    { pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true },
    { pattern: 'karma-test-shim.js', included: true, watched: true },
    { pattern: 'dist/components/matchers.js', included: true, watched: true },

    // paths loaded via module imports
    { pattern: 'dist/components/**/*.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/styles/*.css', included: false, watched: true },
    { pattern: 'dist/components/**/*.html', included: false, watched: true },
    { pattern: 'dist/components/**/*.css', included: false, watched: true },

    // paths to support debugging with source maps in dev tools
    { pattern: 'src/components/**/*.ts', included: false, watched: false },
    { pattern: 'dist/components/**/*.js.map', included: false, watched: false }
],

where dist is my build folder

Answer 1

I think that your configuration should the following in the karma-test-shim.js file:

System.config({
  packages: {
    'base/dist': { // <-------------
        defaultExtension: false,
        format: 'register',
        map: Object.keys(window.__karma__.files).
            filter(onlyAppFiles).
        (...)