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.

Any reason not to make them discrete files? How are you currently retrieving the templates in each route or directive? `template` expects a string, `templateUrl` expects a url, so how do you get them? Post an example? — deitch, Dec 07 '14 at 14:30
@deitch - I will update the question. This particular project is in Ionic, which doesn't work well with discrete files. I can put them into the $templateCache with Gulp, but I want to try to stay 'stock' with this project as much as I can (Ionic doesn't ship with testing baked in either, so I wouldn't totally rule it out). That said, I actually like to keep the templates inline because it keeps things simple and can speed up the UI a lot. — Andrew, Dec 07 '14 at 14:39
I would like to hear from someone with more experience in perf-testing angular. I could see having 1,000 external files slowing things down, but 5-10 templates are not likely to matter that much. In any case they are cached after first request. — deitch, Dec 07 '14 at 14:40
@deitch - This has nothing to do with performance. In this case, Ionic doesn't ship with support for template files and, as it happens, Angular works fine without them. If there is no solution, I will either need to monkey-patch some Ionic code or write a karma preprocessor. Either way, I'm hoping there is a simpler solution. — Andrew, Dec 07 '14 at 14:48
I wouldn't go that far. Just because I am not sure how to do it, doesn't mean "there is no solution". It probably means, "I'm not smart enough to know it yet!" :-) — deitch, Dec 07 '14 at 14:55
@deitch - I have updated the question with a link to a plunker showing how the inline templates are loaded. It is a powerful technique and very fast. The only big downside is that if you have a very large application, you may not need to load ALL your templates. But if you have certain ones you know you need, it is a pretty good technique. It is also a really simple and effective way of hiding sensitive templates (admin files and so on) if your index file is dynamic. — Andrew, Dec 07 '14 at 15:07
You know you can mess around with `$templateCache` by injecting it into your tests? Can you put your tests into the plunkr? — deitch, Dec 07 '14 at 15:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66374/discussion-between-andrew-and-deitch). — Andrew, Dec 08 '14 at 03:07

Paul Sweatte · Answer 1 · 2017-07-06T18:50:32.140

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

Inject inline templates into $templateCache for Jasmine tests

1 Answers1