Why am I receiving 404 from the Karma web server?

Question

I'm currently trying to set up a demo project using Node / AngularJs / JSPM with the ES6 Babel and Karma transporter.

The working part is working. I need to improve it later, but the first "world hello" from angular works.

I want to add Karma to run unit tests for an angular application. But I get a 404 warning for jspm_packagessee screenshot below.

My test does not work because it will always fail. My test file looks like this (without angular).

// HomeController.spec.js
import 'angular-mocks';

describe('Test suite for HomeController', function() {

    it('dummy test', function() {
        expect(true).toBe(true); // will not fail
    });
});

Not sure what happened, and I tried a lot of things without success, maybe I did something wrong. But here is what I tried in Karma configuration:

• Tried a lot of different path settings, because I think this is a path problem
• Used proxies
• Browserify Bablify
• JSPM

, , bitbucket.

:

:

Karma:

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

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',


// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jspm', 'jasmine'],


// list of files / patterns to load in the browser
files: [
  //'client/test-unit/**/*.test.js'
],

jspm: {
  paths: {
    // '*': 'client/app/**/*.js'
  },
  // Edit this to your needs
  // config: 'client/app/jspm.config.js',
  // Edit this to your needs
  loadFiles: ['client/test-unit/**/*.spec.js'],
  serveFiles: ['client/app/**/*.js', 'client/app/**/*.css', 'client/app/**/*.html']
},

proxies:  {
  // '/assets/jspm_packages/': '/client/app/assets/jspm_packages/'
},

plugins:[
  'karma-jasmine',
  'karma-coverage',
  'karma-jspm',
  'karma-chrome-launcher'
],

// list of files to exclude
exclude: [
],


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
//  'client/app/**/*.js': ['browserify'],
//  'client/test-unit/**/*.js': ['browserify']
},

/*browserify: {
  debug: true,
  transform: [ 'babelify' ]
},*/
// babelPreprocessor: {
//   options: {
//     sourceMap: 'inline'
//   },
//   filename: function (file) {
//     return file.originalPath.replace(/\.js$/, '.es5.js');
//   },
//   sourceFileName: function (file) {
//     return file.originalPath;
//   }
// },


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


// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors: true,


// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,


// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],


// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
 singleRun: false
 });
};

Answer 1

, .

, . , logLevel: config.LOG_DEBUG , .

, . , .

packages jspm , .

, , . karma.config:

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '.',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jspm', 'jasmine'],


    // list of files / patterns to load in the browser
    files: [
      //'client/test-unit/**/*.test.js'
    ],

    proxies:  {
      '/base/app/': '/base/client/app/',
      '/base/assets/jspm_packages/': '/base/client/app/assets/jspm_packages/'
    },

    jspm: {
      // Edit this to your needs
      config: 'client/app/jspm.config.js',
      // Edit this to your needs
      loadFiles: ['client/test-unit/**/*.spec.js'],
      serveFiles: ['client/app/**/*.js'],
      packages: "client/app/assets/jspm_packages/"
    },


    plugins:[
      'karma-jasmine',
      'karma-coverage',
      'karma-jspm',
      'karma-chrome-launcher'
    ],

    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor

    preprocessors: {
      'test-unit/**/*.js': ['babel', 'coverage']
    //  'client/app/**/*.js': ['browserify'],
    //  'client/test-unit/**/*.js': ['browserify']
    },

    /*browserify: {
      debug: true,
      transform: [ 'babelify' ]
    },*/
    // babelPreprocessor: {
    //   options: {
    //     sourceMap: 'inline'
    //   },
    //   filename: function (file) {
    //     return file.originalPath.replace(/\.js$/, '.es5.js');
    //   },
    //   sourceFileName: function (file) {
    //     return file.originalPath;
    //   }
    // },


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


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG, //config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

Hide result

:

// HomeController.spec.js

import 'app/app';
import 'angular-mocks';

describe('Test suite for HomeController', function() {

	// var homeController;

	beforeEach(function() {
		module('myApp');
		
		// inject(function($controller) {
		// 	console.log('inject called', $controller);
		// 	//controller = $controller;	
		// 	homeController = $controller('homeController');
		// });
	});

	it('should say "Hello World"', inject(function($controller) {

			var homeController = $controller('homeController');

			// console.log(homeController, angular.mocks);
			expect(homeController.hello).toEqual('Hello world from ES6 HomeController.'); // will not fail
		})
	);
});

Hide result