嵌套组件的绑定不能在ember-qunit中工作

Question

我们有一个ember组件(让我们称之为组件B)，并且该组件的模板包含另一个组件(组件A)。如果我们将组件B中的计算属性绑定到组件A中的属性，那么当我们使用ember-qunit进行测试时，绑定并不能完全工作，但绑定在实际应用程序中是工作的。在测试中，如果我们以编程方式在组件A或B中设置值，绑定就会正常工作，但如果我们使用ember助手(例如fillIn)来设置组件值，绑定就不会被触发。对于非嵌套组件，我们不会遇到这个问题。

下面是演示这个问题的jsfiddle: http://jsfiddle.net/8WLpx/4/

请忽略下面的父组件可能只是嵌套组件的扩展。这只是为了说明问题。

下面的代码，如果你愿意:

HTML/车把

<!-- URL input -->
<script type="text/x-handlebars" data-template-name="components/url-input">
<div {{ bind-attr class=":input-group showErrors:has-error:" }}>
  {{input value=web_url class="form-control"}}
</div>
</script>
<!-- video URL input -->
<script type="text/x-handlebars" data-template-name="components/video-url-input">
{{url-input class=class value=view.value selectedScheme=view.selectedScheme web_url=view.web_url}}
</script>

组件Javascript

//=============================== url input component
App.UrlInputComponent = Ember.Component.extend({
  selectedScheme: 'http://',
  value: function(key, value, previousValue) {
    // setter
    if (arguments.length > 1) {
      this.breakupURL(value);
    }
    // getter
    return this.computedValue();
  }.property('selectedScheme', 'web_url'),
  computedValue: function() {
    var value = undefined;
    var web_url = this.get('web_url');
    if (web_url !== null && web_url !== undefined) {
      value = this.get('selectedScheme') + web_url;
    }
    return value;
  },
  breakupURL: function(value) {
    if(typeof value === 'string') {
      if(value.indexOf('http://') != -1 || value.indexOf('https://') != -1) {
        var results = /^s*(https?://)(S*)s*$/.exec(value);
        this.set('selectedScheme', results[1]);
        this.set('web_url', results[2]);
      } else {
        this.set('web_url', value.trim());
      }
    }
  },
  onWebURLChanged: function() {
    // Parse web url in case it contains the scheme
    this.breakupURL(this.get('web_url'));
  }.observes('web_url'),
});

//=============================== video url input component
App.VideoUrlInputComponent = Ember.Component.extend({
  value: "http://",
  selectedScheme: 'http://',
  web_url: "",
});

<<p> 测试代码/strong>

emq.moduleForComponent('video-url-input','Video URL Component', {
  needs: ['component:url-input',
          'template:components/url-input'],
  setup: function() {
    Ember.run(function() {
      this.component = this.subject();
      this.append();
    }.bind(this));
  },
});
emq.test('Test fill in url programmatically', function() {
    var expectedScheme = 'https://';
    var expectedWebURL = 'www.someplace.com';
    var expectedURL = expectedScheme + expectedWebURL;
    Ember.run(function() {
        this.component.set('selectedScheme', expectedScheme);    
        this.component.set('web_url', expectedWebURL);    
    }.bind(this));
    equal(this.component.get('value'), expectedURL, "URL did not match expected");
});
emq.test('Test fill in url via UI', function() {
    var expectedURL = 'https://www.someplace.com';
    fillIn('input', expectedURL);
    andThen(function() {
        equal(this.component.get('value'), expectedURL, "URL did not match expected");
    }.bind(this));
});

Answer 1

this.append()不能在测试设置中发生;它必须发生在"test"方法中，因为ember的qunit"test"包装器在调用标准的qunit"test"方法之前清除了所有的视图。