Testing click method on component (click event)

Testing
1

Hello there. I have a seemingly simple question about the test of a user interaction on a components. Imagine you have the following component.

import Ember from 'ember'

export default Ember.Component.extend({
  classNames: ['sm-button'],
  tagName: 'a', #button
  classNameBindings: ['canClick:enabled:disabled'],
  canClick: true,

  click() {
    alert('ssss') 
  },
})

And this test.

test('it blocks the second click', function(assert) {
  assert.expect(1)

  this.render(hbs`
    {{#control-button}}
      template block text
    {{/control-button}}
  `)

  this.$().trigger('click') # this doesnt work 
})

The component is meant to be used buy simply clicking on it. You click on it and it will execute the click method. The test should do exactly the same thing but I can make it happen. The click method never gets executed and it drives me crazy. The only way to make this work is to create a child element inside the component which attaches an action. Now I can do this.$(‘div’).trigger(‘click’) and it will work, but this seem so not necessary. So how can I test the the click method in an component test?

Cheers Tee

2

Hmm, something is not right, but I can’t quite put my finger on it. Feels like the run loop didn’t flush and the test finished before giving it chance to trigger. Essentially the tear down code killed everything before the async event triggers.

Usually you do this kind of event triggering only in acceptance tests, where you need to wrap things in andThen to wait for run loop settling before continuing.

Also, with clicks, try Embers built in click helper. It’s correctly setup to trigger the run loop.

3

I tried to use the click even wrapping the entire application around a simple component test. Its simply overkill. I can believe its so hard test a simple method → click. I still think there is some bug going on. If someone could verify this little example it would be great.

4

Oh yea, I see now.

this.$('div') is correct. The reason is that integration test has it’s own wrapper view. this.$() selects the wrapper view’s element.

The better approach is select the components class name sm-button.

5

its fixed with this.$('>').click() . Thanks everyone.