ember testing component with yield

Question

I cannot get the compiled html to be inputted into the component via the yield block expression. See test:

import { moduleForComponent, test } from 'ember-qunit';

moduleForComponent('pro-tab-link', 'Unit | Component | pro tab link', {
  // Specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar'],
  unit: true
});

test('it renders', function(assert) {
  assert.expect(3);

  // Creates the component instance
  var component = this.subject({
    template: Ember.Handlebars.compile(
      "<h1>Hello world</h1>"
    )
  });

  console.log(component);
  assert.equal(component._state, 'preRender');

  var $component = this.append();

  Ember.run(function() {
   component.set('isOpen', true);
 });

  console.log(component);
  console.log($component.html());

  assert.equal(component._state, 'inDOM');
  assert.ok(component.isOpen);
});

And the template:

if isOpen
  == yield

For some reason, the h1 tag is not being passed into the yield of the component. How do I get this working?

Answer 1

You should switch from unit testing your components to writing integration tests for them as per this fantastic article on the subject.

The reason you can't find the h1 is that this is a unit test (ie., we are ONLY testing the component.js), and we should expect not to have access to the DOM in a unit test—hence the suggestion to switch to integration testing, a level of testing higher than unit but lower than acceptance testing.

This way you will be able to test the component and its interaction with its template in the DOM.