Ember组件测试 - 将控制器上下文传递给组件

时间:2014-12-02 16:48:03

标签: ember.js ember-cli ember-testing

我正在尝试对几个嵌套的组件进行单元测试。这是在应用程序中使用时的外观。

{{#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}}

在此组件中,selectedCountrycountriesObj来自路径的控制器。如何在创建测试时设置此上下文。这就是我的测试代码的样子

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());
});

第二次测试不起作用我的上下文没有设置。这通常是怎么做的?我对一般的测试完全不熟悉,所以我可能会做一些愚蠢的事情。

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

Here is the demo of the component actually working.

0 个答案:

没有答案