How do I test the HTML pointed to by the templateUrl of an angular directive?

Caleb Jay Published at Dev

Caleb Jay

I have a directive:

app/controllers/battle.js

angular.module('myModule')
  .controller('myController',
  ['$scope',
  function($scope){
    $scope.sayHello = function(){console.log('hello');};
  }])
  .directive('myDirective', function(){
    return {
      templateUrl: '../views/testView.html'
    }
  });

That directive is called as follows:

app/views/routeOne.html

<my-directive ng-controller='myController'></my-directive>

The directive templateUrl points to a file that looks like:

app/views/testView.html

<div id='testView'>Hello</div>
<div id='eggs'>Here are some eggs.</div>

How do I unit test with karma/jasmine to ensure that the div id in testView.html exists?

Methods tried:

Using ngHtml2Js as per this stackoverflow answer. Reason failed: Unclear on how to access the created module, how the newly created module helps access/query the DOM elements in the testView.html file, unclear what path to use in each of the 4 places testView.html must be pointed to.
Using Html2Js as per this blogpost. Reason failed: Similar to (1).
Accessing the template with jquery.ajax as per this article. Reason failed: angular router prevented me from simply querying straight to the file, though I could access it directly via curl or my browser. Failed on many attempted routes. Probably not only angular router preventing this method from working.
Using $compile as per the angular docs. Reason failed: $compile not found, or, directive not found, or, compiling the directive not returning anything.

Trawling across the internet for how to test an HTML file that's the template for an angular directive yields many different methods, none of which I've managed to make work. I'm happy to use any of the above methods, but I've yet to find a guide that can take me from start to finish in a holistic manner and cover enough of what's happening to actually answer my question. So: how can I test the HTML used by my directive?

Zohaib Ijaz

I would suggest solution 1 with some changes.

A small change in directive.

angular.module('myModule')
   .controller('myController',['$scope',function($scope){
         $scope.sayHello = function(){console.log('hello');};
    }])
   directive('myDirective', function(){
      return {
        templateUrl: '../views/testView.html',
        controller: 'myController'
      }
   });

In karma.conf.js

plugins: [
        // some other plugins as well
        'karma-ng-html2js-preprocessor'
    ],
preprocessors: {
     "path/to/templates/**/*.html": ["ng-html2js"]
},

ngHtml2JsPreprocessor: {
    // If your build process changes the path to your templates,
    // use stripPrefix and prependPrefix to adjust it.
    stripPrefix: "app",
    prependPrefix: "..",
    // the name of the Angular module to create
    moduleName: "templates"
},

Now in battel.spec.js //test file

describe('Directive Tests', function () {
    beforeEach(module('templates'));
    beforeEach(module('myModule'));

    var $compile, $rootScope;

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;
   }));
  it('Some test', function(){
       var element = $compile("<my-directive></my-directive>")($rootScope);
       $rootScope.$apply();
       expect(element.html()).toContain('Here are some eggs');
  });
});

Collected from the Internet

Please contact [email protected] to delete if infringement.