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

mutmk8jj  于 2023-04-19  发布在  Angular
关注(0)|答案(6)|浏览(156)

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

ryevplcw

ryevplcw1#

你需要以编程的方式创建一个事件并触发它。为此,包含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')
watbbzwu

watbbzwu2#

我对使用公认的答案有问题。我找到了其他的解决方案。

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中找到

2ledvvac

2ledvvac3#

我有个类似的东西。

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

gywdnpxw4#

如果你使用的是angular2,你可以通过调用HTMLElement示例上的dispatchEvent(new Event('mousedown'))来触发任何事件。例如:使用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();
});
qyyhg6bp

qyyhg6bp5#

我最近想在一个组件(Angular 2)上测试这个HostListener:

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

经过一段时间的搜索,这是工作:

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

ht4b089n6#

it('should call listenToModalCloseEvent', fakeAsync(() => {
  spyOn(component, 'closeDropDownMenu').and.callThrough();
  const keyboardEvent = new KeyboardEvent('keydown', {
    'key': 'Escape'
  });
  document.dispatchEvent(keyboardEvent);
  fixture.detectChanges();
  expect(component.closeDropDownMenu).toHaveBeenCalled();
}));

相关问题