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

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

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

是否还有其他方法可以在单元测试中设置我的组件以测试此逻辑？

Answer 1

一般来说，你应该使用＆＃34; new＆＃34;针对此类事物的样式组件集成测试。

请参阅以下资源：

Example from the ember-radio-button addon
好的博文 - Ember component integration tests

更新：根据罗伯特回答中链接的博文，以下是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组件

1 个答案: