Inject inline templates into $templateCache for Jasmine tests

Question

If all of my templates are in my index.html, with each inside its own <script type="text/ng-template" id="foo">...</script> block, how can I get them into the $templatecache so that Jasmine knows they exist?

Currently, Jasmine treats all of my templateUrl values as if they were all remote paths. I have looked through karma-ng-html2js-preprocessor, but it appears that this is for getting discrete template files into $templatecache, rather than script blocks.

Here is a plunker showing how the inline templates are loaded.

Answer 1

Use the karma-ng-template-preprocessor module:

Preprocessor for taking HTML files that have <script type="ng/template"> and putting them into the AngularJS Template Cache Thanks to karma-ng-html2js-preprocessor for the idea and code snippets

For example, set up karma.conf.js as follows:

// preprocess HTML files before serving them to phantomJS
    preprocessors: {'app/**/*.html': 'ng-template'},
// include HTML files in the karma session
    files: ['**/*.html'],

// if you have defined plugins explicitly, add karma-ng-template-script-to-template-cache-preprocessor 
// plugins: ['karma-ng-template-preprocessor'] 

ngTemplatePreprocessor: { moduleName: 'inlineTemplates'}

Use it in your tests as such:

function foo()
  {
  beforeEach(module('inlineTemplates'));    
  }

describe('example test', foo);

References

• karma-ng-template-preprocessor

• karma-ng-html2js-preprocessor