karma-ng-html2js-preprocessor not creating modules

Question

Attempting to use the karma-ng-html2js-preprocessor. Karma has been finding all of my other stuff (javascript) fine, but when it comes to this html preprocessor it can't seem to find and generate a module from it.

Check out my options object below. As you can see, I've added a pattern to the files attribute and I'm using the generic name 'foo' for the module. In the test, karma throws an error whenever I try to call module('foo'); I really want to be able to use this so I don't have to hardcode templates into my unit tests or some other wacky solution.

    var options = {
        files: [].concat(
            bowerFiles,
            config.specHelpers,
            clientApp + '**/*.module.js',
            clientApp + '**/*.js',
            clientApp + '**/*.html',
            '*.html',
            temp + config.templateCache.file,
            config.serverIntegrationSpecs
            ),
        exclude: [],
        coverage: {
            dir: report + 'coverage',
            reporters: [
                // reporters not supporting the `file` property
                { type: 'html', subdir: 'report-html' },
                { type: 'lcov', subdir: 'report-lcov' },
                { type: 'text-summary' } //, subdir: '.', file: 'text-summary.txt'}
            ]
        },
        ngHtml2JsPreprocessor: {
            // strip this from the file path
            // stripPrefix: clientApp,
            moduleName: 'foo'
        },
        preprocessors: {}
    };
    options.preprocessors[clientApp + '**/*.html'] = ['ng-html2js'];
    options.preprocessors[clientApp + '**/!(*.spec)+(.js)'] = ['coverage'];
    return options;
}

Your preprocessors key '*.html' might not be matching anything in clientApp + '**/*.html'. Try using the same pattern or even just '**/*.html'? — Phil
You're right, I actually changed it to that at exactly the same time as you commented, but that didn't seem to fix it. I've updated my original post to show what the options object looks like now. — z0d14c
Do the paths in your templateUrl properties include whatever clientApp is? For example, say clientApp = 'myApp/src', are your templateUrl properties like 'myApp/src/path/to/template.html'? — Phil
clientApp = "./src/client/app/" templateUrl: "src/client/app/orders/' but i've tried it without clientApp as well... — z0d14c
If you fire up Karma using a real browser (not Phantom), you can view the source of the page and look at the included script files. Have a look for your templates and the path / keys used to add them to $templateCache. Do they match the values in templateUrl? — Phil

Phil Phil · Accepted Answer · 2015-12-16T00:25:05

I know this doesn't necessarily answer your question and if more information comes to light, I'll add to this answer but I've found this strategy works well...

I find that the HTML template of a directive, route or state (if using ui-router) shouldn't come into play when unit testing. Unit testing is about testing the interface to your component; its publicly available methods and properties. Testing the interactions with the HTML document is really in the realm of end-to-end testing with something like Protractor.

With that in mind, here's how I prevent Karma from attempting to load template files during testing.

beforeEach(function() {
    module('module.name.of.the.testable.component');

    inject(function($templateCache) {
        $templateCache.put('path/to/template/as/it/appears/in/your/component.html',
            '<div></div>');
    });
});

karma-ng-html2js-preprocessor not creating modules

1 Answers