当被注入的服务被更新时，Ember组件没有在集成测试中更新

Question

我有一个侧栏组件，它依赖于通过初始化器注入的侧栏服务。

组件有一个计算属性标题，它与服务上的相同属性绑定:

title: function () {
  return this.get('sideBarService.title');
}.property('sideBarService.title'),

这可以在应用程序本身中工作，但是当服务更新时，我无法在集成测试中让组件更新。

这是我的非工作集成测试:

import Ember from 'ember';
import startApp from '../helpers/start-app';
import hbs from 'htmlbars-inline-precompile';
import { moduleForComponent, test } from 'ember-qunit';
var application, container, sideBarService;
moduleForComponent('side-bar', 'Integration | side-bar',{
  integration: true,
  beforeEach: function() {
    application = startApp();
    container = application.__container__;
    sideBarService = container.lookup('service:side-bar');
  },
  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});
test('it displays the correct title', function(assert) {
  assert.expect(1);
  Ember.run(function () {
    sideBarService.set('title', 'Hello');
  });
  this.render(hbs`
    {{side-bar}}
  `);
  var content = this.$('.side-bar-content .title').text().trim();
  var serviceTitle = sideBarService.get('title');
  // fails     
  assert.deepEqual(content, serviceTitle);
});

有趣的是，如果我在测试中调试并使用控制台抓取组件，然后从组件中抓取sideBarService，它会意识到更新的标题值，甚至组件本身的标题值似乎也更新了，但dom从未更新:

//debugged in browser console
var sb = container.lookup('component:side-bar')
undefined
sb.get('title')
"Hello"
sb.get('sideBarService.title')
"Hello"
this.$('.title').text().trim()
""

这是一个运行循环问题吗?如果是的话，我需要做些什么来触发它呢?

编辑:关于Toran的评论。这看起来对吗?

  var done = assert.async();
  var content = this.$('.side-bar-content .title').text().trim();
  var serviceTitle = sideBarService.get('title');
  setTimeout(function() {
    assert.deepEqual(content, serviceTitle);
    done();
  });

Answer 1

我可能会通过避免在初始化器中注入而使用Ember.inject.service帮助器来解决这个问题。

// component
import Ember from 'ember'
const { Component, inject, computed } = Ember;
const { service } = inject;
const { alias } = computed;
export default Component.extend({
  sideBarService: service('side-bar'),
  title: alias('sideBarService.title')
});

然后在你的测试中，当你使用该组件时，你可以通过该服务。

import Ember from 'ember';
import startApp from '../helpers/start-app';
import hbs from 'htmlbars-inline-precompile';
import { moduleForComponent, test } from 'ember-qunit';
var application, container, sideBarService;
moduleForComponent('side-bar', 'Integration | side-bar',{
  integration: true,
  beforeEach: function() {
    application = startApp();
  },
  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});
test('it displays the correct title', function(assert) {
  assert.expect(1);
  this.set('sideBarService', Ember.Object.create({
    title: 'hello'
  }));
  this.render(hbs`
    {{side-bar sideBarService=sideBarService}}
  `);
  var title = this.$('.side-bar-content .title').text().trim();
  assert.equal(title, 'hello'); // Hopefully passes
});