1

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

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

在这个组件中，selectedCountry和countriesObj来自路由的控制器。创建测试时如何设置此上下文。这就是我的测试代码的样子

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

第二个测试不起作用我的上下文没有设置。这通常是如何完成的？一般来说，我对测试完全陌生，所以我可能会做一些愚蠢的事情。

这是我迄今为止在测试中得到的。

这是实际工作的组件的演示。

4

0 回答 0