Angular Testing Directive with templateUrl & isolate scope

Question

New at angular.js and can't figure out how to write test for directive with templateUrl & isolate scope.

Here is my controller

(function(){
angular.module('buttons')
    .controller('buttonController', ['$scope', function($scope){

        //primary button
        $scope.primaryButton = { name: 'Submit'};
})();

Here is my views index.html &

<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 for testing, can someone guide some light on what I am doing wrong

Did my solution solve your problems? Please let me know. – Peter Ashwell Jan 03 '15 at 10:45 — Peter Ashwell, Jan 03 '15 at 10:45

score 6 · Accepted Answer · edited May 23 '17 at 11:53

Edit: Here is a plunkr demonstrating pretty close to what your code was doing. There are multiple issues with the code you have in your question that I have fixed:

http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview

In your test you call e.digest(), which will not work because you cannot digest an element... you should call $scope.$digest instead.
e.html() will not contain that JSON blob. I interpreted this as wanting it to contain the name label...
info='buttonInfo' binds info to the attribute buttonInfo in the outerscope, but you called it 'primaryButton'. Rename $scope.primaryButton to $scope.buttonInfo
You used some underscores that weren't totally necessary, but that's not a big deal, when injecting compile, rootscope
I used an inline template instead of loading it just for the plunkr, there is nothing wrong with loading it though
Because your directive is an element I added 'replace', which replaces the element with a straight button. Consider making it an attribute instead.

My plunkr has passing jasmine tests and a working demonstration of the button. Let me know if you need some more help with this. Good luck with AngularJS.

(OLD ANSWER)

==============

You will need to use something like nghtml2js to load your templates and make them available with template cache.

using nghtml2js

That's your first issue. Your second issue is getting the isolate scope is done by calling isolateScope() on the element after it is compiled. Log the result of calling that on elem and you'll find the attributes you're after.

e.isolateScope()

I am loading the html files using karma config and using nghtml2js, i will try using isolateScope() — Varun Sheth, Dec 30 '14 at 19:22
Did it work? That is the way to get your isolate scope out. http://stackoverflow.com/questions/17371836/how-to-unit-test-isolated-scope-directive-in-angularjs — Peter Ashwell, Jan 03 '15 at 01:43

score 3 · Answer 2 · answered May 22 '15 at 21:10

Not following why the above answer is marked accepted. The question asks how to accomplish using templateUrl while @PeterAshwell's answer provides a solution with inline HTML that does not work when using templateUrl.

To gain access to the isolate scope when using templateUrl, you must wrap the isolateScope call in a $timeout to allow the $http call (made by templateUrl) to complete.

Code would look something like:

element = $compile("<myHTML />")($scope)

$timeout(function() {
     expect(element.isolateScope().myProp).toEqual(12);

}), 0 , false);

$timeout.flush();

Good answer! I also think its a good idea to add a $apply() to ensure any outstanding promises are resolved. — TheChrisONeil, Nov 12 '15 at 16:10

Angular Testing Directive with templateUrl & isolate scope

2 Answers2