AngularJS - directive unit test nothing

Question

I am trying a SIMPLE directive Unit Test but it is not working. I am getting: Error: Unexpected request: GET my-directive.html No more request expected

Not sure what that means, it works in the web page...

LIVE DEMO: http://plnkr.co/edit/SrtwW21qcfUAM7mEj4A5?p=preview

directiveSpec.js:

describe('Directive: myDirective', function() {

  beforeEach(module('myDirectiveModule'));

  var element;
  var scope;
  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
    element = angular.element('<my-directive something="thing"></my-directive>');
    element = $compile(element)(scope);
    scope.thing = {name: 'My thing'};
    scope.$digest();
  }));

   it('should update the rendered text when scope changes', function() {
    scope.thing.name = 'My new thing';
    scope.$digest();
    var h1 = element.find('h1');
    expect(h1.text()).toBe('My new thing');
  });
});

app.js:

angular.module('myDirectiveModule', [])
  .directive('myDirective', function() {
    return {
      bindToController: true,
      controller: function() {
        var vm = this;
        vm.doSomething = doSomething;

        function doSomething() {
          vm.something.name = 'Do something';
        }
      },
      controllerAs: 'vm',
      restrict: 'E',
      scope: {
        something: '='
      },
      templateUrl: 'my-directive.html'
    };
  })
  .controller('DirCtrl', ['$scope', function() {
    this.getName = 'Hello world!';
  }]);

How do I simply test a directive unit test?

Raulucco · Accepted Answer · 2015-12-09 09:42:21Z

1

You need to mock the template request. Because the directive has the templateUrl it try to make a get request, but the $http doesn't expect any request so it fails. You can mock the request with a response of yours or put the template into the template cache service.

  beforeEach(inject(function($rootScope, $compile, $templateCache) {
    $templateCache.put('my-directive.html','<h1 ng-click="vm.doSomething()">{{vm.something.name}}</h1>');
    scope = $rootScope.$new();
    element = angular.element('<my-directive something="thing"></my-directive>');
    element = $compile(element)(scope);
    scope.thing = {name: 'My thing'};
    scope.$digest();
  }));

Also on your it function call $apply and use $evalAsync. See my forked plunker.

edited Dec 9, 2015 at 9:42

answered Dec 9, 2015 at 8:29

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

red Over a year ago

But how do I get whatever <my-directive></my-directive> compiles?

Raulucco Over a year ago

Using the $compile service and then calling the $digest method

red Over a year ago

Didn't I do that in line 5 and line 7 of the code you posted?

Raulucco Over a year ago

Yes you did. But you asked ;-). The problem with the request is describe in the answer

red Over a year ago

Got it. Thank you. And by response of yours, you mean insert any data for the directive to work with/

|

Collectives™ on Stack Overflow

AngularJS - directive unit test nothing

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related