CODEWITHSUNDEEP
ember.jsember-testing
gitaarik
gitaarik

Reputation: 46300

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?

Upvotes: 0

Views: 322

Answers (2)

acorncom
acorncom

Reputation: 5955

It looks like your click helper is clicking the div that your component.js controls instead of the initial div in your template. If you specify the div in your click helper it should work:

this.$('.measure-chord').click();

Upvotes: 1

ykaragol
ykaragol

Reputation: 6221

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

Upvotes: 1

Related Questions