Question

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

Answer 1

您需要以编程方式创建事件并触发它。这样做包括用于单元测试的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

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

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

$.Event('keydown')

为：

angular.element.Event('keydown')

Answer 2

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

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

可以找到工作示例here

Answer 3

我有这样的工作。

element.triggerHandler({type:"keydown", which:keyCode});

Answer 4

如果您使用angular2，则可以通过调用dispatchEvent(new Event('mousedown'))实例上的HTMLElement来触发任何事件。例如：使用角度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();
});

Answer 5

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

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

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

..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...

如何在angularjs单元测试中触发keyup / keydown事件？

5 个答案: