How to test an action gets called in a component ember testing - ember.js

Question

How can I test that an action was called in a component?
There are multiple ways of triggering an action like clicking on a button. Now I want to test that the action that is called when clicking on that button is actually called. Something like expect.functionName.to.be.called or something.
I have the following code
test('it closes the create dialog when close btn is clicked', function(assert) {
this.render(hbs`{{group-create cancelCreateAction="cancelAction"}}`)
this.$('button.btn--primary').click()
expect('myAction').to.be.called?
})
so i'm just wondering what I can do there?

Answer 1

Well your action does something we don't know. But here's a small test i have written checking some DOM elements and the current route. Hard to tell without you telling us what your action does.
click('.someSavingButton');
andThen(function() {
assert.equal(currentRouteName(), 'index');
assert.equal(find('.something-new-in-the-dom').length, 1, "New item in HTML");

Answer 2

I stumbled upon this question while also searching for a way to test bubble up actions in an integration test (instead
of closure actions). Maybe you already found a solution, but I will answer to have the next person find it earlier than me.
The idiomatic way to test if an action was called is to write a mock function and assert that it will be called.
In your example - before closure actions - the way to write this kind of test is as follows:
test('it closes the create dialog when close btn is clicked', function(assert) {
// make sure our assertion is actually tested
assert.expect(1);
// bind the action in the current test
this.on('cancelAction', (actual) => {
let expected = { whatever: 'you have expected' };
assert.deepEquals(actual, expected);
// or maybe just an assert.ok(true) - but I am not sure if this is "good" style
});
this.render(hbs`{{group-create cancelCreateAction="cancelAction"}}`)
this.$('button.btn--primary').click()
expect('myAction').to.be.called?
});
Nowadays, with the closure action paradigm, the correct way to bind the mock function would be
// bind the action in the current test
this.set('cancelAction', (actual) => {
let expected = { whatever: 'you have expected' };
assert.deepEquals(actual, expected);
});
this.render(hbs`{{group-create cancelCreateAction=(action cancelAction)}}`)