Why my test failed after adding didInsertElement to fetch json in ember?

0
votes

I have a simple component that it's going to fetch data after the component is inserted. It was ok until I run my test. I got this error.

Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run

I understand that the component is fetching data asynchronously but I'm not sure how to solve that in my integration test.

Here's my code

export default Ember.Component.extend({
  didInsertElement: function() {
    let source = this.get('source');
    let url = apiUrl + source;
    Ember.$.getJSON(url).then(function(response) {
      this.set('data', response.data);
    }.bind(this));
  },
  // something else
};

And this is my test.

moduleForComponent('panel', 'Integration | Component | panel', {
  integration: true,
  beforeEach () {
    this.render(hbs`{{panel}}`);
  }
});

test('it has source dropdown', function(assert) {
  assert.equal(this.$('select[name="Source"]').length, 1);
});

Without the fetching data bit, the test runs ok.

2
javascriptnode.jsember.js

2 Answers

0
votes

Try wrapping the getJSON inside an Ember run loop.

So something like this: 

 var self = this;
 Ember.run(function(){
   Ember.$.getJSON(url).then(function(response) {
     self.set('data', response.data);
   });
 });
0
votes

Create a new Promise and then set the response data in the success handler.

The promise returned by Em.$.getJSON and new Ember.RSVP.Promise are different.

let self = this;
let promise = new Ember.RSVP.Promise(function() { 
                  return Ember.$.getJSON(url);
                  });

promise.then((json) => {
  this.set('data', json);
});