CODEWITHSUNDEEP
javascriptangularjsunit-testingkarma-jasmine
CaribouCode
CaribouCode

Reputation: 14398

Karma test on Angular directive returns unexpected request

I have a simple directive:

'use strict';

angular
  .module('app')
  .directive('ngEmailMask', ngEmailMask);

function ngEmailMask() {

  var directive = {
    replace: true,
    restrict: 'EA',
    scope: {
      user: '@',
      host: '@'
    },
    template: '<a href="mailto:{{user}}@{{host}}">{{user}}@{{host}}</a>'
  };

  return directive;

}

I'm writing a Karma unit test to check the directive outputs the correct HTML. So far I've got this:

describe('ngEmailMask', function() {

  // Bindable members
  var $compile,
      $rootScope;

  // Load module
  beforeEach(angular.mock.module('app'));

  // Bind injected references to local variables
  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  // Verify service returns
  it('Replaces the tag with the correct HTML', function() {

    // Compile element
    var element = $compile('<ng-email-mask data-user="test" data-host="gmail.com"></ng-email-mask>')($rootScope);

    // Evaluate scope
    $rootScope.$digest();

    console.log(element.html());

  });

});

I've followed the example on the Angular website here but my example above returns an error:

Error: Unexpected request: GET /app/home/home.html

That path has nothing to do with the directive and may change (it's all to do with states and routing in UI Router that I'm using). So how do I test this directive without seeing these errors about different files?

Upvotes: 0

Views: 257

Answers (1)

Amygdaloideum
Amygdaloideum

Reputation: 4863

You must expect all XHR-calls (even templates) in a jasmine test. The easiest way is to add all templates to a templateCache before running the test.

See: Unit Testing AngularJS directive with templateUrl

Upvotes: 1

Related Questions