Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS - Test directive with method
<!DOCTYPE html>
<!-- // source http://jsbin.com/cifini/1 -->
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/jasmine-html_1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-mocks.js"></script>
<script src="http://cdn.jsdelivr.net/jquery/2.1.1/jquery.js"></script>
<script src=//cdn.jsdelivr.net/jasmine.jquery/2.0.3/jasmine-jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/jasmine_1.css"></link>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
var app = angular.module('myApp', []);
app.directive('ehSimple', function() {
var linkFn = function(scope, element) {
element.bind('click', function() {
scope.clicked = true;
})
};
return {
link: linkFn
};
});
describe('Directive with function tests', function() {
var element;
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function($compile, $rootScope) {
$scope = $rootScope;
element = angular.element('<div eh-simple></div>');
$compile(element)($rootScope);
}));
it('should respond to click', function() {
console.log($scope)
jQuery(element).click();
expect($scope.clicked).toBe(true);
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"><\/script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/jasmine-html_1.js"><\/script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/boot.js"><\/script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-mocks.js"><\/script>
<script src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.js"><\/script>
<script src=//cdn.jsdelivr.net/jasmine.jquery/2.0.3/jasmine-jquery.min.js"><\/script>
<link type="text/css" rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42401/jasmine_1.css"></link>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myApp', []);
app.directive('ehSimple', function() {
var linkFn = function(scope, element) {
element.bind('click', function() {
scope.clicked = true;
})
};
return {
link: linkFn
};
});
describe('Directive with function tests', function() {
var element;
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function($compile, $rootScope) {
$scope = $rootScope;
element = angular.element('<div eh-simple></div>');
$compile(element)($rootScope);
}));
it('should respond to click', function() {
console.log($scope)
jQuery(element).click();
expect($scope.clicked).toBe(true);
});
});</script></body>
</html>
var app = angular.module('myApp', []);
app.directive('ehSimple', function() {
var linkFn = function(scope, element) {
element.bind('click', function() {
scope.clicked = true;
})
};
return {
link: linkFn
};
});
describe('Directive with function tests', function() {
var element;
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function($compile, $rootScope) {
$scope = $rootScope;
element = angular.element('<div eh-simple></div>');
$compile(element)($rootScope);
}));
it('should respond to click', function() {
console.log($scope)
jQuery(element).click();
expect($scope.clicked).toBe(true);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment