Jasmine和Karma with Backbone的问题

时间:2015-07-12 20:30:18

标签: javascript jquery backbone.js karma-jasmine

这是我第一次测试应用程序,这有点令人头疼。我已经建立了一个测试环境。我的测试文件夹中的茉莉花index.html如下所示:

的index.html

<!doctype html>
<html>
  <head>
    <title>Jasmine Spec Runner</title>
    <link rel="stylesheet" href="../bower_components/jasmine/lib/jasmine-core/jasmine.css">
  </head>
  <body>
    <script src="../bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
    <script src="../bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
    <script src="../bower_components/jasmine/lib/jasmine-core/boot.js"></script>

    <!-- include source files here... -->
    <script src="../public/js/main.js"></script>
    <script src="../public/js/AppView.js"></script>
    <script src="../public/js/FormLoanView.js"></script>
    <script src="../public/js/FormLoanModel.js"></script>
    <script src="../public/js/ResponseLoanModel.js"></script>
    <script src="../public/js/ResultLoanView.js"></script>

    <!-- include spec files here... -->
    <script src="spec/test.js"></script>
  </body>
</html>

test.js

(function () {
describe('Form Model', function() {

  describe('when instantiated', function() {

    it('should exhibit attributes', function() {
      var formModel = new FormLoanModel({});
      console.log(formModel)
      expect(formModel.get("Annual Income"))
        .toEqual("");
    });

  });

});
})();

打开我的index.html时,收到以下消息:

TypeError: undefined is not a function

所以看起来它正在运行我的测试。打开chrome开发人员工具后,我得到以下信息:

Uncaught ReferenceError: Backbone is not defined

所以我意识到jQuery和Backbone没有被加载到测试中。我开始了解到Karma帮助我们实现了很多自动化。使用Yeoman设置业力之后。我对我的karma.conf.js进行了编辑,现在看起来像这样:

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-07-12 using
// generator-karma 1.0.0

module.exports = function(config) {
  'use strict';

  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    // as well as any additional frameworks (requirejs/chai/sinon/...)
    frameworks: [
      "jasmine"
    ],

    // list of files / patterns to load in the browser
    files: [ "../lib/*.js","../public/js/*.js","./spec/*.js"
    ],

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

    // web server port
    port: 8080,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      "Chrome"
    ],

    // Which plugins to enable
    plugins: [
      "karma-phantomjs-launcher",
      "karma-jasmine"
    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

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

    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

我添加的文件是库,我的主干模块和我的Jasmine测试。键入karma start后,我在终端指示的本地服务器上获得以下成功屏幕:

Karma v0.12.37 - connected
Chrome 43.0.2357 (Mac OS X 10.10.2) is idle

所以最后在这一点上我希望刷新后index.html能正确运行我的测试,但事实并非如此。它仍然警告我,它缺乏对骨干和jQuery的了解。任何人都可以帮我弄明白我哪里错了吗?

文件结构

ROOT
-----lib
--------------backbone.js
--------------underscore.js
--------------jquery-1.11.3.js
-----public
--------------js
---------------------*backbone modules*
-----test
--------------spec
----------------------test.js
--------------index.html
--------------karma.conf.js

1 个答案:

答案 0 :(得分:0)

&#39; basePath&#39;和&#39;文件&#39;您的Karma配置的属性协同工作,以在测试环境的浏览器中提供必要的文件。

将从运行Karma的工作目录中评估基本路径,因此如果您在项目的根目录中运行它,那么&#39; ../ libs / * .js&#39;不太可能是你的bower_component javascript文件的匹配路径。

如果您的静态文件夹树没有在项目的根目录中启动,请确保&#39; basePath&#39;指向静态文件夹树的起始位置。

尝试../bower_components/**/*.js../**/*.js(文件blob模式样式)或尝试将单个条目添加到&#34;文件&#34;指向每个,即

'../bower_components/jquery/lib/jquery.min.js', '../bower_components/jquery/lib/backbone.min.js'

等,当然,使这些条目指向真实的位置。我猜测这个文件路径问题阻止了它们被发现,因此Karma的测试服务器没有将它们提供给浏览器。