I am trying to unit test a couple of my components that are nested. This is how it will look when used in an app.
{{#bm-select value=selectedCountry action="countryChanged"}}
{{#bm-selected}}
{{selectedCountry}}
{{/bm-selected}}
{{#bm-options}}
{{#each item in countriesObj}}
{{#bm-option data=item key="name"}}
{{item.name}}
{{/bm-option}}
{{/each}}
{{/bm-options}}
{{/bm-select}}
In this component the selectedCountry
and countriesObj
come from the controller of the route. How do I get set this context when creating a test. This is what my testing code looks like
moduleForComponent('bm-select', 'BmSelectComponent', {
needs: [
'component:bm-selected',
'component:bm-options',
'component:bm-option'
]
});
test('is a bm-select tag', function() {
var context = Ember.ObjectController.create({
title: 'BM Ember Select Box',
countriesArr: ['France', 'Germany', 'India', 'China'],
countriesObj: [{name:'France'}, {name:'Germany'}, {name:'India'}, {name:'China'}],
selectedCountry: 'India'
});
var component = this.subject({
context: context,
value: context.get('selectedCountry'),
action: 'countryChanged',
template: Ember.Handlebars.compile(
'{{#bm-selected}}' +
'{{selectedCountry}}' +
'{{/bm-selected}}' +
'{{#bm-options}}' +
'{{#each item in countriesObj}}' +
'{{#bm-option data=item key="name"}}' +
'{{item.name}}' +
'{{/bm-option}}' +
'{{/each}}' +
'{{/bm-options}}'
)
});
//Renders the component. After that its cached.
this.$();
equal('bm-select', this.$().prop('tagName').toLowerCase());
equal('india', this.$().find('bm-selected').text().toLowerCase());
});
The second test will not work my context is not getting set. How is this normally done? I am completely new to testing in general, so I may be doing something dumb.