[英]AngularJS – how to write unit-test in Jasmine for enter events directive
我在AngularJS中創建了enter事件指令 ,因此我想為該指令運行測試用例。 但我不知道如何編寫輸入事件的代碼。
describe('Unit Test: Enter Event', function() {
var elm, compile, scope;
beforeEach(function() {
module('att.sandbox.attEnterEvent');
inject(function($compile, $rootScope) {
compile = $compile;
scope = $rootScope.$new();
});
});
/*scenarion 1*/
it("Enetr Key should call the method inside controller", function() {
elm = angular.element('<input type="text" att-enter-event="enterEvent()">');
elm = compile(elm)(scope);
scope.$digest();
scope.enterEvent = jasmine.createSpy();
//**Here i want to add enter event test case**
expect().toHaveBeenCalled();
});
})
最重要的是:
var ev = jQuery.Event("keydown", {
keyCode: 13
});
el.trigger(ev); // as el is reference to compiled directive
// ---IMPLEMETATION----------------- angular.module('att.sandbox.attEnterEvent', []) .directive('hitEnterEvent', function() { return { restrict: 'A', scope: { hitEnterEvent: '&' }, link: function(scope, element, attrs) { element.bind("keydown keypress", function(event) { if (event.which === 13 || event.keyCode === 13) { scope.$apply(function() { scope.hitEnterEvent() }); event.preventDefault(); } }); } }; }) .controller('hitEntereventCtrl', function($scope) { $scope.showinputtext = false; $scope.enterEvent = function() { $scope.showinputtext = true; }; }); // ---SPECS------------------------- describe('Unit Test: Enter Event', function() { var el, scope; beforeEach(function() { module('att.sandbox.attEnterEvent'); inject(function($compile, $rootScope) { scope = $rootScope.$new(); el = $compile(angular.element('<input type="text" hit-enter-event="enterEvent()">'))(scope); }); }); it("Enter key should call the method inside controller", function() { scope.enterEvent = jasmine.createSpy('enterEvent'); var enterKey = jQuery.Event("keydown", { keyCode: 13 }); el.trigger(enterKey); expect(scope.enterEvent).toHaveBeenCalled(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" /> <script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.