CODEWITHSUNDEEP
angularjskarma-runner
Katana24
Katana24

Reputation: 8959

How to use html2js preprocessor?

I'm trying to make use of the html2js preprocessor by following the guide from Vojtajina but I can't seem to understand how its working.

In my case I have a directive that uses templateUrl to serve the html in the directive. In my test I hardcode the html from the file but this will become problematic if the html changes. 

beforeEach( inject(function($rootScope,$compile) {

    elm = angular.element('<div class="header_wrapper shadow-vertical" ng-show="header.show">'+
                '<div class="header-container">'+

                    '<div class="pull-left">'+
                        '<img width="105" height="75" title="" alt=http://www.cvs.com ng-src="resources/images/logo.png">'+
                    '</div>'+

                    '<div class="pull-left" style="margin: 20px"><span class="header_title">{{header.headerTitle}}</span></div>'+

                    '<div class="logout">'+
                        '<a ng-href="#/logout" ng-click="placeHolder">Logout</a>'+
                    '</div>'+  

                    '<div class="help">'+
                        '<a ng-href="#" ng-click="placeHolder">Help</a>'+
                    '</div>'+

                    '<div class="user">'+
                        '<div>'+
                            '<b class="header-text">Corporation</b>'+
                        '</div>'+
                        '<div>Welcome {{header.headerFirstName}} {{header.headerSurname}}</div>'+
                    '</div>'+

                '</div>'+
            '</div>');
     // Compiles the directive and links it to the scope
     $compile(elm)(scope);
     scope.$digest();
}));

All my tests pass when I do the above but I want to beable to load the html from templateUrl. I installed the html2js locally to my project and modified the karma.conf.js file to look like this:

preprocessors: {
      'src/main/webapp/partials/common/components/header-bar/header-bar.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {

  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('foo')
  moduleName: 'loadTemplates'
},

The preprocessor target file is also set in the files attribute too. I don't get a failed to load modules error but this is probably because I'm not loading the html in the ideal manner. How do you go about doing this in the beforeEach block?

I thought i could do this: 

elm = angular.element( '<div header-bar></div>' );

but this causes all the tests to fail and returns an Unexpected request: GET

Thanks

Upvotes: 0

Views: 459

Answers (1)

runTarm
runTarm

Reputation: 11547

Your karma config should look like this:

files: [

  ...,

  // ensure that the template file is included here in files:
  'src/main/webapp/partials/common/components/header-bar/header-bar.html'
],

preprocessors: {
  'src/main/webapp/partials/common/components/header-bar/header-bar.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {
  // to make the template id match the one in your templateUrl
  stripPrefix: 'src/main/webapp/',

  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('foo')
  moduleName: 'loadTemplates'
}

And in the unit testing, you have to load the module specified in the moduleName: of ngHtml2JsPreprocessor config above like this:

beforeEach(module('loadTemplates'));

Hope this helps.

Upvotes: 1

Related Questions