Ember integration test fails after click event

I have this integration test:

test('can change chord text', function(assert) {
  this.render(hbs`{{chart-editor-chord chord=chord}}`);
  this.$().click();
  assert.ok(!!this.$('.chord-input').length);
});

but the assertion fails, the component template looks like this:

<div {{action 'changeChord'}} class="measure-chord chord-big">
    {{#if chord.editing}}
        <input type="text" value="{{chord.name}}" class="chord-input">
    {{else}}
        {{chord.name}}
    {{/if}}
</div>

and the component code:

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  actions: {
    changeChord() {
        this.chord.set('editing', true);
    }
  }
});

I'm updating the chord model in the changeChord() action and it does work if I test in the browser, but the integration test fails. So, does this change in the model have to be rendered synchronously to the template? I tried using wait() in the test but that doesn't make a difference. So how should I test this?

While I'm trying to create a twiddle for you, I found three things:

1. Where do you create chord mock in your test?
2. You are not sending event to the correct html component. Use this.$('.measure-chord') or this.$('.chord-big').
3. Instead of this.chord.set you should use this.get('chord').set. Actually Ember.set(this, 'chord.isEditing', ...) is even better.

And bonus: You don't need a div wrapper, component does this for you.

twiddles:

1. working copy
2. without div