AngularJS Testing Tips and Tricks | ng-html2js

Key Takeaways

• The karma-ng-html2js-preprocessor tackles the challenge of loading external templates in AngularJS tests.
• Installing and configuring this plugin in your Karma setup is straightforward.
• Utilize the module alias technique to simplify spec file setup.
• This method is less cumbersome than hardcoding templates or using $httpBackend.

When testing AngularJS directives that use templateUrl for external templates, developers often encounter issues like the infamous "Unexpected Request: GET" errors. This happens because Karma, out of the box, can struggle with retrieving asynchronously loaded templates.

This is where the karma-ng-html2js-preprocessor becomes incredibly useful. In this guide, I'll show you how to seamlessly integrate this plugin into your AngularJS unit tests with minimal pain.

Installing the Plugin

Start by installing the karma-ng-html2js-preprocessor plugin using npm:

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

This command installs the plugin and adds it to your project's devDependencies in the package.json file.

Configuring Karma

With the plugin installed, configure Karma to use it by modifying your Karma configuration file. Here’s an example configuration:

karma.conf.js

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

    ngHtml2JsPreprocessor: {
      stripPrefix: 'app/',
      moduleName: 'templates'
    },

    files: [
      // Other files...
      'app/views/**/*.html'
    ],
    ... // other configurations
  });
};

This setup tells Karma to preprocess all HTML templates in the app/views/ directory with ng-html2js. The stripPrefix option adjusts paths to match those referenced in your directives.

In Your Spec Files

With Karma configured, leverage the ng-html2js preprocessor in your test specs:

describe('myDirective', function() {
  beforeEach(module('templates'));

  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('should have correct HTML', function() {
    var element = $compile('')($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain('specific html from template');
  });
});

Notice the call to beforeEach(module('templates')), which ensures that the precompiled templates are available to your tests.

Conclusion

The karma-ng-html2js-preprocessor is an efficient tool for overcoming the challenges of testing AngularJS directives with external templates. While alternatives like hardcoding or $httpBackend offer some solutions, they are often more cumbersome. Keeping tests clean and simple with ng-html2js makes your life as a developer easier.

FAQ

What is the main purpose of the karma-ng-html2js-preprocessor?

The main purpose is to precompile AngularJS templates into JavaScript files so they can be easily included and tested within your Karma tests.

Do I need to change my directive URLs when using ng-html2js?

No, you generally do not need to change directive URLs. The stripPrefix option in your Karma configuration helps match paths correctly without altering your existing code.

Can I test components in AngularJS without using this plugin?

Yes, you can test without this plugin, but it usually means more cumbersome setups, like manually injecting templates using $httpBackend. The plugin streamlines the testing of template-laden directives.