Testing components with {{each}} helper in layout fails

[rpieciorak]

Attempt to test components with {{each item in items itemController='item'}} in layout fails due to missing controller:array registration on isolated container.

Results

Died on test #1 at test (http://localhost:7357/bower_components/ember-qunit/dist/globals/main.js:262:9) at http://localhost:7357/tests/foo.spec.js:3:1: Cannot read property 'create' of undefined
Source: 
TypeError: Cannot read property 'create' of undefined
    at Ember.Handlebars.EachView.Ember.CollectionView.extend.init (http://localhost:7357/bower_components/ember/ember.js:29970:91)
    at superWrapper [as init] (http://localhost:7357/bower_components/ember/ember.js:1292:16)
    at new Class (http://localhost:7357/bower_components/ember/ember.js:12942:15)
    at Function.Mixin.create.create (http://localhost:7357/bower_components/ember/ember.js:13380:12)
    at Ember.View.Ember.CoreView.extend.createChildView (http://localhost:7357/bower_components/ember/ember.js:24483:19)
    at Object.Ember.merge.appendChild (http://localhost:7357/bower_components/ember/ember.js:25009:22)
    at Ember.View.Ember.CoreView.extend.appendChild (http://localhost:7357/bower_components/ember/ember.js:24356:30)
    at EmberHandlebars.ViewHelper.Ember.Object.create.helper (http://localhost:7357/bower_components/ember/ember.js:29376:17)
    at viewHelper (http://localhost:7357/bower_components/ember/ember.js:29554:37)
    at collectionHelper (http://localhost:7357/bower_components/ember/ember.js:29795:40)

Foo component

`import { Component, get, set, computed, observer } from 'ember'`

LAYOUT = Ember.Handlebars.compile """
         {{#each item in items itemController='item'}}
              {{item.value}}
         {{/each}}
   """

FooComponent = 

   layout: computed(-> LAYOUT).readOnly()

   tagName: 'foo'

   items: Ember.A()

`export default Component.extend(FooComponent)`

and foo spec

moduleForComponent('foo-component');

test('component should be created', function() {
  var component = this.subject();
  this.append(component);
  ok(true);
});

[ryanflorence]

You need to tell the tests what other units it needs to register on the container with needs.

moduleForComponent('foo-component', 'FooComponent', {
  needs: ['controller:item']
});

For example:

https://github.com/instructure/ic-autocomplete/blob/master/test/main.spec.js#L2-L8

Unrelated ... using itemController inside a component template seems suspect to me, you should probably make another related "child" component and use that instead of a controller.

[rpieciorak]

You're right, but it's not the only reason.

The test fails on Ember.Handlebars.EachView while trying to create ArrayController.

var controller = get(this, 'controller.container').lookupFactory('controller:array').create({
        _isVirtual: true,
        parentController: get(this, 'controller'),
        itemController: itemController,
        target: get(this, 'controller'),
        _eachView: this
      });

Isolated container knows nothing about controller:array.

My component spec succeed after adding following setup callback

moduleForComponent('dropdown-choice', 'DropdownChoice component', {
  needs: [ 'controller:dropdown-choice-item'],
  setup: function(container) { 
    container.register('controller:basic', Ember.Controller, { instantiate: false });
    container.register('controller:object', Ember.ObjectController, { instantiate: false });
    container.register('controller:array', Ember.ArrayController, { instantiate: false });  // needed by {{each}} helper with itemController set
  }
});

The basic Ember controllers should be already available in the isolated container.

[ryanflorence]

yeah that sucks, care to make a PR adding everything under-the-sun that you know of inside of isolated container?