Angular Testing Harness

Testing harness for Angular scopes, controllers, and providers. Streamlines the boilerplate created by needing to inject dependencies for Angular Unit Testing. Abstracts other features, and wraps setup and cleanup operations in easy to use functions.

npm Install

npm install ngtestharness

Modules Loaded By Default

• ng
• ngMock
• ngSanitize

Additional modules, should be included in the modules parameter.

Note: Loading ngCookies adds new functionality to the testing harness. (Please see handleCookie and clearCookies in the API)

API

API

If using Jasmine

1. Make sure your SpecRunner includes:

   • Angular
   • Angular Mocks
   • Angular Sanitize

2. The files should include at least the three angular files above, the harness filepath, the paths to all spec and source files, and the path to your modularized template files.

• The easiest way to get this is to run your templates through the grunt-html2js and use the created file. You could easily put this whole process into grunt using [grunt-contrib-jasmine] (https://www.npmjs.com/package/grunt-contrib-jasmine).

3. Open the SpecRunner in a browser.

Jasmine Modularized Templates Example

angular.module('templates-main', ['template.html']);

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

Jasmine SpecRunner Test Example

describe("Load Sample\n", function () {
  var harness = new ngTestHarness([
      'sample',
      'templates-main'
  ]),
  parent={
    message:'Hello'
  };

  it('Expect innerHTML to contain message', function () {
    expect(
      harness.compileElement('<sample-demo message="message"></sample-demo>', parent).html()
    ).toContain('Hello');
  });
});

If using Karma

1. Make sure the Karma configuration includes:

   • Angular
   • Angular Mocks
   • Angular Sanitize

2. The files should include at least the three angular files above, the harness filepath, the paths to all spec and source files, and all template files.

3. Install the karma-ng-html2js-preprocessor, preferably through npm

4. Add the 'karma-ng-html2js-preprocessor' plugin to your karma configuration file.

5. Add a filepath pattern that will include your html templates in the preprocessors section.

6. Run Karma

plugins: [
    'karma-ng-html2js-preprocessor'
]

preprocessors: {
    "'*.html': 'ng-html2js'"
}

Karma Test Example (Using Jasmine)

describe("Load Sample\n", function () {
  var harness = new ngTestHarness([
      'sample',
      'template.html'
  ]),
  parent={
    message:'Hello'
  };

  it('Expect innerHTML to contain message', function () {
    expect(
      harness.compileElement('<sample-demo message="message"></sample-demo>', parent).html()
    ).toContain('Hello');
  });
});

Authors

• David Posin
• Nate Ferrero
• Daniel Jordan

Contributors

• Jarrod Perez
• Jeremy Bernstein
• Trey Cordova
• Kevin Kragenbrink
• Matt Furniss
• David Maddison

License

MIT License

Articles

• ngTestHarness: Strap in with this new testing helper for Angular
• Using ngTestHarness to simplify $httpBackend testing

Copyright (c) 2014-2015 Gaikai Inc. (A Sony Computer Entertainment Company). Visit us at https://gaikai.com/ for more information.