setting up ng-htmljs-preprocessor karma preprocessor

Question

I am setting up my Karma configuration file, but I do not fully understand some of options that exist as I am not having success testing templates that have ran through the ngHtml2JsPreprocessor and have been

 $templateCached

Inside of the ngHtml2JsPreprocessor I can add a few key value properties involving paths.

 ngHtml2JsPreprocessor: {

      stripPrefix: ".*/Went all the way back to the root of my application/",


     // moduleName: 'templatesCached'// 
    },

I commented out the templates for now to make sure that I am getting access to each file as module. I am loading the modules with no error. I can find the templateCached version in my dev tools.

beforeEach(module('template')); 

My Templates folder sits outside the basepath I created.

basePath: 'Scripts/',

I have it referenced inside the preprocessors object

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

Again all of my templates are now js files and cached.

I inside of my package.json I saved the files as

save-dev

"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.2.2",
"karma-ng-html2js-preprocessor": "^0.2.1",

I referenced my installs in the plugins.

  plugins: [
    'karma-chrome-launcher',
    'karma-jasmine',
    'karma-sinon',
    'karma-ng-html2js-preprocessor'
],

I have all of my files loaded

files: [

  //jquery libaries
  // angular libraries
  // Scripts files
  // source app.js
  // tests folder and files
]

My tests are running off of Karma start

However, my directive is just an empty string

  element.html()  

returns ""

I have bard inject set up

bard.inject(
            "$compile",
            "$controller",
            "$rootScope",
            '$templateCache',
            "haConfig",
            "$q"
        );

Here is the inside of my beforeEach

 bard.mockService(haConfig, {
            getTemplateUrl: '/tst!'
        });

        //bard.mockService(haConfig, {});
        console.log('ha config2', haConfig.getTemplateUrl());

        var html = angular.element("<div explore-hero></div>");

        console.log('htl',haConfig.getTemplateUrl());

        scope = $rootScope.$new();
        //templateCache
        element = $compile(html)(scope);
        //console.log(haConfig.getTemplateUrl(html));
        scope.$digest(element);
        console.log('missing text',haConfig.getTemplateUrl(html));

        controller = element.scope();

        console.log("element", element);

I have no idea why I am getting an empty string back. I am creating the html file but, nothing is inside of it.

All I can wonder if I should have the the templatesCached files showing up in a folder on my dev tools? Also whether or not the files should be referenced inside of the files array inside karma.conf.js

Right now I have the html files referenced? I have tried the js files but that did not seem to do anything

Answer 1

The problem was actually quite simple fix. I was tempted to delete it but, in case someone has a similar issue I want this to be available.

Inside the karma.conf.js I have a

   stripPrefix: 'rootDirectory'   // was already in place

   stripSuffix: '.js.html' // I had to make a strip on the templatesCached 

   prependSuffix: '.html'  // this is what I was searching for 

When the preprocessor ran it templateCached all of my files. However, they did not end the way that I was expecting them and I could not read them. I had the module and other parts set up correctly.