htmlbars - Testing an Ember.js component using hasBlock -

i have component set (stripped down minimum):

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

and test:

test('has toggle button if submenu 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); }); 

this runs fine, deprecation notice ember:

accessing 'template' in <app-name@component:global-nav-item::ember540> deprecated. determine if block specified <app-name@component:global-nav-item::ember540> please use '{{#if hasblock}}' in components layout.

when change template use hasblock instead:

<a href={{href}}>{{text}}</a>  {{#if hasblock}}   <button {{action "togglesubmenu"}} class="global-nav-toggle-submenu">     <i class="caret-down"></i>   </button> {{/if}} 

the test fails. logging this.$() console shows hbs template file seems ignoring template i'm adding programmatically.

in test, i've tried swapping out template block, layout, hasblock, content, etc., no success. i've tried initializing subject hasblock: true well.

and logic runs fine when loading page in regular development app has block applied:

{{#global-nav-item text="hello" href="#"}}   content {{/global-nav-item}} 

is there other way should setting components in unit tests in order test logic?

in general should use "new" style component integration tests type of thing.

see following resources:

• example ember-radio-button addon
• nice blog post - ember component integration tests

---

update: based on blog post linked robert's answer, here new test code in tests/integration/components/global-nav-item-test.js:

import hbs 'htmlbars-inline-precompile'; import { moduleforcomponent, test } 'ember-qunit';  moduleforcomponent('global-nav-item', 'integration | component | global-nav-item', {   integration: true });  test('has toggle button if submenu 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); });