web-dev-qa-db-ja.com

anglejsユニットテストでkeyup / keydownイベントをトリガーするにはどうすればよいですか？

プレースホルダーをエミュレートするディレクティブを単体テストしたいのですが、入力値はキーアップ/ダウンイベントでのみクリアされます。

unit-testingangularjsjasmine
33
Chandra

プログラムでイベントを作成してトリガーする必要があります。単体テストに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操作ユーティリティであると言っています。

上記のコードを機能させるには、without jQueryを変更します。

$.Event('keydown')

に：

angular.element.Event('keydown')
33
pkozlowski.opensource

受け入れられた回答の使用に問題がありました。他の魂を見つけました。

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

14
Maciej Dzikowicki

私はこのような何かを手に入れました。

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

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();
});
2
Seyed Jalal Hosseini

最近、コンポーネント（Angular 2）でこのHostListenerをテストしたいと思いました。

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

しばらく検索した後、これは機能しています：

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