angularjs 장치 테스트에서 키 업/키 다운 이벤트를 트리거하려면 어떻게 해야 합니까?

angularjs 장치 테스트에서 키 업/키 다운 이벤트를 트리거하려면 어떻게 해야 합니까?

플레이스 홀더를 에뮬레이트하는 명령어를 유닛 테스트하고 싶다.여기서 입력값은 키 업/다운이벤트시에만 클리어 됩니다.

이벤트를 프로그램적으로 생성하여 트리거해야 합니다.이를 위해 장치 테스트에 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를 함께 사용하는 것은 권장하지 않습니다.JS! DOM과 상호 작용하는 테스트 작성에 유용한 DOM 조작 유틸리티라는 것입니다.

위의 코드를 jQuery 없이 작동시키려면 다음을 변경합니다.

$.Event('keydown')

대상:

angular.element.Event('keydown')

수용된 답변을 사용하는 데 문제가 있었습니다.다른 영혼을 찾았지

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

여기서 작업 예를 찾을 수 있습니다.

이런 게 먹혀들었어요

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

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

최근에 컴포넌트(Angular 2)에서 이 HostListener를 테스트하려고 했습니다.

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

그리고 잠시 동안 검색한 결과 다음과 같이 작동합니다.

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

언급URL : https://stackoverflow.com/questions/18001169/how-do-i-trigger-a-keyup-keydown-event-in-an-angularjs-unit-test