Ember component test - Pass controller context to the component

177 views Asked by At

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.

Here is what I've got so far in testing.

Here is the demo of the component actually working.

0

There are 0 answers