How to test .observes() in an Ember controller?

Question

How can you test a function that observes a property of an Ember controller?

How can this be done when the observes method is asynchronous (does not return immediately)?

Controller:

var FooController = Ember.Controller.extend({
    bar: 1,
    baz: null,

    barObserver: function() {
        var req = ic.ajax.raw({
            method: 'POST',
            url: '/api/bar',
            data: { bar: bar },
        });
        return req.then(function resolve(result) {
            this.set('baz', result.response.baz);
        });
    }.observes('bar'),
});

Unit test:

test('barObserver', function() {
    var ctrl = this.subject();
    equal(ctrl.get('baz'), null, 'baz initially null');

    Ember.$.mockjax({
        url: '/api/bar',
        'type': 'POST',
        dataType: 'json',
        response: function() {
            this.responseText = { baz: 'something' };
        },
    });

    ctrl.set('bar', 2);
    //wait for barObserver's promise (from ic.ajax.raw) to return
    equal(ctrl.get('baz'), 'something', 'baz set to returned value');
});

Kingpin2k Kingpin2k · Accepted Answer · 2014-07-24T04:45:12

You can use ic-ajax to define the mocked response as well. Additionally you can stop and start testing for asynchronous problems like this.

test('barObserver', function() {
  var ctrl = FooController.createWithMixins(); // I was to lazy to set up ember qunit
  equal(ctrl.get('baz'), null, 'baz initially null');

  ic.ajax.defineFixture('/api/bar', {
    response: { baz: 'something' },
    jqXHR: {},
    textStatus: 'success'
  });

  ctrl.set('bar', 2);

  // allow everything else to run (skip a beat)
  // and then continue testing (essentially allowing ic-ajax to resolve)
  stop();
  Em.run.next(function(){ 
    start();
    equal(ctrl.get('baz'), 'something', 'baz set to returned value');
  });

});

Pseudo Example: http://jsbin.com/OxIDiVU/853/edit

How to test .observes() in an Ember controller?

1 Answers