Ember.js 更新注入服务时，集成测试中未更新Ember组件

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

然后，组件具有一个计算属性标题，该标题与服务上的同一属性绑定：

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()
""

这是一个运行循环问题吗？如果是这样的话，我需要做什么来启动它

编辑：关于托兰的评论。这个看起来对吗

  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();
  });

---

我可能会通过避免初始值设定项中的注入，而使用

Ember.inject.service

helper来解决这个问题

// 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
});

---

我发现集成测试通常需要使用异步代码“var done=assert.async（）”加上setTimeout 1（然后当我执行断言并启动done（）时，我可以验证事件循环是否按预期完成了任务）。试试看，让我知道它是否有效/或者你是否需要一些帮助。我真诚地感谢你的回复，但不看。我在上面添加了一个代码片段，以显示我在没有调用assert async的情况下所做的操作correctly@ToranBillups我一定会接受你的提议，让你更深入地了解这一点！有没有最好的方法跟进你？