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が、成功しませんでした。withも初期化してみました。blocklayouthasBlockcontentsubjecthasBlock: true

そして、ブロックが適用された通常の開発アプリでページを読み込むと、ロジックは正常に実行されます。

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

このロジックをテストするために、単体テストでコンポーネントを設定する必要がある他の方法はありますか?

4

1 に答える 1

3

一般に、このタイプのものには「新しい」スタイルのコンポーネント統合テストを使用する必要があります。

次のリソースを参照してください。

更新: 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);
});
于 2015-07-07T16:14:11.853 に答える