使用 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:

收到弃用通知

Accessing 'template' in <app-name@component:global-nav-item::ember540> is deprecated. To determine if a block was specified to <app-name@component:global-nav-item::ember540> please use '{{#if hasBlock}}' in the components layout.

当我将模板更改为使用 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

一般来说，您应该对此类事物使用 "new" 样式的组件集成测试。

查看以下资源：

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

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

使用 hasBlock 测试 Ember.js 组件

Testing an Ember.js component using hasBlock

ember.js

htmlbars