Question

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.

Was it helpful?

Solution

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");
    });
  });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top