让AngulaJS + Angular AMD + RequireJS与Karma和Jasmine一起工作时出错

Error In Getting AngulaJS + Angular AMD + RequireJS to Work with Karma and Jasmine

本文关键字:一起 Jasmine 工作 出错 Angular AngulaJS AMD RequireJS Karma      更新时间:2023-09-26

我正在尝试添加Karma &Jasmine+Require基于Js的单元测试支持AngularJS +Angular AMD &我已经创建的RequireJS应用程序。这两天来,我一直在为这件事绞尽脑汁,但还是一点也没有达成协议。

我一直得到错误:

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

我已经上传了我的项目的所有代码链接在这里。任何人谁可以帮助我这是高度赞赏。我想我已经忍无可忍了

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 basePath: "../", files: [ 'test/test-main.js', {pattern: 'test/specs/*.js', included: false}, {pattern: 'www/**/*.js', included: false}, ],

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

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

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

您还可以设置断点,然后刷新页面以观察正在执行的测试。您将能够自己看到为什么会出现测试错误。赢。

错误There is no timestamp for...意味着karma无法访问相关文件。您需要定义www目录,以便karma可以访问它。试试以下命令:

karma.config.js files: [ 'test-main.js', {pattern: './specs/*.js', included: true}, {pattern: '../../www/**/*.js', included: false} ],

查看angularAMD项目中的Karma .conf和Karma文档中的文件