0

我们有一个 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: "",
});

测试代码

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

1 回答 1

1

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

于 2014-08-06T20:32:03.093 回答