lundi 10 août 2015

Acceptance tests and computed properties

I'm having some issues running an acceptance test where a DOM click fires off an update to a computed property that makes an update to the DOM.

I dumbed down my issue with this demo repo.

I have a basic template

<!-- app/templates/application.hbs -->
<a href='#' {{action 'upperNames' 'upper'}}>Show UPPER</a>
<div class="name-container">
  {{#each names as |name|}}
  <p>{{name}}</p>
  {{/each}}
</div>

The action hits a Controller that simply sets some props and triggers the computed property

// app/controllers/application.js
export default Ember.Controller.extend({
  fakeService: Ember.inject.service('fake'),
  update: null,
  names: Ember.computed('fakeService.names.@each', 'update', function() {
    var names = this.get('fakeService.names');
    if (!names || !this.update) {
      return null;
    }
    return names.map(name => name.toUpperCase() + ' - ' + this.update);
  }),
  actions: {
    upperNames: function(update) {
      // I'd normall update this service via a different component
      // but do it here to simplify sample
      this.get('fakeService').set('upper', update);
      this.set('update', update);
    }
  }
});

The app works fine, as intended.

If I try to run an acceptance test though, it always fails

test('click and display names', function(assert) {
  var done = assert.async();
  visit('/');
  setTimeout(function() {
    click('a[href=#]');
    andThen(function() {
      assert.equal(Ember.$('.name-container').children().length, 4);
      console.log('test done');
      done();
    });
  }, 1000);
});

This is the output in HTML runner

// test failure
failed@ 1033 ms
Expected:   4
Result:     0

I even set a ridiculously long timeout and clicked on the link in the app that shows up on my test page and get no results. I can see all the console logs from the controller and the service, but no DOM updates happen.

I'm guessing I'm just not familiar enough with QUnit or acceptance tests with ember-cli and I'm doing something wrong, but I'm not sure.

Any guidance in the right direction would be helpful.

Thanks!




Aucun commentaire:

Enregistrer un commentaire