In Ember-CLI 1.13.1, I have the following integration test in my ponent:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-prepile';

moduleForComponent('category-tabs', 'Integration | Component | category tabs', {
  integration: true
});

test('tapping button fires an external action', function(assert) {
  this.on('onTabTouch', function(value) {
    assert.equal(value, 'Expense');
  });

  this.render(hbs`
    {{category-tabs onTabTouch=(action "onTabTouch")}}
  `);

  this.$('button:first').click();
});

Then in my ponent, I have this action:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    handleTabTouch(tab) {
      this.attrs.onTabTouch(tab);
    }
  }
});

My test keeps on saying this:

An action named 'onTabTouch' was not found in [object Object].

How do I test a closure action? I also tried:

this.set('onTabTouch', function(value) {
  assert.equal(value, 'Expense');
});

And it didn't work.

In Ember-CLI 1.13.1, I have the following integration test in my ponent:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-prepile';

moduleForComponent('category-tabs', 'Integration | Component | category tabs', {
  integration: true
});

test('tapping button fires an external action', function(assert) {
  this.on('onTabTouch', function(value) {
    assert.equal(value, 'Expense');
  });

  this.render(hbs`
    {{category-tabs onTabTouch=(action "onTabTouch")}}
  `);

  this.$('button:first').click();
});

Then in my ponent, I have this action:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    handleTabTouch(tab) {
      this.attrs.onTabTouch(tab);
    }
  }
});

My test keeps on saying this:

An action named 'onTabTouch' was not found in [object Object].

How do I test a closure action? I also tried:

this.set('onTabTouch', function(value) {
  assert.equal(value, 'Expense');
});

And it didn't work.

• javascript
• ember.js

1 Answer 1

I've managed to figure it out.

Instead of writing:

this.on('onTabTouch', function(value) {
  assert.equal(value, 'Expense');
});

I wrote this:

this.set('actions', {
  onTabTouch(value) {
    assert.equal(value, 'Expense');
  }
});

EDIT:

A better way of doing it now is like this:

this.set('onTabTouch', () => assert.ok(true));

this.render(hbs`
  {{category-tabs onTabTouch=(action onTabTouch)}}
`);

Notice that (action onTabTouch) doesn't have any double quotes.