0

我已经设置了这个组件（精简到最低限度）：

<a href={{href}}>{{text}}</a>

{{#if template}}
  <button {{action "toggleSubmenu"}} class="global-nav-toggle-submenu">
    <i class="caret-down"></i>
  </button>
{{/if}}

而这个测试：

test('has a toggle button if a submenu is present', function(assert) {
  var component = this.subject({
    template: Ember.HTMLBars.compile('<ul class="global-nav-submenu"></ul>')
  });

  assert.ok(this.$().find('.global-nav-toggle-submenu').length);
});

这运行良好，但我收到了来自 Ember 的弃用通知：

不推荐访问“模板” <app-name@component:global-nav-item::ember540>。要确定是否指定了块，<app-name@component:global-nav-item::ember540>请在组件布局中使用“{{#if hasBlock}}”。

当我更改要使用的模板时hasBlock：

<a href={{href}}>{{text}}</a>

{{#if hasBlock}}
  <button {{action "toggleSubmenu"}} class="global-nav-toggle-submenu">
    <i class="caret-down"></i>
  </button>
{{/if}}

测试失败。登录this.$()到控制台显示hbs模板文件似乎忽略了template我以编程方式添加的内容。

在测试中，我尝试template用block, layout, hasBlock,content等换出，但没有成功。我也尝试过初始化subjectwith hasBlock: true。

在应用了块的常规开发应用程序中加载页面时，逻辑运行良好：

{{#global-nav-item text="Hello" href="#"}}
  Some Content
{{/global-nav-item}}

为了测试这个逻辑，我应该以其他方式在单元测试中设置我的组件吗？

4

1 回答 1

3

一般来说，你应该对这种类型的东西使用“新”风格的组件集成测试。

请参阅以下资源：

更新：根据从罗伯特的答案链接的博客文章，这里是新的测试代码tests/integration/components/global-nav-item-test.js：

import hbs from 'htmlbars-inline-precompile';
import { moduleForComponent, test } from 'ember-qunit';

moduleForComponent('global-nav-item', 'Integration | Component | global-nav-item', {
  integration: true
});

test('has a toggle button if a submenu is present', function(assert) {
  this.render(hbs`
    {{#global-nav-item text="Hello" href="/"}}
      <ul class="le-global-nav-submenu"></ul>
    {{/global-nav-item}}
  `);

  assert.ok(this.$('.global-nav-toggle-submenu').length);
});
于 2015-07-07T16:14:11.853 回答