Question

我已经创建了一个写你好的简单测试应用程序。

申请表是： boot.js

   require.config({
  appDir: '',
  baseUrl: '',
  paths: {
    angular: 'app/bower_components/angular/angular',
    Controller: 'app/js/Controller'
  },
  shim: {
    'angular': {'exports': 'angular'}
  },
  config: {
  },
  priority: [
    "angular"
  ]
});

require(['app/js/Module'], function()
{
  console.log("Loaded!");
});

Module.js：

(function(define) {
  "use strict";

  define(['angular', 'Controller'],
          function(angular, NccController) {
            var app, appName = 'myApp';
            app = angular
                    .module(appName, [])
                    .controller('Controller', NccController);
            angular.bootstrap(document.getElementsByTagName("body")[0], [appName]);
            return app;
          });
}(define));

Controller.js

(function(define) {
  "use strict";
  define([], function()
  {
    var NccController = function($scope)
    {
      $scope.message = "ciao";           //data to graph


    };
    return NccController;
  });
}(define));

karma.conf.js的内容是：

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: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
      {pattern: 'public_html/app/bower_components/angular/angular.js', included: false}

      'test-main.js',

      {pattern: 'public_html/app/js/*.js', included: false},
      {pattern: 'public_html/app/test/**/*Spec.js', included: false},
    ],


    // list of files to exclude
    exclude: [
      'public_html/app/js/boot.js'
    ],


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


    // 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
  });
};

test-main.js是

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',
  paths: {
        'angular': 'public_html/app/bower_components/angular/angular',
        'Module': 'public_html/app/js/Module',
        'Controller': 'public_html/app/js/Controller',
    },

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

MainSpec.js是：

define(['Module','Controller'], function(angular,Module,Controller) {

  describe('Controller', function(){

  beforeEach(module('myApp'));

  it('should print hello', inject(function($controller) {
    var scope = {},
        ctrl = $controller('Controller', {$scope:scope});

    expect(scope.message).toBe('ciao');
  }));

});

});

但是当我运行测试时，我获得了：

/usr/local/lib/node_modules/karma/bin/karma start
INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Mac OS X 10.8.5)]: Connected on socket 14waTQA-kAa0VgYpvBBk with id 39770086
Chrome 36.0.1985 (Mac OS X 10.8.5) ERROR
  Uncaught TypeError: Cannot read property 'module' of undefined
  at /Users/daniele/Desktop/JARK/public_html/app/js/Module.js:8

出了什么问题???? 非常感谢你。

Answer 1

伟大的tbranyen，经过2天的配置，你已经解决了我的大问题。我在这里发布所有代码，因为我认为有很多人想要使用angular / karma / RequireJs但是设置所有代码都很困难。所以boot.js，Module.js和controller.js是相同的文件：

karma.conf.js是：

// Karma configuration
// Generated on Sat Jul 26 2014 18:36:34 GMT+0200 (CEST)

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: ['jasmine', 'requirejs'],



    // list of files / patterns to load in the browser
    files: [
      {pattern: 'public_html/app/bower_components/angular/angular.js', included: false},
      {pattern: 'public_html/app/bower_components/angular-mocks/angular-mocks.js', included: false},
      {pattern: 'public_html/app/js/*.js', included: false},
      {pattern: 'public_html/app/test/**/*Spec.js', included: false},
      'test-main.js',
    ],


    // list of files to exclude
    exclude: [
      'public_html/app/js/boot.js'
    ],


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


    // 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
  });
};

test.main.js是：

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: window.__karma__ ? "/base/" : "/",
  paths: {
        'angular': 'public_html/app/bower_components/angular/angular',
        'angular-mocks': 'public_html/app/bower_components/angular-mocks/angular-mocks',
        'Module': 'public_html/app/js/Module',
        'Controller': 'public_html/app/js/Controller',
    },
    shim: {
    'angular': {'exports': 'angular'},
    'angular-mocks': ['angular']
  },
});

require(['angular-mocks'], function() {
  require(allTestFiles, window.__karma__.start);
});

和MainSpec.js是：

define(['angular','angular-mocks','Module','Controller'], function(angular,mocks,Module,Controller) {

  describe('Controller', function(){

  beforeEach(module('myApp'));

  it('should print hello', inject(function($controller) {
    var scope = {},
        ctrl = $controller('Controller', {$scope:scope});

    expect(scope.message).toBe('ciao');
  }));

});

});

我希望能帮助那些想要使用它的人

Answer 2

Karma提供/base/根路径下的文件，而不是/。您需要将RequireJS配置中的baseUrl属性更改为baseUrl: "/base/"。

有条件地处理这种情况的一种简单方法是：

baseUrl: window.__karma__ ? "/base/" : "/"

编辑：

我对上述内容不正确，您已正确配置。我唯一的猜测是deps在配置完成之前加载测试。虽然你已经提到Angular加载200 OK。我在这里的建议是尝试从deps中提取测试加载，而是中断配置并加载到两个不同的操作中。

require.config({
  "paths": { "angular": "<path/to/angular>" }
});

require(allTestFiles, function() {
  window.__karma__.start();
});

我还会从业力需求配置中删除callback。

编辑2：

另一个建议是共享您的主应用程序配置，这样您就不必再次声明路径。这看起来如下：

https://gist.github.com/tbranyen/e37a7d888f7f90c25e63#file-config-js-L27-L28

编辑3（希望最后）：

调试项目后，错误最终成为test-main.js文件中缺少的Angular shim配置。

Answer 3

看看这个使用requirejs和karma作为角度js的项目。尝试并按照设置进行操作。 https://github.com/adikari/angular-seed

角度 - requireJs - 业力

3 个答案: