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: "",
});

测试代码

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（）;它必须发生在＆＃34;测试＆＃34;方法，因为灰烬qunit＆＃34;测试＆＃34;包装器在调用标准qunit＆＃34; test＆＃34;之前清除所有视图。方法

嵌套组件的绑定在ember-qunit中不起作用

1 个答案: