如何在ember + jasmine中模拟路由器状态 [英] How to mock router state in ember + jasmine

问题描述

在我的茉莉花测试套件中，我想将路由器导航到正确的状态。这样的东西：

  describe（路由器，function（）{
 beforeEach（function（） b $ b router = App.Router.create（）; 
 router.transitionTo（'foo.bar'）; 
} 
}）; 
  

但是如果我这样做，我得到一个不能调用方法'disconnectOutlet'未定义的错误发生这种情况，我正在调用

  bar：Ember.Route.extend（{
 connectOutlets：function（router，上下文）{
 router.get（'applicationController'）。connectOutlet（'bla'，'blub'）; 
} 
}），
  $ / pre 
 
 
 
 
 
 
 
 
 
 
 $ code> applicationController = App.ApplicationController.create（）; 
  

但它不会更改错误那么我怎么可以嘲笑在正确的路由器状态？

解决方案

今天茉莉花怎么样？您是否要每次更改浏览，或者尝试从命令行运行茉莉花幻象节点/茉莉花节点？

一个例子可能是像下面的东西。在下面的设置中，我正在测试一个视图，但同样的嘲笑/间谍想法适用于您上面的路由器示例。

 要求（ '静态/脚本/供应商/ filtersortpage.js'）; 
 require（'static / script / app / person.js'）; 
 
 describe（PersonApp.PersonView Tests，function（）{
 
 var sut，router，controller; 
 
 beforeEach（function（） 
 sut = PersonApp.PersonView.create（）; 
 router = new Object（{send：function（）{}}）; 
 controller = PersonApp.PersonController.create（{}）; 
 controller.set（target，router）; 
 sut.set（controller，controller）; 
}）; 
 
它（不在用户名不存在的情况下调用路由器上的发送，function（）{
 var event = {'context'：{'username'：''，'set'：function（）{}}}; 
 var sendSpy = spyOn（router，'send'）; 
 sut.addPerson（event）; 
 expect（sendSpy）.not.toHaveBeenCalledWith（'addPerson'，jasmine.any（String））; 
}）; 
 
它（在存在用户名时调用路由器上的发送，function（）{
 var event = {'context'：{'username'：'foo '，'set'：function（）{}}}; 
 var sendSpy = spyOn（router，'send'）; 
 sut.addPers on（event）; 
 expect（sendSpy）.toHaveBeenCalledWith（'addPerson'，'foo'）; 
}）; 
 
它（用户名不存在时不调用集上下文，function（）{
 var event = {'context'：{'username'：''，'set' ：function（）{}}}; 
 var setSpy = spyOn（event.context，'set'）; 
 sut.addPerson（event）; 
 expect（setSpy）.not.toHaveBeenCalledWith （'username'，jasmine.any（String））; 
}）; 
 
它（用户名存在时调用set context to empty string，function（）{
 var event = {'context'：{'username'：'foo'，'set' ：function（）{}}}; 
 var setSpy = spyOn（event.context，'set'）; 
 sut.addPerson（event）; 
 expect（setSpy）.toHaveBeenCalledWith（' username'，''）; 
}）; 
}）; 
  

这里是一个真正的项目中的茉莉花测试，如果你想看到它与一些上下文

这是被测试的视图（以帮助理解上述茉莉花测试）

  PersonApp.PersonView = Ember.View.extend（{
 templateName：'person'，
 addPerson：function（event）{
 var username = event.context.username; 
 if（username）{
 this.get（'controller.target'）。send（'addPerson'，username）; 
 event.context.set（'username'，''）; 
} 
} 
}）; 
  

In my jasmine test suite I want to navigate my router to the right state. Something like this:

   describe("The Router", function(){
        beforeEach(function(){
            router = App.Router.create();
            router.transitionTo('foo.bar');
        }
    });

but if I do so, I get an Cannot call method 'disconnectOutlet' of undefined error. That happens cuz I am calling

     bar: Ember.Route.extend({      
        connectOutlets: function(router, context){
          router.get('applicationController').connectOutlet('bla', 'blub');
        }
      }),

at this router transition. I tried somehow to init my applicationController like

applicationController = App.ApplicationController.create();

but it doesnt change the error. So how can I mock to be in the right router state?

解决方案

How are you testing this with jasmine today? Are you going to the browse with each change or trying to run it from the command line with something like jasmine-phantom-node / jasmine-node?

One example might look something like the below. In the setup below I'm testing a view but the same mocking / spying ideas apply to the router example you have above.

require('static/script/vendor/filtersortpage.js');
require('static/script/app/person.js');

describe ("PersonApp.PersonView Tests", function(){

  var sut, router, controller;

  beforeEach(function(){
    sut = PersonApp.PersonView.create();
    router = new Object({send:function(){}});
    controller = PersonApp.PersonController.create({});
    controller.set("target", router);
    sut.set("controller", controller);
  });

  it ("does not invoke send on router when username does not exist", function(){
    var event = {'context': {'username':'', 'set': function(){}}};
    var sendSpy = spyOn(router, 'send');
    sut.addPerson(event);
    expect(sendSpy).not.toHaveBeenCalledWith('addPerson', jasmine.any(String));
  });

  it ("invokes send on router with username when exists", function(){
    var event = {'context': {'username':'foo', 'set': function(){}}};
    var sendSpy = spyOn(router, 'send');
    sut.addPerson(event);
    expect(sendSpy).toHaveBeenCalledWith('addPerson', 'foo');
  });

  it ("does not invoke set context when username does not exist", function(){
    var event = {'context': {'username':'', 'set': function(){}}};
    var setSpy = spyOn(event.context, 'set');
    sut.addPerson(event);
    expect(setSpy).not.toHaveBeenCalledWith('username', jasmine.any(String));
  });

  it ("invokes set context to empty string when username exists", function(){
    var event = {'context': {'username':'foo', 'set': function(){}}};
    var setSpy = spyOn(event.context, 'set');
    sut.addPerson(event);
    expect(setSpy).toHaveBeenCalledWith('username', '');
  });
});

Here is the jasmine test above in a real project if you want to see it with some context

Here is the view under test (to help make sense of the above jasmine tests)

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person',
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      this.get('controller.target').send('addPerson', username);
      event.context.set('username', '');
    }
  }
});

这篇关于如何在ember + jasmine中模拟路由器状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！