Привязки для вложенного компонента не работают в ember-qunit

У нас есть компонент 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));
});

person user3889360    schedule 30.07.2014    source источник


Ответы (1)


This.append() не может произойти в тестовой настройке; это должно произойти в методе "test", потому что оболочка ember qunit "test" очищает все представления перед вызовом стандартного метода qunit "test".

person user3889360    schedule 06.08.2014