Mocking models for testing Ember.easyForms input component inside another ember component

Question

I am using ember-cli qunit testing using moduleForComponent. I have the following select element inside an ember component I have created.

        {{input site as="select"
            collection="sites"
            selection="site"
            optionLabelPath="content.siteLabel"
            optionValuePath="content.id"
            prompt="Please Select"
            label=" "
        }}

The actual sites collection is found using the store.

sites : function() {
    return this.get('store').find('site');
}.property()

I am using jsMockito to mock out the store.

var siteMock = mock(DS.Model);
when(siteMock).get('id').thenReturn(1);
when(siteMock).get('siteLabel').thenReturn('Qunit');

var storeMock = mock(DS.Store);
when(storeMock).find('site').thenReturn([siteMock]);

I pass this into the components as a parameter in the test.

var component = this.subject({
    store : storeMock
});

The generated html looks like this, it seems that siteMock has rendered but the optionLabelPath and optionValuPath did not work correctly even though I have added the appropriate expectations on the mock.

<select id="ember473" class="ember-view ember-select">
    <option value="">Please Select</option>
    <option id="ember491" class="ember-view" value=""></option>
</select>

I have tested using the getters on the siteMock in the debugger and everything is working as expected. I guess I need another when condition on some property of siteMock but I am not sure what. Can anyone give me some advice on getting this working?

Answer 1

The problem seems to be that you are using content. in your paths optionLabelPath="content.siteLabel" which is thinking about controller proxing to a model.

But your test are using the models directly -undecorated by a controller- and they do not have a content property.