Ember單元測試組件具有冒泡動作

Question

我正在嘗試編寫單元測試以確保在關閉模態時關閉屬性。 但是，我似乎遇到了動作處理方面的問題。 我一直收到錯誤消息：
Error: <q12-reports@component:add-team-modal::ember294> had no action handler for: hideModal

這是modal.js組件：

stopSearch: function(modal) {
  modal.send('hideModal');

  this.setProperties({
    searchTerm: ''
  });
},

actions: {
  modalCancelled: function(modal) {
    this.stopSearch(modal);
  },
  etc...
}

正如你所看到的，我正在hideModal動作。 這是我試圖編寫的單元測試：

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');
})

在人們提到這一點之前，我在下面嘗試過。

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');
})

集成測試嘗試（不起作用）。 最后一個斷言仍然是“測試”。

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

如果要斷言組件發送了事件，則可以向集成測試上下文添加事件偵聽器。 這也應該停止拋出未處理的事件錯誤。

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

這對於ember單元測試來說有點難度，所以我建議在測試組件UI交互時使用集成測試。