sinon.jsそのため、 &を使用して、進行中の JavaScript アプリのテストを書き始めましたjasmine.js。全体的にかなりうまく機能しますが、ルーターもテストできるようにする必要があります。
ルーターは、現在の状態で、多数のビューやその他のものをトリガーし、アプリケーションの状態と UI itneraction に依存jasmine.jsする呼び出しによって現在のテストを終了します。Backbone.navigate
では、ルーターを「サンドボックス化」したまま、ルートを変更できないようにしながら、別の場所へのルーティングが機能することをテストするにはどうすればよいでしょうか?
pushState の変更などを監視する何らかのモック関数を設定できますか?
これはジャスミンでそれを行う低レベルの方法であり、pushState が期待どおりに機能し、ルーターが適切に設定されていることをテストします...router初期化され、ホームルートが '' にマップされていると仮定します。これを他のルートに適応させることができます。また、アプリの初期化でBackbone.history.start({ pushState: true });
describe('app.Router', function () {
var router = app.router, pushStateSpy;
it('has a "home" route', function () {
expect(router.routes['']).toEqual('home');
});
it('triggers the "home" route', function () {
var home = spyOn(router, 'home').andCallThrough();
pushStateSpy = spyOn(window.history, 'pushState').andCallFake(function (data, title, url) {
expect(url).toEqual('/');
router.home();
});
router.navigate('');
expect(pushStateSpy).toHaveBeenCalled();
expect(home).toHaveBeenCalled();
...
});
});
Backbone.history.stop();このような理由で意図したことを行うことで、同様のことを効果的に達成できます。
更新:のないブラウザpushState:
もちろん、テストするブラウザが をサポートしている場合、これは正常に機能しますpushState。そうでないブラウザーに対してテストする場合は、次のように条件付きでテストできます。
it('triggers the "home" route', function () {
var home = spyOn(router, 'home').andCallThrough();
if (Backbone.history._hasPushState) {
pushStateSpy = spyOn(window.history, 'pushState').andCallFake(function (data, title, url) {
expect(url).toEqual('/');
router.home();
});
router.navigate('', {trigger: true});
expect(pushStateSpy).toHaveBeenCalled();
expect(home).toHaveBeenCalled();
} else if (Backbone.history._wantsHashChange) {
var updateHashSpy = spyOn(Backbone.history, '_updateHash').andCallFake(function (loc, frag) {
expect(frag).toEqual('');
router.home();
});
router.navigate('', {trigger: true});
expect(updateHashSpy).toHaveBeenCalled();
expect(home).toHaveBeenCalled();
}
});
IE6 を使用している場合は、頑張ってください。
バックボーン ルーターをテストするとき、私が気にかけているのは、指定したルートが正しい引数で指定した関数を呼び出していることです。ここでの他の多くの回答は、実際にはそれをテストしていません。
一部のルートの機能をテストする必要がある場合は、それらの機能を単独でテストできます。
単純なルーターがあると仮定します。
App.Router = Backbone.Router.extend({
routes: {
'(/)':'index',
'/item/:id':'item'
},
index: {
//render some template
},
item: {
//render some other template, or redirect, or _whatever_
}
});
これが私がそれを行う方法です：
describe('Router', function() {
var trigger = {trigger: true};
var router
beforeEach(function() {
// This is the trick, right here:
// The Backbone history code dodges our spies
// unless we set them up exactly like this:
Backbone.history.stop(); //stop the router
spyOn(Router.prototype, 'index'); //spy on our routes, and they won't get called
spyOn(Router.prototype, 'route2');
router = new App.Router(); // Set up the spies _before_ creating the router
Backbone.history.start();
});
it('empty route routes to index', function(){
Backbone.history.navigate('', trigger);
expect(router.index).toHaveBeenCalled();
});
it('/ routes to index', function(){
router.navigate('/', trigger);
expect(router.index).toHaveBeenCalled();
});
it('/item routes to item with id', function(){
router.navigate('/item/someId', trigger);
expect(router.item).toHaveBeenCalledWith('someId');
});
});
Here's what I ended up using myself. I made a mock version of the router by extending it and overriding the methods with a blank method to prevent it from invoking any further logic when being called:
describe("routers/main", function() {
beforeEach(function() {
// Create a mock version of our router by extending it and only overriding
// the methods
var mockRouter = App.Routers["Main"].extend({
index: function() {},
login: function() {},
logoff: function() {}
});
// Set up a spy and invoke the router
this.routeSpy = sinon.spy();
this.router = new mockRouter;
// Prevent history.start from throwing error
try {
Backbone.history.start({silent:true, pushState:true});
} catch(e) {
}
// Reset URL
this.router.navigate("tests/SpecRunner.html");
});
afterEach(function(){
// Reset URL
this.router.navigate("tests/SpecRunner.html");
});
it('Has the right amount of routes', function() {
expect(_.size(this.router.routes)).toEqual(4);
});
it('/ -route exists and points to the right method', function () {
expect(this.router.routes['']).toEqual('index');
});
it("Can navigate to /", function() {
this.router.bind("route:index", this.routeSpy);
this.router.navigate("", true);
expect(this.routeSpy.calledOnce).toBeTruthy();
expect(this.routeSpy.calledWith()).toBeTruthy();
});
});
Note that sinon.js is used above to create the spy, along with underscore.js to provide the size function.
バックボーンのテストに関する非常に優れたチュートリアルがあります。
http://tinnedfruit.com/2011/04/26/testing-backbone-apps-with-jasmine-sinon-3.html
関数を Backbone.History にバインドするために内部的に使用される関数である Backbone.Router.route をモックする必要があります。
それが元の機能です：
route : function(route, name, callback) {
Backbone.history || (Backbone.history = new Backbone.History);
if (!_.isRegExp(route)) route = this._routeToRegExp(route);
Backbone.history.route(route, _.bind(function(fragment) {
var args = this._extractParameters(route, fragment);
callback.apply(this, args);
this.trigger.apply(this, ['route:' + name].concat(args));
}, this));
}
ルーターが初期化されるときに関数を呼び出すだけで、次のようなことができます。
Backbone.Router.route = function(route, name, callback) {
callback();
}
コールバックをオブジェクトに保存し、ルートを名前として保存し、同じステップを段階的に呼び出すこともできます。
var map = {}
Backbone.Router.route = function(route, name, callback) {
map[route] = callback();
}
for(i in map){
map[i]();
}