isolateScope() gives undefined - Unit Testing directives with Karma

Question

As stated in the title of the question, I am getting undefined when calling isolateScope(). I tried to Unit Test my Angular Directive based on the instructions given on Unit Testing AngularJS Directives With External Templates.

Here is my code:

directive.js

angular.module("myTestApp")
  .directive("testDirective", function(){
    return{
      restrict: "E",
      require: "ngModel",
      scope:{
        ngModel: "=",
        label: "@?"
      },
      templateUrl: "/mypath/templates/testDirective.html",
      link: function($scope, element, attributes, ngModelCtrl){
        $scope.functions = {},
        $scope.settings = {
          label: $scope.label ? $scope.label : ""
        }
      }
    };
  });

I have used karma-ng-html2js-preprocessor for templateUrl.

karma.conf.js (Code contains only the parts that are concerned with ng-html2js)

files:[
  //All Js files concerning directives are also included here...
  '/mypath/templates/*.html'
],

preprocessors: {
  '/mypath/templates/*.html': [ng-html2js']
},

ngHtml2JsPreprocessor: {
  moduleName: 'template'
},

plugins: ['karma-*'],

directiveSpec.js

describe("testDirective Test", function(){
var scope, $compile,$httpBackend, template;

beforeEach(module('myTestApp'));
beforeEach(module('template'));

beforeEach(inject(function($rootScope, _$compile_, _$httpBackend_){
    scope = $rootScope.$new();
    $compile = _$compile_;
    $httpBackend = _$httpBackend_;
}));

it("should check if the value of label attribute id set to dummyLabel", function(){
    $httpBackend.expect('GET','/mypath/templates/testDirective.html').respond();
    scope.label = 'dummyLabel';
    var element = angular.element('<test-directive label= "label" ></test-directive>');

    element = $compile(element)(scope);
    console.log(element);
    scope.$digest();
    console.log('Isolate scope: '+ element.isolateScope());
    expect(element.isolateScope().label).toEqual('dummyLabel');
});

});

Here the console.log(element); prints {0: <test-directive label="label" class="ng-scope"></test-directive>, length: 1}

Problem: console.log('Isolate scope: '+ element.isolateScope()); gives undefined.

I looked on this problem on many questions in StackOverflow but was not able to find the correct solution.

Also, I have to use the $httpBackend to get the html file or else it throws Unexpected Request error.

I would be really grateful for any help since I am stuck on this error since past one week!

score 0 · Answer 1 · answered Dec 21 '15 at 13:35

0

Just a guess here at first glance but...

Your .respond() needs to return something. Right now you are intercepting the request to your template and not responding with anything, thus resulting in empty data and isolateScope() being undefined.

answered Dec 21 '15 at 13:35

BowlerDo0d

72
1
5

Already tried by passing the content of `element` in the `.respond()` call. Did not work. – Jagrut Dec 21 '15 at 13:37

score 0 · Accepted Answer · answered Dec 22 '15 at 21:16

0

For someone who might have the same problem:

The directive testing do not work as expected when using the $httpBackend to mock the HTML files. It should be and it is possible to include HTML files by simply using the ng-html2js plugin. So I removed the $httpBackend calls and used stripPrefix to properly include my HTML files as modules. It worked!

Hope it helps someone else!

answered Dec 22 '15 at 21:16

Jagrut

922
7
21

So you did not use beforeEach(module('templates'))? You added the html file correct? I am running into errors with this. – Winnemucca Mar 08 '16 at 22:35
@stevek With `ng-html2js` plugin, you need not include the module in each test file. You can directly write it in your configuration file and it will be automatically be available in your test case. Please point me to your question on SO or provide me with more details. – Jagrut Mar 14 '16 at 12:57
Here is a link to my question http://stackoverflow.com/questions/35854470/setting-up-ng-htmljs-preprocessor-karma-preprocessor . I am stuck with getting back empty strings in my html files. I am referencing the files as HTML in my karma.conf.js. I am wondering if the the templateCached files also need to be directly referenced inside of the files array? – Winnemucca Mar 14 '16 at 15:51

isolateScope() gives undefined - Unit Testing directives with Karma

2 Answers2