1

イニシャライザを介して注入されるサイドバー サービスに依存するサイドバー コンポーネントがあります。

コンポーネントには、サービスの同じプロパティに関連付けられている計算されたプロパティ title があります。

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

1 に答える 1

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
});
于 2015-09-21T18:58:08.830 に答える