Click test helper doesn't fire .on('click') handlers

[jamesarosen]

I have a component:

export default Ember.Component.extend({
  tagName: 'button',
  count: 0,
  _increment: function() {
    this.set('count', this.get('count') + 1);
  }.on('click')
});

I'm trying to write a test for it:

moduleForComponent('increment-button', 'IncrementButtonComponent', {
  setup: function() {
    App = startApp();
    component = this.subject();
    $component = this.append();
  },

  teardown: function() {
    Ember.run(App, 'destroy');
    App = null;
  }
});

test('clicking increments the count', function() {
  click('button');
  andThen(function() {
    equal(component.get('count'), 1);
  });
});

The test fails with 0 !== 1. I added a console.log statement to _increment and found that it never gets called.

[jamesarosen]

I also tried replacing click('button') with $component.find('.something-that-exists').click(). No change.

[kimroen]

This test passes:

var application;

moduleForComponent('increment-button', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
    application = null;
  }
});

test('it works', function(assert) {
  assert.expect(2);

  var component = this.subject();
  this.render();

  assert.equal(component.get('count'), 0, 'Count is 0 before clicking');
  click('button');
  andThen(function() {
    assert.equal(component.get('count'), 1, 'Count is 1 after clicking');
  });
});

Moving the call to this.subject() up to beforeEach (previously setup) works, but if I move this.render() (previously this.append()) too, the test fails.

It seems to me like any bug here is not with ember, but with the ember test helpers.

As an aside, it feels a bit strange to start an app like this for a component test, and I see some people agree with that - here's an issue: emberjs/ember-test-helpers#3

[jamesarosen]

@kimroen great research!

it feels a bit strange to start an app like this for a component test

I agree, though I don't know how else to test the behavior of event handlers. I suspect the app-start is required to set up Ember's (global) event dispatcher.

[wagenet]

@jamesarosen why are you booting up the app to test the component?

[jamesarosen]

I don't care about the app booting. I care about the test helpers like click(...).then(...). The former seemed to be the only way to get the latter.

[wagenet]

@jamesarosen so, to clarify, this doesn't work if you don't boot the app?

[wagenet]

I don't think booting the app should be a requirement for testing components, so if it is, that seems like a bug to me.

[rwjblue]

@wagenet - The helpers that are needed here are specifically added to window when calling app.setupForTesting, and as such require an app. I completely agree that it would be nice to be able to use them while unit testing a component. I'll try to dig into it a bit more to see how we could support both worlds...

[kimroen]

I came over this today - we do actually recommend doing it this way in the guide for testing components:

We would use Integration Test Helpers to interact with the rendered component and test its behavior

http://emberjs.com/guides/testing/testing-components/

[rwjblue]

This is being addressed by emberjs/rfcs#119. Please track progress over there....