使用 hasBlock 测试 Ember.js 组件

Question

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

<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 等，但没有成功。我也试过用hasBlock: true 初始化subject。

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

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

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

Answer 1

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

查看以下资源：

• Example from the ember-radio-button addon
• 不错的博文 - Ember component integration tests

---

更新：根据 Robert 的回答链接的博客文章，这是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);
});