I have this component set up (stripped down to its minimum):
<a href={{href}}>{{text}}</a>
{{#if template}}
<button {{action "toggleSubmenu"}} class="global-nav-toggle-submenu">
<i class="caret-down"></i>
</button>
{{/if}}
And this test:
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);
});
This runs fine, but I get a deprecation notice from 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.
When I change the template to 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.$() to the console shows that the hbs template file seems to be ignoring the template I'm adding programmatically.
In the test, I've tried swapping out template with block, layout, hasBlock, content, etc., with no success. I've tried initializing the subject with hasBlock: true as well.
And the logic runs fine when loading a page in the regular development app that has a block applied:
{{#global-nav-item text="Hello" href="#"}}
Some Content
{{/global-nav-item}}
Is there some other way that I should be setting up my components in unit tests in order to test this logic?
In general you should use the "new" style component integration tests for this type of thing.
See the following resources:
Example from the ember-radio-button addon
Nice blog post - Ember component integration tests
Update: Based on the blog post linked from Robert's answer, here is the new test code in 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);
});
Related
I am upgrading to Ember Octane and I modified the template HBS to call the component JS. When I use Ember Classic, the Logout button exists and works. But, when I convert to Octane then the Logout button disappears. o_O
What is the correct way to display a Logout button on the template HBS? Note: I do not have a component HBS file. Is this required in Ember Octane?
Classic Template HBS snippet:
<li><a href="#" onclick={{action "logout"}}>Logout</a></li>
Octane Template HBS snippet:
<li><a href="#" onclick={{on "submit" this.logout}}>Logout</a></li>
Octane Component JS (works with Classic Template, but not Octane Template):
import Component from '#ember/component';
import { inject as service } from '#ember/service';
import { action } from '#ember/object';
export default class Navigation extends Component {
#service session
#service currentClient
#action
logout(ev) {
ev.preventDefault();
this.session.invalidate();
}
}
The issue here is the improper usage of on modifier. The on modifier has to be used on the element space whereas in your snippet, the on modifier was used as a helper.
Should be used like:
<button {{on "click" this.logout}}> Logout </button>
This means, we are asking the framework to register the provided function this.logout for the click event.
and not as:
<button onclick={{on "click" this.logout}}> Logout </button>
This guide should help to migrate from classic event handling to the newest Octane way.
I have this integration test:
test('can change chord text', function(assert) {
this.render(hbs`{{chart-editor-chord chord=chord}}`);
this.$().click();
assert.ok(!!this.$('.chord-input').length);
});
but the assertion fails, the component template looks like this:
<div {{action 'changeChord'}} class="measure-chord chord-big">
{{#if chord.editing}}
<input type="text" value="{{chord.name}}" class="chord-input">
{{else}}
{{chord.name}}
{{/if}}
</div>
and the component code:
import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
actions: {
changeChord() {
this.chord.set('editing', true);
}
}
});
I'm updating the chord model in the changeChord() action and it does work if I test in the browser, but the integration test fails. So, does this change in the model have to be rendered synchronously to the template? I tried using wait() in the test but that doesn't make a difference. So how should I test this?
While I'm trying to create a twiddle for you, I found three things:
Where do you create chord mock in your test?
You are not sending event to the correct html component. Use this.$('.measure-chord') or this.$('.chord-big').
Instead of this.chord.set you should use this.get('chord').set. Actually Ember.set(this, 'chord.isEditing', ...) is even better.
And bonus: You don't need a div wrapper, component does this for you.
twiddles:
working copy
without div
It looks like your click helper is clicking the div that your component.js controls instead of the initial div in your template. If you specify the div in your click helper it should work:
this.$('.measure-chord').click();
I'm still getting into the depths of Ember's acceptance testing. One issue I seem to keep having is the DOM not getting updated after an event. For example, my page has a side menu. A simple toggle changes a property in it's component which then toggles a "hide" class on the menu itself:
Component
import Ember from 'ember';
export default Ember.Component.extend({
menuHidden: true,
actions: {
toggleMenu(){
this.set('menuHidden', !this.get('menuHidden'));
},
}
});
Template
<a id="menu-toggle" class="{{unless menuHidden 'open'}}" {{ action 'toggleMenu' }}>
<span></span><span></span><span></span>
</a>
<div id="menu" class="{{if menuHidden 'hide'}}">
{{#link-to 'dashboard' invokeAction='closeMenu'}}Dashboard{{/link-to}}
{{#each menu as |child|}}
{{menu-child child=child createCase=(action 'createCase') menuHidden=menuHidden}}
{{/each}}
<a href="javascript:void(0)" {{ action 'logout' }}>Logout</a>
</div>
Acceptance Test
import { test } from 'ember-qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | side menu');
test('side menu opens and closes', assert=>{
logIn('my#email.com', 'password');
andThen(()=>{
assert.equal(find('#menu').attr('class'), 'hide', 'Hidden by default');
click('#menu-toggle');
andThen(()=>{
assert.equal(find('#menu').attr('class'), '', 'Now visible');
});
});
});
Now this is running fine in the browser. The test is logging in fine with my custom helper (the menu is only visible when logged in) and if I drop a console.log into toggleMenu() it is being triggered by the test. But it fails the last assert. I've done a console.log on the menu's wrapper's HTML before the last assert, it's still seeing the #menu element with class=hide
Is there something obvious I'm doing wrong? I can't find many examples of people with multiple andThen calls in acceptance tests, so I've tried having it nested - as above - and pulling the second andThen out inline with the first one. No difference.
If you open the developer console in the test browser window, you will likely see this error:
Assertion failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in an Ember.run
The following line in your component is considered code with asynchronous side-effects:
this.set('menuHidden', !this.get('menuHidden'));
Instead, for the test to work, you need to manually add the line to the run-loop, which is achieved by adding that line of code in an Ember.run, like so:
import Ember from 'ember';
export default Ember.Component.extend({
menuHidden: true,
actions: {
toggleMenu(){
Ember.run(this, function(){
this.set('menuHidden', !this.get('menuHidden'));
});
},
}
});
This will not affect the actual running code as the operations in your Ember.run will get merged into the main run-loop.
I had a similar issue which I managed to resolve after going through the steps mentioned in here
I'm trying to toggle a global property on the application controller, by clicking a button on one of the templates. I've read some stuff on action bubbling but can't it to work.
Here's the property and action on the Application controller
export default Ember.Controller.extend({
isAuthenticated: true,
actions: {
logIn: function(){
this.toggleProperty('isAuthenticated');
}
}
});
And here's the action with a login.hbs template file (I'll turn this into a proper button soon)
<span {{action 'logIn'}}>
{{#link-to 'boards' class="btn-l bg-blue white db mtl link bn w-100"}}Login{{/link-to}}
</span>
How could I ensure the action toggles the property on the Application Controller?
In your login controller,you need to inject application controller.
import Ember from 'ember';
export default Ember.Controller.extend({
appCont:Ember.inject.controller('application')
});
and in login.hbs you need to specify which target will receive the method call.
<button {{action 'logIn' target=appCont}}> Login </button>
In this <button {{action 'logIn'}}> Login </button> , context of a template is login controller, actions used this way will bubble to login route when the login controller does not implement the specified action. Once an action hits a login route, it will bubble through the route hierarchy.
Reference: http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_specifying-a-target
EDIT: If you want to call functions available in Controller inside Component then you need to pass actions toComponent`
Login.hbs
{{component-a logIn=(action 'logIn') }}
component-a.hbs
<button {{action (action logIn)}}> LogIn</button>
I was following this Ember tutorial and this quickly got a lot more complicated. This was the tutorial that I was following.
I am lost as to what is going on. When is the index.hbs getting loaded and why? Here is my code starting with the router.js:
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('todos', { path: '/'}, function() {
this.route('complete');
this.route('incomplete');
});
});
export default Router;
So it looks like our home url will load the todos.js route right? This is my code:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
let todos = [
{
title: 'Learn Ember',
complete: false,
},
{
title: 'Solve World Hunger',
complete: false,
}
];
return todos;
}
});
So this todos.js route is my model right?
I assume ember also loads the todos.hbs template by default? Is that right? Or does it load the app/templates/todos/index.hbs? Which one does it load?
This is my app/templates/todos.hbs code:
<input type="text" id="new-todo" placeholder="What needs to be done?" />
{{#todo-list todos=model}}
{{outlet}}
{{/todo-list}}
This is my app/templates/todos/index.hbs code:
<ul id="todo-list">
{{#each model as |todo|}}
<!-- this loads the component todo-item and passes in a todo as todo -->
{{todo-item todo=todo}}
{{/each}}
</ul>
The tutorial doesn't really explain what is going on here. If the index.hbs gets loaded, does it then load the todo-item component template? If so, this is my app/templates/components/todo-item.hbs:
<input type="checkbox" class="toggle" checked="{{if todo.complete 'checked'}}">
<label class="{{if todo.complete 'completed'}}">{{todo.title}}</label><button class="destroy"></button>
In the event that the app/templates/todos.hbs gets loaded...What is going on in the app/templates/todos.hbs? Are we passing in the model (somehow accessible in the template?) as todos to the todo-list component? Here is the app/templates/components/todo-list.hbs
<section id="main">
{{yield}}
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
Welcome to the wonderful world of Emberjs! first of all, I recommend you to visit the official page of Emberjs. Can you see the sidebar menu? well, be ready to spend some time reading it if you want to understand how Emberjs works. I strongly recommend you to read at least Router, Template, Component and Controller sections to begin with.
Let's see some of the snippets you have provided:
Router.map(function() {
this.route('todos', { path: '/'}, function() {
this.route('complete');
this.route('incomplete');
});
});
This is where you define your routes. Here what you have is the main route called 'todos' but used as the root page (starting at /). After it, there are two more routes: /complete and /incomplete.
model() {
let todos = [
{
title: 'Learn Ember',
complete: false,
},
{
title: 'Solve World Hunger',
complete: false,
}
];
return todos;
}
Here you are defining a model in one route (I assume is the route of todos). Pretty straight, isn't it? if you were using Ember Data for example. you would ask the server for the model here and the route would wait until receive the response.
The reason why you have an index template and a todos template is simple: todos.hbs will contain the {{outlet}} in which every page will be rendered. Imagine it as a wrapper. Whatever comes after / will be wrapped by this todos.hbs, even the index.hbs. You have more info here, in the guides (reason why I recommend you to read it first).
Let's move to another snippet:
{{#todo-list todos=model}}
{{outlet}}
{{/todo-list}}
Here you are using a component to wrap whatever is rendered in the {{outlet}}. You haven't pasted it here, but it should contain in its template at least a {{yield}} to specify where the {{outlet}} will be rendered. That info about {{yield}} can be found here.
Let's move to the next part:
ul id="todo-list">
{{#each model as |todo|}}
<!-- this loads the component todo-item and passes in a todo as todo -->
{{todo-item todo=todo}}
{{/each}}
</ul>
This {{#each}} handlebar, expressed in a block way (that's why it uses the # at the beginning and the / at the end), is a loop that allows you work with each item of your model, defined as todo. What you are doing here is to provide the component todo-item with one item of the model. If your model has 3 todos, todo-item will be rendered 3 times, one for each of them.
Again, I recommend you to follow that tutorial having the emberjs guides opened and whenever you have a doubt, check the guides until you understand the concept and then, move to the next step.