jQuery없이 지시어 핸들러에 모의 DOM 이벤트 전달

Michal Charemza

dragstart이벤트 를 취소하는 데 목적이있는 매우 간단한 지시문이 있습니다 .

link: function(scope, element) {
  element.on('dragstart', function(e) {
    e.preventDefault();
  })
}

Jasmine 테스트에서 어떻게 테스트 할 수 있습니까? Event 개체를 감시하고 처리기에 전달하는 다음 테스트가 있습니다.

var mockEvent; 

beforeEach(function() {
  mockEvent = new Event('dragstart');
  spyOn(mockEvent,'preventDefault');
});

it('should call preventDefault', function () {
  element.triggerHandler('dragstart', mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalled();
});

그러나 테스트는 실패합니다. 이 Plunker에서 볼 수 있습니다 . . 이것을 어떻게 테스트 할 수 있습니까 (/ 리팩터링하여 테스트 가능하게 만들기 위해)?

편집 : jQuery를 포함하지 않는 것이 이상적입니다. 편집 : 변경된 태그

Michal Charemza

Angular의 현재 안정 버전 인 1.3.14에서는 이벤트를의 첫 번째이자 유일한 매개 변수로 전달하여 jQuery없이이 작업을 수행 할 수 triggerHandler있으므로 질문에서 제안한 내용 대신

element.triggerHandler('dragstart', new Event('dragstart'));

당신은 쓸 수 있습니다

element.triggerHandler(new Event('dragstart'));

기능에 스파이를 추가하려면 preventDefault원래 질문에 따라 다음을 수행 할 수 있습니다.

var mockEvent; 

beforeEach(function() {
  mockEvent = new Event('dragstart');
  spyOn(mockEvent, 'preventDefault');
});

it('should call preventDefault', function () {
  element.triggerHandler(mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalled();
});

이 Plunker에서 작동하는 것을 볼 수 있습니다 . 또는 최소한 type키가 있는 일반 객체를 사용할 수 있으므로이 경우

mockEvent = {
  type: 'dragstart',
  preventDefault: jasmine.createSpy('preventdefault')
};

이 Plunker에서 작동하는 것을 볼 수 있습니다.

나는 이것이이 커밋 에서 1.3 브랜치에 추가되었다고 믿는다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Ember 핸들 바 도우미의 이벤트 핸들러에 인수 전달

분류에서Dev

Ember 핸들 바 도우미의 이벤트 핸들러에 인수 전달

분류에서Dev

이벤트 핸들러에 인수를 어떻게 전달합니까?

분류에서Dev

이벤트 핸들러에 이벤트 전달

분류에서Dev

이벤트 핸들러 함수의 전역 및 지역 변수

분류에서Dev

canvas.bind (event, handler)는 이벤트 핸들러에 이벤트를 어떻게 전달합니까?

분류에서Dev

polymer v 1.0 .. 어노테이션이있는 이벤트 핸들러의 값 전달

분류에서Dev

클릭 핸들러에서 이벤트 전파 중지

분류에서Dev

이벤트 핸들러를 동적으로 생성 된 모달 창 요소에 연결하기 어려움

분류에서Dev

이벤트 핸들러에서 InvokeRequired의 필요성 방지

분류에서Dev

JQuery`on` 이벤트 핸들러 : 이벤트 위임 및 사용자 지정 데이터 전달

분류에서Dev

JQuery는`click` 이벤트 핸들러를 사용하여 DOM 객체를 검색하기 위해 하나의 이벤트를 지연시킵니다.

분류에서Dev

HTML에서 다중 인수 onMouseover 이벤트 핸들러 전달

분류에서Dev

새 양식에서 이벤트 핸들러로 변수 전달

분류에서Dev

이벤트 핸들러에 콜백 전달

분류에서Dev

공통 이벤트 핸들러에 관련 클래스 전달

분류에서Dev

DOM 마우스 이벤트를 자식 <object>에서 부모 페이지로 전달하는 옵션

분류에서Dev

vue 3의 슬롯 내에서 하위 구성 요소에 이벤트 핸들러 전달

분류에서Dev

각도 지시문 내에서 두 개의 이벤트 핸들러 결합

분류에서Dev

React는 이벤트 핸들러에 전달 된 함수 / 콜백을 어떻게 처리합니까?

분류에서Dev

Vue js의 이벤트 핸들러 메서드에 템플릿 변수를 전달하는 방법

분류에서Dev

이벤트 핸들러에 추가 매개 변수를 전달 하시겠습니까?

분류에서Dev

React 컴포넌트 이벤트 핸들러에서 정의되지 않은 "this"

분류에서Dev

DOM에서 이벤트 핸들러 할당

분류에서Dev

여러 이벤트가있는 jQuery .on () 메서드-이벤트 핸들러 함수에 인수 전달

분류에서Dev

Javascript 이벤트 핸들러에서 DOM에 요소 추가를 지연하는 방법

분류에서Dev

이벤트 핸들러에서 사용될 때 정의되지 않은 함수

분류에서Dev

요소의 이벤트 핸들러에서 작동하지 않는 기능

분류에서Dev

이벤트 핸들러의 jQuery 'this'범위

Related 관련 기사

  1. 1

    Ember 핸들 바 도우미의 이벤트 핸들러에 인수 전달

  2. 2

    Ember 핸들 바 도우미의 이벤트 핸들러에 인수 전달

  3. 3

    이벤트 핸들러에 인수를 어떻게 전달합니까?

  4. 4

    이벤트 핸들러에 이벤트 전달

  5. 5

    이벤트 핸들러 함수의 전역 및 지역 변수

  6. 6

    canvas.bind (event, handler)는 이벤트 핸들러에 이벤트를 어떻게 전달합니까?

  7. 7

    polymer v 1.0 .. 어노테이션이있는 이벤트 핸들러의 값 전달

  8. 8

    클릭 핸들러에서 이벤트 전파 중지

  9. 9

    이벤트 핸들러를 동적으로 생성 된 모달 창 요소에 연결하기 어려움

  10. 10

    이벤트 핸들러에서 InvokeRequired의 필요성 방지

  11. 11

    JQuery`on` 이벤트 핸들러 : 이벤트 위임 및 사용자 지정 데이터 전달

  12. 12

    JQuery는`click` 이벤트 핸들러를 사용하여 DOM 객체를 검색하기 위해 하나의 이벤트를 지연시킵니다.

  13. 13

    HTML에서 다중 인수 onMouseover 이벤트 핸들러 전달

  14. 14

    새 양식에서 이벤트 핸들러로 변수 전달

  15. 15

    이벤트 핸들러에 콜백 전달

  16. 16

    공통 이벤트 핸들러에 관련 클래스 전달

  17. 17

    DOM 마우스 이벤트를 자식 <object>에서 부모 페이지로 전달하는 옵션

  18. 18

    vue 3의 슬롯 내에서 하위 구성 요소에 이벤트 핸들러 전달

  19. 19

    각도 지시문 내에서 두 개의 이벤트 핸들러 결합

  20. 20

    React는 이벤트 핸들러에 전달 된 함수 / 콜백을 어떻게 처리합니까?

  21. 21

    Vue js의 이벤트 핸들러 메서드에 템플릿 변수를 전달하는 방법

  22. 22

    이벤트 핸들러에 추가 매개 변수를 전달 하시겠습니까?

  23. 23

    React 컴포넌트 이벤트 핸들러에서 정의되지 않은 "this"

  24. 24

    DOM에서 이벤트 핸들러 할당

  25. 25

    여러 이벤트가있는 jQuery .on () 메서드-이벤트 핸들러 함수에 인수 전달

  26. 26

    Javascript 이벤트 핸들러에서 DOM에 요소 추가를 지연하는 방법

  27. 27

    이벤트 핸들러에서 사용될 때 정의되지 않은 함수

  28. 28

    요소의 이벤트 핸들러에서 작동하지 않는 기능

  29. 29

    이벤트 핸들러의 jQuery 'this'범위

뜨겁다태그

보관