• Stars
    star
    266
  • Rank 154,103 (Top 4 %)
  • Language
    CoffeeScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Karma plugin. Compile AngularJS 1.x and 2.x templates to JavaScript on the fly.

karma-ng-html2js-preprocessor

js-standard-style npm version npm downloads

Build Status Dependency Status devDependency Status

Preprocessor for converting HTML files to AngularJS 1.x and Angular 2 templates.

Note: If you are looking for a general preprocessor that is not tied to Angular, check out karma-html2js-preprocessor.

Installation

The easiest way is to keep karma-ng-html2js-preprocessor as a devDependency in your package.json. Just run

$ npm install karma-ng-html2js-preprocessor --save-dev

Configuration

// karma.conf.js
module.exports = function(config) {
  config.set({
    preprocessors: {
      '**/*.html': ['ng-html2js']
    },

    files: [
      '*.js',
      '*.html',
      '*.html.ext',
      // if you wanna load template files in nested directories, you must use this
      '**/*.html'
    ],

    // if you have defined plugins explicitly, add karma-ng-html2js-preprocessor
    // plugins: [
    //     <your plugins>
    //     'karma-ng-html2js-preprocessor',
    // ]

    ngHtml2JsPreprocessor: {
      // strip this from the file path
      stripPrefix: 'public/',
      stripSuffix: '.ext',
      // prepend this to the
      prependPrefix: 'served/',

      // or define a custom transform function
      // - cacheId returned is used to load template
      //   module(cacheId) will return template at filepath
      cacheIdFromPath: function(filepath) {
        // example strips 'public/' from anywhere in the path
        // module(app/templates/template.html) => app/public/templates/template.html
        var cacheId = filepath.strip('public/', '');
        return cacheId;
      },

      // - setting this option will create only a single module that contains templates
      //   from all the files, so you can load them all with module('foo')
      // - you may provide a function(htmlPath, originalPath) instead of a string
      //   if you'd like to generate modules dynamically
      //   htmlPath is a originalPath stripped and/or prepended
      //   with all provided suffixes and prefixes
      moduleName: 'foo'
    }
  })
}

Multiple module names

Use function if more than one module that contains templates is required.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      moduleName: function (htmlPath, originalPath) {
        return htmlPath.split('/')[0];
      }
    }
  })
}

If only some of the templates should be placed in the modules, return '', null or undefined for those which should not.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      moduleName: function (htmlPath, originalPath) {
        var module = htmlPath.split('/')[0];
        return module !== 'tpl' ? module : null;
      }
    }
  })
}

How does it work ?

This preprocessor converts HTML files into JS strings and generates Angular modules. These modules, when loaded, puts these HTML files into the $templateCache and therefore Angular won't try to fetch them from the server.

For instance this template.html...

<div>something</div>

... will be served as template.html.js:

angular.module('template.html', []).run(function($templateCache) {
  $templateCache.put('template.html', '<div>something</div>')
})

See the ng-directive-testing for a complete example.


Angular2 template caching

For using this preprocessor with Angular 2 templates use angular: 2 option in the config file.

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    ngHtml2JsPreprocessor: {
      // ...

      angular: 2
    }
  })
}

The template template.html...

<div>something</div>

... will be served as template.html.js that sets the template content in the global $templateCache variable:

window.$templateCache = window.$templateCache || {}
window.$templateCache['template.html'] = '<div>something</div>';

To use the cached templates in your Angular 2 tests use the provider for the Cached XHR implementation - CACHED_TEMPLATE_PROVIDER from angular2/platform/testing/browser. The following shows the change in karma-test-shim.js to use the cached XHR and template cache in all your tests.

// karma-test-shim.js
...
System.import('angular2/testing').then(function(testing) {
  return System.import('angular2/platform/testing/browser').then(function(providers) {
    testing.setBaseTestProviders(
      providers.TEST_BROWSER_PLATFORM_PROVIDERS,
      [providers.TEST_BROWSER_APPLICATION_PROVIDERS, providers.CACHED_TEMPLATE_PROVIDER]);
  });
}).then(function() {
...

Now when your component under test uses template.html in its templateUrl the contents of the template will be used from the template cache instead of making a XHR to fetch the contents of the template. This can be useful while writing fakeAsync tests where the component can be loaded synchronously without the need to make a XHR to get the templates.


For more information on Karma see the homepage.

More Repositories

1

karma

Spectacular Test Runner for JavaScript
JavaScript
11,952
star
2

karma-coverage

A Karma plugin. Generate code coverage.
JavaScript
768
star
3

karma-jasmine

A Karma plugin - adapter for Jasmine testing framework.
JavaScript
542
star
4

grunt-karma

Grunt plugin for Karma.
JavaScript
468
star
5

karma-chrome-launcher

A Karma plugin. Launcher for Chrome and Chrome Canary.
JavaScript
467
star
6

karma-mocha

A Karma plugin. Adapter for Mocha testing framework.
JavaScript
379
star
7

gulp-karma

Example of using Karma with Gulp.
JavaScript
310
star
8

karma-phantomjs-launcher

A Karma plugin. Launcher for PhantomJS.
JavaScript
281
star
9

karma-sauce-launcher

A Karma plugin. Launch any browser on SauceLabs!
TypeScript
199
star
10

karma-junit-reporter

A Karma plugin. Report results in junit xml format.
JavaScript
176
star
11

karma-browserstack-launcher

A Karma plugin. Launch any browser on BrowserStack!
JavaScript
150
star
12

karma-firefox-launcher

A Karma plugin. Launcher for Firefox.
JavaScript
104
star
13

karma-html2js-preprocessor

A Karma plugin. Convert HTML files into JS strings to serve them in a script tag.
CoffeeScript
74
star
14

karma-commonjs

A Karma plugin. Test CommonJS modules.
JavaScript
73
star
15

karma-webdriver-launcher

A plugin for Karma. Launch any browser with WebDriver.
JavaScript
66
star
16

karma-ie-launcher

A Karma plugin. Launcher for Internet Explorer.
JavaScript
59
star
17

karma-coffee-preprocessor

A Karma plugin. Compile coffee script on the fly.
JavaScript
53
star
18

karma-cli

The Karma command line interface.
JavaScript
52
star
19

karma-qunit

A Karma plugin. Adapter for QUnit testing framework.
JavaScript
51
star
20

maven-karma-plugin

Maven plugin for running tests using Karma.
Java
45
star
21

karma-requirejs

A Karma plugin. Adapter for RequireJS framework.
JavaScript
39
star
22

karma-teamcity-reporter

A Karma plugin. Report results for Teamcity CI.
JavaScript
34
star
23

karma-intellij

Reporter for IntelliJ / WebStorm.
JavaScript
34
star
24

karma-growl-reporter

A Karma plugin. Report results with growl.
JavaScript
27
star
25

karma-ng-scenario

A Karma plugin. Adapter for Angular's Scenario Runner.
JavaScript
25
star
26

karma-runner.github.com

Homepage of Karma - The Spectacular JavaScript Test Runner.
HTML
24
star
27

karma-edge-launcher

A Karma plugin. Launcher for Microsoft Edge.
JavaScript
21
star
28

karma-safari-launcher

A Karma plugin. Launcher for Safari.
JavaScript
19
star
29

karma-closure

A Karma plugin. Resolve Google Closure dependencies on the fly.
JavaScript
18
star
30

karma-dart

DEPRECATED. A plugin for Dart language.
JavaScript
16
star
31

karma-slimerjs-launcher

A Karma launcher for SlimerJS
JavaScript
13
star
32

karma-traceur-preprocessor

A Karma plugin. Compile ES6 script on the fly using traceur-compiler.
JavaScript
13
star
33

karma-nodeunit

A Karma plugin - adapter for Node unit testing framework.
JavaScript
12
star
34

karma-script-launcher

A Karma plugin. Launcher for custom scripts.
JavaScript
9
star
35

integration-tests

JavaScript
8
star
36

karma-dojo

A Karma plugin. Adapter for Dojo Toolkit.
JavaScript
7
star
37

karma-opera-launcher

A Karma plugin. Launcher for Opera.
JavaScript
7
star
38

test-device-manager

Keep-alive test browsers and redirect them to a test server on command.
JavaScript
6
star
39

karma-ember-preprocessor

A Karma plugin. Preprocessor for Ember.js templates (handlebars).
JavaScript
6
star
40

karma-googmodule-preprocessor

A Karma preprocessor to handle Closure's goog.module() system
JavaScript
5
star
41

shared-karma-files

Shared configs for all the Karma repos.
CoffeeScript
2
star