Angular Testing Directive with templateUrl & isolate extension
New in angular.js and can't figure out how to write a test for the directive with templateUrl and allocate the scope.
Here is my controller
(function(){
angular.module('buttons')
.controller('buttonController', ['$scope', function($scope){
//primary button
$scope.primaryButton = { name: 'Submit'};
})();
Here are my views of index.html and
<div class="layoutLeft">
<p>Primary Button</p>
<primary-button info="primaryButton"></primary-button>
</div>
primary button.html
<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>
Here is my directive
(function(){
angular.module('buttons')
.directive('primaryButton', function() {
return {
restrict: 'EA',
scope: {
buttonInfo: '=info'
},
templateUrl: 'scripts/local/views/primary-button.html'
}
})
})();
Here is my test
(function(){
beforeEach(angular.mock.module('buttons'));
describe('Buttons Directive Test', function(){
var $compile, $scope, $httpBackend;
beforeEach(module('templates'));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$scope = _$rootScope_.$new();
$scope.primaryButton = {name: 'Save'};
elm = angular.element("<primary-button info='buttonInfo'></primary-button>");
e = $compile(elm)($scope);
e.digest();
}));
it('should do something', function(){
expect(e.html()).toContain($scope.primaryButton);
});
});
}) ();
I am using jasmine and karma to test if anyone can please highlight what I am doing wrong.
source to share
Edit: here is a plunkr demonstrating pretty close to what your code was doing. There are several problems with the code you have in your question that I have fixed:
http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview
- In your test, you are calling e.digest (), which will not work because you cannot digest the element ... you must call $ scope. $ digest instead.
- e.html () will not contain this chunk of JSON. I interpreted this as I want it to contain the name tag ...
- info = 'buttonInfo' binds information to the buttonInfo attribute on the external object, but you named it "primaryButton". Rename $ scope.primaryButton to $ scope.buttonInfo
- You used some underscores that weren't absolutely necessary, but it doesn't really matter when you compile, root
- I used the inline template instead of loading it for plunkr only, there is nothing wrong with loading though
- Since your directive is an element, I added "replace", which replaces the element with a direct button. Think about it instead.
My plunkr has jasmine passing tests and a working demo of the button . Let me know if you need more help. Good luck with AngularJS.
(OLD ANSWER)
==============
You will need to use something like nghtml2js to load your templates and make them available using the template cache.
This is your first problem. The second problem is that isolation scoping is done by calling isolateScope () on the element after it has been compiled. Record the result of calling this element on the element and you will find the attributes you are using.
e.isolateScope()
source to share
Don't follow why the accepted answer is marked. The question asks the question of how to accomplish using templateUrl, while @ PeterAshwell's answer provides an inline HTML solution that doesn't work when using templateUrl .
To access the selection scope when using templateUrl, you must wrap the isolateScope call in $ timeout to complete the $ http call (made by templateUrl).
The code looks something like this:
element = $compile("<myHTML />")($scope)
$timeout(function() {
expect(element.isolateScope().myProp).toEqual(12);
}), 0 , false);
$timeout.flush();
source to share