37

我想对模拟占位符的指令进行单元测试，其中输入值仅在 keyup/down 事件中被清除。

4

5 回答 5

35

您需要以编程方式创建事件并触发它。这样做包括用于单元测试的 jQuery 是非常有用的。例如，您可以编写一个像这样的简单实用程序：

  var triggerKeyDown = function (element, keyCode) {
    var e = $.Event("keydown");
    e.which = keyCode;
    element.trigger(e);
  };

然后像这样在单元测试中使用它：

triggerKeyDown(element, 13);

您可以在此处的http://angular-ui.github.io/bootstrap/项目中看到此技术的实际应用： https ://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/ typeahead.spec.js

免责声明：让我们在这里准确一点：我不提倡将 jQuery 与 AngularJS 一起使用！我只是说它是一个有用的 DOM 操作实用程序，用于编写与 DOM 交互的测试。

要使上述代码在没有jQuery 的情况下工作，请更改：

$.Event('keydown')

至：

angular.element.Event('keydown')
于 2013-08-01T18:05:03.037 回答
14

我在使用接受的答案时遇到了问题。我找到了其他灵魂。

var e = new window.KeyboardEvent('keydown', {
  bubbles: true,
  cancelable: true,
  shiftKey: true
});

delete e.keyCode;
Object.defineProperty(e, 'keyCode', {'value': 27});

$document[0].dispatchEvent(e);

工作示例可以在这里找到

于 2015-01-26T08:16:51.877 回答
9

I got something like this working. 

element.triggerHandler({type:"keydown", which:keyCode});
于 2016-03-11T19:58:55.103 回答
3

如果您使用 angular2，则可以通过调用实例来触发任何dispatchEvent(new Event('mousedown'))事件HTMLElement。例如：用 angular 2.rc1 测试

it('should ...', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<any>) => {
  fixture.detectChanges();

  let com = fixture.componentInstance;

  /* query your component to select element*/
  let div:HTMLElement = fixture.nativeElement.querySelector('div');

 /* If you want to test @output you can subscribe to its event*/
  com.resizeTest.subscribe((x:any)=>{
    expect(x).toBe('someValue');
  });
  /* If you want to test some component internal you can register an event listener*/
  div.addEventListener('click',(x)=>{
    expect(x).toBe('someOtherValue');
  });
  /* if you want to trigger an event on selected HTMLElement*/
  div.dispatchEvent(new Event('mousedown'));
  /* For click events you can use this short form*/
  div.click();

  fixture.detectChanges();
});
于 2016-06-22T00:54:04.900 回答
2

我最近想在一个组件（Angular 2）上测试这个 HostListener：

  @HostListener('keydown.esc') onEsc() {
    this.componentCloseFn();
  };

在搜索了一段时间后，这是有效的：

..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...
于 2017-12-01T13:37:16.673 回答