How do you guys test the event binding inside the component?

[Gabriel Pugliese]

How do you guys test with jasmine the bindings made with this.on?

Like:

this.on(document, 'myEvent', this.myMethod);

I tried to spyOn(this.component, 'myMethod') and expected it .toHaveBeenCalled() but it fails after $(document).trigger('myEvent')

[Patrick Nixon]

spyOn(this.component, 'myMethod') replaces this.myMethod with a spy, but your event handler is still calling the original method.  You could:

  this.on(document, 'myEvent', function(event, data) { this.myMethod(event, data); });

or:

  this.onMyEvent = function(event, data) { this.myMethod(event, data); };

  ...

  this.on(document, 'myEvent', this.onMyEvent);

Both of these solutions delay lookup of this.myMethod until the event fires, so your spy will get called.

[Gabriel Pugliese]

That's what I was scared of, since I already have 20+ components tested. I didn't want to change the signature of them all, but I think I will have to.

Thanks for the fast answer.

[Giuseppe Gurgone]

Usually you want to test events so what you could do here is the following:

var spy = jasmine.createSpy();

this.component.on(document, 'myEvent', spy);

this.component.trigger('myEvent'/* , optionalData*/);

expect(spy).toHaveBeenCalled();

/* optionally

expect(spy.mostRecentCall.args[1]).toEqual(optionalData);

*/

if in your component you trigger stuff after initialize, you may want to create the component, create the spy, listen for it, initialize the component at this point and then trigger and do the assertions.

You may want to sneak peek the other open sourced components or even the flightjs testsuite for more examples

[Gabriel Pugliese]

In my case, I want to assure that the event 'myEvent' is bound to an specific method of my component. And inside the test I do something like that:

var mySpy = spyOn(this.component, 'myMethod');

$(document).trigger('myEvent');

expect(mySpy).toHaveBeenCalled();

And inside component:

this.myMethod = function () { alert('foo'); };

this.after('initialize', function () {

  this.on(document, 'myEvent', this.myMethod);

});

Patrick's solution is the best fit for me now.

[Giuseppe Gurgone]

Fair enough, you could also patch the component before attachTo I think:

MyComponent.prototype.myMethod = jasmine.createSpy;

var instance = (new MyComponent).initialize(dummyElem);

instance.trigger('myEvent');

expect(instance.myMethod).toHaveBeenCalled();

[Gabriel Pugliese]

That's an interesting approach, gonna try that.