代码之家 › 专栏 › 技术社区 › Stéphane Bruckert jungledev

仅在组件集成测试中未定义“this”

ember-cli-mirage qunit ember.js javascript

2

Stéphane Bruckert jungledev · 技术社区 · 8 年前

这是一个需要 this 在某个时候:

export default Component.extend({
  filteredSubs: computed.filter('model.subs', function() {
    // this will always return true in development http://localhost:4200/dummy
    // but will always return false in test because 'this' becomes undefined
    return this;
  })
});

Dummy 具有一对多关系 Sub :

export default Model.extend({
  subs: hasMany('sub')
});

export default Model.extend({
  dummy: belongsTo('dummy')
});

此测试失败,但不应:

test('it renders', function(assert) {
  let dummy = server.create('dummy');
  server.create('sub', { dummy });

  this.set('dummy', dummy);
  this.render(hbs`{{show-dummy model=dummy}}`);

  assert.equal(this.$().text().trim(), 'Hi! There are 1 sub-dummies');
});

不正常13 Chrome 63.0-集成|组件|显示虚拟:渲染

实际:嗨!有0个子假人

期望:嗨!有1个子假人

不确定这是否是Ember bug或Ember cli mirage bug,
我在新的回购协议中隔离了这个问题 https://github.com/stephanebruckert/ember-bug-16052
也发布在 https://github.com/emberjs/ember.js/issues/16052

1 回复 | 直到 8 年前

1

3

Lux 8 年前

你的问题来自一系列不可原谅的虚假假设。

你的第一个假设是 this 内部a Ember.computed.filter 应为相应的对象。我不能百分之百肯定这是有记录的行为,我个人也不会相信它。如果您需要完全访问 这 我会选择一个简单的 Ember.computed .

然而,你的主要错误是在考试中。这也解释了为什么只有在测试中才会出现这个问题。您直接使用幻影模型作为 model 对于您的组件:

let dummy = server.create('dummy');
server.create('sub', {
  dummy
});

this.set('dummy', dummy);

this.render(hbs`{{show-dummy model=dummy}}`);

这里假设 server.create ,一个海市蜃楼模型,在某些方面类似于 ember-data 模型 事实并非如此! 事实上,海市蜃楼模型甚至不是 ember 对象所以你不能使用 .get 或 .set 或者您在模型上定义的任何内容,并且绝对不应将其用作模型fÃ¼r组件测试。相反,您应该使用mirage作为 余烬数据 模型。

问题是为什么 这 如果您的模型是海市蜃楼模型,则未定义 this line in ember-cli-mirage :

filter(f) {
  let filteredModels = this.models.filter(f);

  return new Collection(this.modelName, filteredModels);
}

其中 这 -上下文丢失。基本上,海市蜃楼压倒了 .filter 函数,但不能确保 这 -上下文。