Emberjs测试组件的动作委托 [英] Emberjs Testing a Component's action delegate

问题描述

我试图测试一个使用动作委托的简单组件。我想测试某个操作是发送给组件的actionDelegate。我正在考虑使用Sinon来检查是否正在发送该动作，但是我无法解释如何复制Ember用来将其动作发送给其代理/目标的结构。

我的sinon间谍代理对象采取什么样的结构，以便在用户点击按钮时，使用send检查组件是否委派事件？

我已经创建了一个例子，我想在 http：// jsfiddle。 net / L3M4T / ，但它并没有一个测试工具（这是一个很大的工作，把一个测试工具围绕一个组件只是一个简单的js小提琴 - 其实这是一个很大的工作要获得这个组件，我想解释这个问题）。

这是我的组件：

  App.AppProfileComponent = Ember.Component.extend（{
 actionDelegate：null，
 actions：{
 hello：function（perso n）{
 if（！Ember.isEmpty（this.get（'actionDelegate'）））{
 this.get（'actionDelegate'）。send（'hello'，person）; 
} 
} 
} 
}）; 
  

我没有工作的初步尝试只是写一个有这个片段的测试（使用sinon& qunit）：

 访问（/）点击（按钮）然后（function ）{
等于（actionDelegateSpy.called，true，按下按钮时应调用Action代理）; 
}）; 
  

我认为这很明显为什么 不行，但是我尝试了以下操作，这也没有起作用：

  var actionDelegateSpy = sinon.spy（）; 
 var actionDelegate = Ember.ObjectController.extend（{
 actions：{
hello：actionDelegateSpy 
} 
}）。 
  

然后通过将上面定义的actionDelegate作为测试组件上的actionDelegate进行测试。 p>

解决方案

我修改了自己的问题...傻我：

<$ p $ （$ {

Ember.run（function（）{
actionDelegateSpy = sinon.spy（）;
var actionDelegate = Ember.ObjectController.extend（{
actions：{
hello：actionDelegateSpy
}
}）。 create（）;
controller.set（'actionDelegate'，actionDelegate）;
}）;

访问（/）点击（button）
.then（function（）{
equal（actionDelegateSpy.called，true，Action delegate should be called when hello button pressed）;
}）;
}）;

I'm trying to test a simple component that uses action delegation. I want to test that a certain action is sent to the actionDelegate of a component. I was thinking of using Sinon to check that the action was being sent, but I can't work out how to replicate the structure that Ember uses to send its actions to its delegates/targets.

What structure would my sinon "spy delegate" object take in order for me to check that the component is delegating the event using "send" when the user clicks on a button?

I've created an example of the kind of thing I want to test at http://jsfiddle.net/L3M4T/ but it haven't a testing harness around it (it's kind of a big job to put a testing harness around a component just for a simple js fiddle - in fact it was quite a bit of a job to get this component into the shape I wanted to explain this problem).

Here's my component:

App.AppProfileComponent = Ember.Component.extend({
    actionDelegate: null,
    actions: {
        hello: function(person) {
            if(!Ember.isEmpty(this.get('actionDelegate'))) {
                this.get('actionDelegate').send('hello', person);
            }
        }
      }
});

And my inital try that didn't work was simply to write a test that had this fragment in it (using sinon & qunit):

visit("/").click("button").then(function() {
  equal(actionDelegateSpy.called, true, "Action delegate should be called when button pressed");
});

I think it's pretty obvious why that didn't work, but since I've tried the following, which also didn't work:

var actionDelegateSpy = sinon.spy();
var actionDelegate = Ember.ObjectController.extend({
  actions: {
    "hello" : actionDelegateSpy
  }
}).create();

then testing by passing in the actionDelegate defined above as the actionDelegate on the component for a test.

解决方案

I fixed my own issue... Silly me:

  test("delegates its hello action to actionDelegate", function() {
    var actionDelegateSpy;

    Ember.run(function() {
      actionDelegateSpy = sinon.spy();
      var actionDelegate = Ember.ObjectController.extend({
        actions: {
          "hello" : actionDelegateSpy
        }
      }).create();
      controller.set('actionDelegate', actionDelegate);      
    });

    visit("/").click("button")
    .then(function() { 
      equal(actionDelegateSpy.called, true, "Action delegate should be called when hello button pressed");
    });
  });

这篇关于Emberjs测试组件的动作委托的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！