javascript - 让 AngularJS + Angular AMD + RequireJS 与 Karma 和 Jasmine 一起使用时出错

Question

我正在尝试为我创建的 AngularJS +Angular AMD 和 RequireJS 应用程序添加基于 Karma 和 Jasmine+Require Js 的单元测试支持。我已经为此绞尽脑汁两天了，但距离达成交易还差得很远。

我不断收到错误:

INFO [karma]: Karma v0.12.21 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Mac OS X 10.9.4)]: Connected on socket 8oFHaa2hqJPs0ecgIXCa with id 31963369
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR: 'There is no timestamp for     ../www/scripts/specs/UserControllerTest.js!'

WARN [web-server]: 404: /www/scripts/specs/UserControllerTest.js
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR
  Uncaught Error: Script error for: specs/UserControllerTest
  http://requirejs.org/docs/errors.html#scripterror
  at /usr/local/lib/node_modules/requirejs/require.js:141

我的代码如下:

1. Karma 配置文件:

   // Karma configuration
   // Generated on Fri Aug 15 2014 20:49:40 GMT+1000 (EST)
   
   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: [
    'test-main.js',
    {pattern: 'specs/*.js', included: true}
   ],
   
   
   // 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 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
    });
   };
   

2. 我的 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: '../www/scripts',
   
      // alias libraries paths
            paths: {
                'angular': '../libs/angular',
                'angular-route': '../libs/angular-route',
                'angular-animate':'../libs/angular-animate',
                'angular-mocks':'../libs/angular-mocks',
                'angularAMD': '../libs/angularAMD.min',
                'Framework7':'../libs/framework7',
                'UserController':'controller/UserCtrl',
                'WebCallManager':'services/WebCallManager'
            },
   
            // Add angular modules that does not support AMD out of the box, put it in a shim
            shim: { 
                'angularAMD': ['angular'],
                'angular-route': ['angular'],
                'angular-animate':['angular'],
                'angular-mocks':['angular'],
                'Framework7':{exports: 'Framework7'}
            },
   
            //kick start application
            //deps: ['app'],
   
      // dynamically load all test files
      deps: allTestFiles,
   
      // we have to kickoff jasmine, as it is asynchronous
      callback: window.__karma__.start
    });
   

3. 我的单元测试是:

        describe('UserController', function () {
   
        var scope,controller;
   
        //mock Application to allow us to inject our own dependencies
        beforeEach(angular.mock.module('app'));
   
   
        //mock the controller for the same reason and include $rootScope and $controller
        beforeEach(angular.mock.inject(function($rootScope, $controller) {
            //create an empty scope
            scope = $rootScope.$new();
            //declare the controller and inject our empty scope
            $controller('UserController', {$scope: scope});
   
          }));
   
   
   
        it('checks the controller name', function () {
            expect(scope.name).toBe('Superhero');
        });        
    });
   

我已将项目的所有代码上传到链接here 。任何可以帮助我解决这个问题的人都将受到高度赞赏。我认为 In 对此已经束手无策了。

Answer 1

marcoseu 是对的，There is no timestamp for... 错误意味着 karma 无法找到该文件，但还有更多。

我建议将 karma 的基本路径作为您的项目根目录。这避免了 Karma 将文件路径设置为绝对路径而不是相对路径，从而使事情变得更简单并避免路径引用问题(至少在我的 Windows 操作系统上)。

你的测试应该是一个require模块(即使用define)，这样它就可以确保它需要的对象已完全加载。请参阅 http://karma-runner.github.io/0.12/plus/requirejs.html 中的示例测试

karma.config.js
基本路径:“../”，
文件:[
'测试/测试-main.js',
{模式:'test/specs/*.js'，包含:false}，
{模式: 'www/**/*.js', 包含: false},
],


现在您的文件都由 Karma 在/base 下提供服务。

test-main.js
需要.config({
baseUrl: "/base/www/scripts",


调试

但最重要的是您可以调试所有这些。运行Karma，切换到Karma创建的chrome实例，点击调试按钮，打开chrome开发者工具。检查控制台和源文件。尤其是 debug.html 的源代码，因为它在底部包含所有 karma 服务文件的定义。

您还可以设置断点，然后刷新页面以观察正在执行的测试。您将能够亲自了解为什么会出现测试错误。获胜。