Should have a mechanism for inserting components sans this.$()

[tomdale]

In component tests, usually the component will automatically be inserted into the DOM during the normal course of writing assertions, i.e., calling this.$('.some-selector') is smart about rendering and inserting the component into the DOM just-in-time to have the assertion work.

However, there are some cases where you want to test whether the component listens for events from the DOM and sets the appropriate properties on the Ember.Component instance. In this case, it would be nice to have a way to manually tell ember-qunit to render the component; otherwise, your test will just sit there until it times out.

In our case, we have a test helper that waits for properties to be set. I've included the helper and an example test below.

// tests/unit/audio-player-test.js
test("once the <audio> tag has loaded, the component's duration and isLoaded properties are set", function() {
  expect(2);

  var component = this.subject();

  // Have to know that this.$() is a magic incantation to get the
  // component to render
  this.$();

  Ember.run(function() {
    component.set('src', "audio/Southern_Nights_-_07_-_All_My_Sorrows.mp3");
  });

  return Ember.RSVP.all([
    propertyShouldBecome(component, 'duration', 219),
    propertyShouldBecome(component, 'isLoaded', true)
  ]);
});

// tests/helpers/assertions.js
export var propertyShouldBecome = function(object, property, expectedValue) {
  var actualValue;

  return new Ember.RSVP.Promise(function(resolve, reject) {
    var observer = function() {
      var correctValue, message;

      actualValue = object.get(property);

      if (typeof expectedValue === 'function') {
        if (expectedValue(actualValue)) {
          correctValue = true;
          message = "The " + property + " property on " + object + " fulfills the condition";
        }
      } else if (expectedValue === actualValue) {
        correctValue = true;
        message = "The " + property + " property on " + object + " became " + expectedValue;
      }

      if (correctValue) {
        window.clearTimeout(timeout);
        Ember.removeObserver(object, property, observer);
        QUnit.push(true, null, null, message);
        resolve();
      }
    }

    var timeout = setTimeout(function() {
      if (typeof expectedValue === 'function') {
        QUnit.push(false, null, null, "The " + property + " property of " + object + " never fulfilled the condition");
      } else {
        QUnit.push(actualValue === expectedValue, actualValue, expectedValue, "The " + property + " property of " + object + " never became " + expectedValue);
      }

      reject();
    }, 3800);

    Ember.addObserver(object, property, observer);
    observer();
  });
};

[tomdale]

Oops, looks like this.render() covers my case. Sorry!