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

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

  •  2
  • Stéphane Bruckert jungledev  · 技术社区  · 6 年前

    这是一个需要 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个子假人

    1 回复  |  直到 6 年前
        1
  •  3
  •   Lux    6 年前

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

    你的第一个假设是 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 函数,但不能确保 -上下文。