AngularJs – Test a directive with external templates

Unit test an angular directive with inline template is straightforward. But whe we have a directive that uses templateUrl the test try to get the template html document and fails because it is not available.

app.directive('myDirective', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'templates/my-directive.html',

To solve this issue we need to preprocess the templates and make available for tests. We do that using the karma-ng-html2js-preprocessor plugin.

1) First install the preprocessor.
npm install karma-ng-html2js-preprocessor –save-dev

2) Configure the preprocessor in karma.conf.js

plugins: [
    // include the plugin
    'karma-ng-html2js-preprocessor'
],
 
files: [
    // location of templates, we need this to make available them to the preprocessor
    'src/templates/*.html'
],
 
preprocessors: {
    // location of templates
    'app/templates/*.html' : ['ng-html2js']
},
 
ngHtml2JsPreprocessor: {
    // strip this prefix from the file path (template cache uses urls as object keys, we need this to match the original url used in the directive)
    stripPrefix: 'app/'
},

3) Include the Template in the test.
Finally, we need to include the template file in the test in the same way that we include modules.

// load the template
beforeEach(module('templates/my-directive.html'));

Documentation: https://github.com/karma-runner/karma-ng-html2js-preprocessor http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/

Advertisements