首页 文章

如何连接Backbone,Mocha,Chai,Require.js和Sinon

提问于
浏览
0

我目前正在尝试基于Backbone为我的应用设置测试环境 . 我想单元测试一些功能 . 但我必须承认我在连接不同组件时遇到问题 . 我正在使用Backbone,Mocha,Chai,expect.js,require.js和Sinon . 该应用程序基本上是与Yeoman Build 的 . 我现在 Build 的是(根据我非常喜欢的这个教程:https://puigcerber.com/2013/12/23/using-grunt-to-run-mocha-tests-with-backbone-js-and-requirejs/

在我的根目录中,我有一个名为test的文件夹,其中包含:

我的index.html:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Mocha Spec Runner</title>
    <link rel="stylesheet"     href="../app/ressources/bower_components/mocha/mocha.css">
</head>
<body>
<div id="mocha"> </div>

<script src="../node_modules/sinon-1.17.3.js"></script>
<script src="../app/ressources/bower_components/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="../app/ressources/bower_components/chai/chai.js"></script>
<script>var expect = chai.expect</script>

<script data-main="spec/runner" src="../app/ressources/bower_components/requirejs/require.js"></script>
</body>
</html>

和一个名为spec的文件夹,包括:

我的runner.js:

'use strict';
require.config({
baseUrl: '../app/',
paths: {
    jquery: 'ressources/bower_components/jquery/jquery',
    backbone: 'ressources/bower_components/backbone/backbone',
    underscore: 'ressources/bower_components/underscore/underscore',
    text: 'ressources/bower_components/text/text',
    deepmodel: 'ressources/bower_components/backbone-deep-model/distribution/deep-model.min'
},
shim: {
    underscore: {
        exports: '_'
    },
    jquery: {
        exports: '$'
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
}
});

var specs = [
   'spec/test.js'
];

require(specs, function() {

if (window.mochaPhantomJS) {
    mochaPhantomJS.run();
}
else {
    mocha.run();
}
});

和我的test.js:

'use strict';
define(function(require) {
var ExamplesCollection = require('collections/OrganisationsCollection');

describe('Examples collection', function() {

    var examples = new OrganisationCollection();

    it('should exist', function() {
        expect(examples).to.exist;
    });

    it('should be an instance of Examples collection', function() {
        expect(examples).to.be.an.instanceof(OrganisationsCollection);
    });

});

});

test.js实际上只是一个测试,我真正想做的是:

beforeEach(function() {

    this.server = sinon.fakeServer.create();
    this.Organisations = new OrganisationsCollection({id:7, name:'somestring’});
    var searchString = 'test';
    this.responseBody  = '[{"id":7,"name":"somestring"}]';

    this.server.respondWith("GET", ‘myUrl’,
    [200, {"Content-Type": "application/json"},this.responseBody]);
    });


afterEach(function() {
    this.server.restore();
});


it('should return full list, function () {

    var fetchSpy = sinon.spy(this.Organisations, "fetch");
     this.Organisations.fetch();
     this.server.respond();
     var response = fetchSpy.getCall(0).returnValue.responseText;
     response.should.equal(this.responseBody);

   });

我只是想测试一下,如果Collection fetch工作正常 . 我想过嘲笑服务,它正在函数中调用fetch,但我没有发现这种可能性 . 所以我想伪造sinon服务器来检查我的提取 .

我总是遇到这样的问题:我无法实例化我的服务,其中调用了Collection,这使得无法进行测试 .

可悲的是,没有什么是真的有效 .

我得到2种错误:

当我在控制台上使用grunt开始我的测试时,我收到错误: Warning: PhantomJS timed out, possibly due to a missing Mocha run() call. Use --force to continue .

我得到了这个,因为我使用的是runner.js文件 . 当我直接在索引中调用mocha.run()时,我没有遇到过这个问题,但还有一些与require.js有关的问题 .

另一个问题是我在浏览器中调用我的测试 . 我得到了不同的错误:

ReferenceError: OrganisationCollection is not defined (test.js)

还有一些关于我在runner.js中的路径加载的错误

所以我的组件都没有合作 . 我用谷歌搜索了几天,尝试了很多方法,但没有一个能为我工作 .

我不得不说我对这个话题很陌生,如果那里有人可以帮助我,我会非常高兴 .

1 回答

  • 0

    我终于发现了,问题是什么:实际上,问题是我的Gruntfile.js:

    test: {
                options: {
                    port: 9001,
                    base: [
                        'node_modules',
                        '.tmp',
                        'test',
                        '<%= projectFolders.app %>'
                    ]
                }
            },
    

    我没有使用正确的路径,所以我的要求必须看起来像这样:

    jquery: 'ressources/bower_components/jquery/jquery'
    

    因为我已经在app文件夹中了

    第二个错误也出现在Gruntfile.js中:

    mocha: {
            all: {
                options: {
                    log: true,
                    urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
                }
            }
        }
    

    我删除了run:true .

    从现在开始,这些组件可以很好地协同工作 .

相关问题