I had my directory structure setup using ember-cli:
app/
components/
gear-menu.js
pods/
templates/
components/
gear-menu.hbs
icon-gear.hbs
In gear-menu.js I have:
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['o-topbar-iconBtn'],
showMenu: false,
mouseEnter: function () {
this.set('showMenu', true);
},
mouseLeave: function () {
this.set('showMenu', false);
}
});
In gear-menu.hbs I have:
{{#link-to 'settings' class='o-topbar-iconBtnLink'}}{{partial 'icon-gear'}}{{/link-to}}
<ul {{bind-attr class=':o-menu-box showMenu::hide'}}>
<li class="o-menu-item">{{#link-to 'settings' class='o-menu-itemLink'}}Profile{{/link-to}}</li>
<li class="o-menu-item">{{#link-to 'settings' class='o-menu-itemLink'}}Account{{/link-to}}</li>
<li class="o-menu-item">{{#link-to 'settings' class='o-menu-itemLink'}}Sign Out{{/link-to}}</li>
</ul>
In my gear-menu test I have (note I’m using ember mocha for test):
/* jshint expr:true */
import {
describeComponent,
it
} from 'ember-mocha';
import resolver from '../../helpers/resolver';
describeComponent( 'gear-menu', 'GearMenuComponent', {}, function() {
it('renders', function() {
// creates the component instance
var component = this.subject();
expect(component._state).to.equal('preRender');
// renders the component on the page
this.render();
expect(component._state).to.equal('inDOM');
});
});
But I got:
not ok 19 PhantomJS 1.9 - GearMenuComponent renders
---
message: >
Assertion Failed: Unable to find partial with name 'icon-gear'.
stack: >
Error: Assertion Failed: Unable to find partial with name 'icon-gear'.
at http://localhost:6410/assets/vendor.js:15936
at renderPartial (http://localhost:6410/assets/vendor.js:21410)
at partialHelper (http://localhost:6410/assets/vendor.js:21391)
at program1 (http://localhost:6410/assets/pn-front.js:666)
at http://localhost:6410/assets/vendor.js:9792
at http://localhost:6410/assets/vendor.js:54370
at EmberRenderer_createElement (http://localhost:6410/assets/vendor.js:51597)
at Renderer_renderTree (http://localhost:6410/assets/vendor.js:22699)
at http://localhost:6410/assets/vendor.js:22776
at http://localhost:6410/assets/vendor.js:12750
at http://localhost:6410/assets/vendor.js:12820
at http://localhost:6410/assets/vendor.js:12206
at http://localhost:6410/assets/vendor.js:12261
at run (http://localhost:6410/assets/vendor.js:30294)
at http://localhost:6410/assets/test-support.js:330
at http://localhost:6410/assets/test-support.js:582
at http://localhost:6410/assets/pn-front.js:1160
at http://localhost:6410/assets/test-support.js:97
at invoke (http://localhost:6410/assets/test-support.js:11948)
at http://localhost:6410/assets/test-support.js:12013
at http://localhost:6410/assets/test-support.js:5262
at http://localhost:6410/assets/test-support.js:5681
at http://localhost:6410/assets/test-support.js:5772
at next (http://localhost:6410/assets/test-support.js:5606)
at http://localhost:6410/assets/test-support.js:5616
at next (http://localhost:6410/assets/test-support.js:5555)
at http://localhost:6410/assets/test-support.js:5578
at done (http://localhost:6410/assets/test-support.js:5241)
at http://localhost:6410/assets/test-support.js:5261
at complete (http://localhost:6410/assets/test-support.js:11975)
at invoke (http://localhost:6410/assets/test-support.js:11955)
at http://localhost:6410/assets/test-support.js:11939
at http://localhost:6410/assets/test-support.js:5262
at next (http://localhost:6410/assets/test-support.js:5579)
at http://localhost:6410/assets/test-support.js:5583
at timeslice (http://localhost:6410/assets/test-support.js:7007)
Log: >
...
Everything works just what I wanted in browser, but in test it won’t find the partial. Anyone has any idea?
I am on ember 1.8.1 and ember cli 0.1.12