Ember Unit Bubble Testing Components

Question

I am trying to write unit test to ensure that properties are closed when the modal file is closed. However, it looks like I'm having problems processing actions. I keep getting the error message:
Error: < q12-reports@component :add-team-modal::ember294> had no action handler for: hideModal

Here is the modal.js component:

 stopSearch: function(modal) { modal.send('hideModal'); this.setProperties({ searchTerm: '' }); }, actions: { modalCancelled: function(modal) { this.stopSearch(modal); }, etc... } 

As you can see, I activate the hideModal action. This is unit test. I am trying to write:

 test('closing modal clears properties correctly', function(assert) { assert.expect(2); let component = this.subject(); let firstSearchTerm; Ember.run(function() { component.set('searchTerm', 'test'); firstSearchTerm = component.get('searchTerm'); assert.ok(firstSearchTerm, 'test', 'set term properly'); component.send('modalClosed', component); }); assert.ok(firstSearchTerm, '', 'clears term properly'); }) 

Before people mentioned this , I tried this below.

 test('closing modal clears properties correctly', function(assert) { assert.expect(2); let component = this.subject(); let firstSearchTerm; let $component = this.append(); let targetObject = { externalHideModal: function() { assert.ok(true, 'hide modal was called.'); return true; } } component.set('hideModal', 'externalHideModal'); component.set('targetObject', targetObject); Ember.run(function() { component.set('searchTerm', 'test'); firstSearchTerm = component.get('searchTerm'); component.send('modalCancelled', component); }); assert.ok(firstSearchTerm, '', 'clears term properly'); }) 

Integration testing error (does not work). The last statement still reads the "test."

 test('Closing modal clears properties of modal', function(assert) { assert.expect(1); this.render(hbs`{{modal}}`); //open modal this.$('.search').click(); this.setProperties({ searchTerm: 'test' }); this.set('searchTerm', 'test'); assert.equal(this.get('searchTerm'), 'test', 'sets properly'); // cancel out of modal this.$('.modal-footer button').eq(1).click(); let searchTerm = this.get('searchTerm'); assert.equal(searchTerm, '', 'clears results properly'); }); 

Answer 1

If you want to claim that your component dispatched an event, you can add an event listener to your test integration context. It should also stop throwing an unhandled error.

 assert.expect(2); ... this.on('hideModal', function() { assert.ok(true, 'hide modal event fired'); }); 

This is a bit more difficult to do with ember test modules, so I would recommend using integration tests when testing user interface interactions.