我目前正在尝试基于Backbone为我的应用设置测试环境。我想单元测试一些功能。但我必须承认我在连接不同组件时遇到问题。我正在使用Backbone,Mocha,Chai,expect.js,require.js和Sinon。该应用程序基本上是与Yeoman建立的。我现在构建的是(根据我非常喜欢的教程: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,这使得无法进行测试。
很遗憾,没有任何东西真的有效。
我得到两种错误:
当我在控制台上使用grunt开始我的测试时,我收到错误:警告:PhantomJS超时,可能是由于缺少Mocha run()调用。使用--force继续。
我收到了这个,因为我使用的是runner.js文件。当我直接在索引中调用mocha.run()时,我没有遇到过这个问题,但是还有一些与require.js有关的问题。
另一个问题是我在浏览器中调用我的测试。我得到了不同的错误:
ReferenceError:未定义OrganisationCollection(test.js)
关于我在runner.js中的路径加载的一些错误
所以我的组件都没有合作。我用Google搜索了几天,尝试了很多方法,但没有一个能为我工作。
我不得不说我对这个话题很陌生,如果那里有人可以帮助我,我会非常高兴。
答案 0 :(得分: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。
从现在开始,组件可以很好地协同工作。