Question

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

然后该组件具有计算属性标题，该标题与服务上的相同属性相关联：

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

这适用于应用程序本身，但是当服务升级时，我无法在集成测试中更新组件。

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

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

有趣的是，如果我在测试中调试并使用控制台获取组件，然后从组件中获取sideBarService，它就会知道更新的标题值，甚至组件本身的值标题似乎也会更新但是dom永远不会更新：

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

这是一个运行循环问题吗？如果是这样，我需要做什么才能将其关闭？

编辑：关于Toran的评论。这看起来不错吗？

 <form class="app-form">
                <fieldset id="time-info">
                    <h2 class="title">Submit Timesheet</h2>
                    <input type="email" name="email" class="email" placeholder="Enter a valid email address." required></input><br><br>

                    <textarea type="textarea" name="text" class="message" placeholder="Message (optional)"></textarea>
                    <br><br>
                    <div class="work">
                        <label>What type of work is this for?</label><br><br>
                        <input type="radio" id="vfx" name="work">
                        <label for="vfx">Time working on visual effects for a movie</label>
                        <br><br>
                        <input type="radio" id="review" name="work">
                        <label for="review">Time spent reviewing work of a junior artist</label>
                        <br><br>
                    </div>

                    <button class="clear button" type="reset" value="Clear">CLEAR</button>
                    <button class="next button" type="submit" value="Next">NEXT</button>
                </fieldset>

                 <fieldset id="submitted">
                    <h2 class="title">Timesheet Submitted</h2>
                    <p>Good job</p>
                </fieldset>

            </form>

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

更新注入服务时，Ember组件不会在集成测试中更新

1 个答案: