Last month at EmberConf I ran a workshop on test driven development. Each time I do a training event like this I get a handful of great questions and this time around was no different. I got so many great questions that I decided it was time to blog about a few of the repeat offenders.
The question for this blog post is centered around component integration testing. If you have a simple component that takes in some users and a closure action, how can you assert the action is wired up correctly without including the outter context (parent/container component or controller).
| import Ember from 'ember'; | |
| import hbs from 'htmlbars-inline-precompile'; | |
| var UserTableComponent = Ember.Component.extend({ | |
| layout: hbs` | |
| {{#each users as |user|}} | |
| <div>{{user.name}}</div> | |
| <button onclick={{action remove user.id}}>remove</button> | |
| {{/each}} | |
| ` | |
| }); | |
| export default UserTableComponent; |
Integration testing makes this such a snap (once we get the syntax down correctly) because you can pass in anything we want (no mock or spy required).
| import hbs from 'htmlbars-inline-precompile'; | |
| import {moduleForComponent, test} from 'ember-qunit'; | |
| moduleForComponent('users-table', 'integration: users table test', { | |
| integration: true | |
| }); | |
| test('should fire action when button is clicked', function(assert) { | |
| assert.expect(1); | |
| this.set('remove', (id) => { | |
| assert.equal(id, 3); | |
| }); | |
| this.set('users', [{id: 3, name: 'foo'}]); | |
| this.render(hbs`{{users-table users=users remove=(action remove)}}`); | |
| var $button = this.$('button'); | |
| $button.trigger('click'); | |
| }); |
In the next post I'll show how you can inject a custom template to test a custom component helper with integration testing!
To see the test in action you can pull down this example app to learn more
