我已经在 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();
});
})
最佳答案
最重要的事情是:
Create event并在元素上触发它
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>
关于javascript - AngularJS –如何在Jasmine中为输入事件指令编写单元测试,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24928454/