Component context should be cleaned up between integration tests?

[samueljseay]

I've reproduced my issue in a repo here: https://github.com/samueljseay/test-component-issue

Sorry I would've done it with ember twiddle but having a bit of trouble with it.

It looks from the ember test helper code and from the behaviour of the repo above that component context is not cleaned up properly between tests. Is this intended? it feels to me like context should be completely isolated and it leads to unexpected results in my tests.

a snippet of the tests from the repo above:

the test:

test('it adds some items', function(assert) {
  this.render(hbs`{{my-component}}`);

  this.$('#adder').click();
  this.$('#adder').click();

  assert.equal(this.$('.thing').length, 2, 'should be 2 things');
});

test('it does not still have those items on the next test', function(assert) {
  this.render(hbs`{{my-component}}`);
  assert.equal(this.$('.thing').length, 0, 'should be no things to begin with');
  // fails, there are still 2 things from the last test
});

test('I see if I override the context that it works as expected', function(assert) {
  this.set('things', []);
  this.render(hbs`{{my-component things=things}}`);
  assert.equal(this.$('.thing').length, 0, 'should be no things to begin with');
  //passes, there are no things
});

the component:

export default Ember.Component.extend({
  things: [],
  actions: {
    addThing: function() {
      this.get('things').pushObject(Ember.Object.create({
        text: 'a thing'
      }));
    }
  }
});

[rwjblue]

This is the issue:

 things: [],

You are storing a mutable object on the component prototype, which is shared by all instances. This is not a bug in Ember or ember-test-helpers, it is just how JavaScript's inheritance works (I know it is kinda bonkers when you first run up against it).

The fix is something like this:

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    this.things = [];
  },

  actions: {
    addThing: function() {
      this.get('things').pushObject(Ember.Object.create({
        text: 'a thing'
      }));
    }
  }
});

---

Read more in https://dockyard.com/blog/2014/04/17/ember-object-self-troll.

[samueljseay]

Thanks so much! That helps a lot to clarify that! Not sure how I ran so long with Ember and didn't run into that.