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?

score 0 · Answer 1 · answered Nov 19 '14 at 15:23

0

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.

answered Nov 19 '14 at 15:23

Asgaroth

4,274
3
20
36

Sounds like you are no the right track. Is there away around this? – jax Nov 20 '14 at 00:38
I tried using and ember proxy but it still didn't work. ` var objProxy = Ember.ObjectProxy.create({ content: siteMockMelbourne }); var arrProxy = Ember.ArrayProxy.create({ content: [objProxy] });` – jax Nov 20 '14 at 02:42
Question, are you injecting `store` into the components? or where is `this.get('store').find('site');` placed? from your question seems to be the component, but they generally dont have access to the store – Asgaroth Nov 20 '14 at 15:48
Yes, I am injecting the store into the component via a parameter called `store`, because as you said, it is not available by default. – jax Nov 20 '14 at 21:21

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

1 Answers1