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 交互时使用集成测试。