키 이벤트 핸들러가있는 카르마 유닛 테스트 각도 지시문

Question

몇 주 전에 나는 JavaScript의 세계에 뛰어 들었다. Angular를 사용하고 Karma와 Jasmine으로 코드를 테스트합니다. 나는 문제가있는 각도 지시어를 가지고있다.

나는 <input> 상자와 함께 사용하기위한 각도 지시어가 있습니다. 지시문은 입력 상자를 수정하여 입력을 숫자로만 허용합니다.

<div> 
    Numbers only: <input number-only ng-required="true" 
        ng-model="myNumber" type="text" maxlength="3" 
        placeholder="NNN"> 
</div> 

내가 지시가 제대로 유선 도착하는지 테스트하고 싶습니다, 그리고 성공적으로 필터링 :

var testDirective = angular.module('testDirectiveApp', []); 

testDirective.directive('numberOnly', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
     element.on('keydown', function (event) { 
      var k = event.keyCode; 
      if (48 <= k && k <= 57) { 
      return true; 
      } 
      event.preventDefault(); 
      return false; 
     }); 
     } 
    }; 
    }); 

난과 같이 HTML에서 사용할 것 : 여기에 코드의 단순화 된 버전입니다 비 번호 입력. "a1b2c3"을 타이핑하면 입력 상자는 "123"이어야합니다.

입력 상자에 문자열을 입력 한 후 값 (입력 상자, 각도 모델 등)을 확인하는 방법은 여러 가지가 있지만 지금까지는 아무 것도 시도하지 않았습니다.

describe('numberOnly', function() { 
    'use strict'; 
    var scope, element; 

    beforeEach(module('testDirectiveApp')); 

    beforeEach(inject(function($compile, $rootScope) { 
    scope = $rootScope.$new(); 
    scope.testInput = ""; 
    element = angular.element('<input number-only ng-model="testInput" type="text">'); 
    $compile(element)(scope); 
    scope.$digest(); 
    })); 

    it('should accept number input', function() { 

    triggerKeyDown(element, 49); 

    expect(scope.testInput).toBe("1"); 
    }); 

    var triggerKeyDown = function (element, keyCode) { 
    var e = $.Event("keydown"); 
    e.which = keyCode; 
    e.keyCode = keyCode; 

    $(element).trigger(e); 
    }; 
}); 

나는 심지어 사용자 입력을 시뮬레이션하기 위해 E2E 테스트를 작성했습니다 :

다음 테스트는 내 많은 시련의 예입니다. 또한 HTML 요소에서 이벤트 처리기 함수를 추출하고 단위 함수를 테스트 해 보았습니다. 지금까지 아무도 일하지 않았다.

각도 지시어를 테스트하려면 어떻게해야합니까?

Answer 1

테스트에서 실제로 지시문 정의 개체 (DDO)를 삽입 한 다음 실제로 요소를 만들지 않고 직접 링크 함수를 호출 할 수 있습니다.

각도는 동일한 이름이지만 다른 우선 순위의 지시문을 추가 할 수 있습니다. Angular는 배열의 형태로 지시어를 주입합니다 (우선 순위가 여러 가지이기 때문에). 한 번만 지시문을 선언한다고 가정하면 DDO가 배열의 첫 번째 것으로 간주 할 수 있습니다.

이 코드는 테스트되지 않았지만 대부분의 방법으로 테스트해야합니다.

describe('numberOnly', function() { 
    var scope, linkFunction; 

    beforeEach(module('testDirectiveApp')); 

    beforeEach(inject(function($compile, $rootScope, numberOnlyDirective) { 
    scope = $rootScope.$new(); 
    //get the link function 
    linkFunction = numberOnlyDirective[0].link; 
    }); 

it('calls the event', function(){ 
    //make a mock element that has the 'on' function. 
    var onCallback; 
    var mockElement = { 
     on: function(eventName, cb){ 
      expect(eventName).toEqual("keydown"); 
      //save the callback so we can call it in our test 
      onCallback = cb; 
     } 
    }; 

    linkFunction(scope, mockElement); 
    var preventDefaultWasCalled = false; 

    var mockEvent = { 
     which: 1, 
     keyCode: 1, 
     preventDefault: function(){ 
      preventDefaultWasCalled = true; 
     } 
    }; 
    //trigger the 'keydown' event by calling the callback 
    onCallback(mockEvent); 
    expect(preventDefaultWasCalled).toEqual(true); 
});