Bindings for nested component not working in ember-qunit

Question

We have an ember component (let's call it component B), and the template for that component contains another component (component A). If we have computed properties in component B bound to properties in component A, the bindings are not working completely when we're testing using ember-qunit, but the bindings are working in the real application. In the tests, the bindings are working if we programmatically set values in components A or B, but if we use ember helpers (e.g. fillIn) to set component values, the bindings aren't getting fired. We don't experience this problem with non-nested components.

A jsfiddle that demonstrates the problem is here: http://jsfiddle.net/8WLpx/4/

Please ignore that parent component below could have just been an extension of the nested component. This is just to demonstrate the issue.

Code below if you'd rather:

HTML/handlebars

<!-- 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>

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

Test Code

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

user3889360 user3889360 · Accepted Answer · 2014-08-06T20:32:03

The this.append() cannot happen in the test setup; it must happen in the "test" method because the ember qunit "test" wrapper clears all of the views before calling the standard qunit "test" method.

Bindings for nested component not working in ember-qunit

1 Answers