AngularJS/Karma - unit test function in directive

Question

How can I unit test a function inside a directive's link? I tried something like this, but not worked:

directive:

app.directive("hello", function(){
  return {
    link: function(scope){
      scope.hello = function(){
        return "hello";
      };
    }
  };
});

unit test:

describe("Hello directive", function(){
  var compile, scope;

  beforeEach(inject(function($compile, $rootScope){
    scope = $rootScope.$new();
    compile = $compile;
  }));

  it("should return hello", function(){
    var element = compile("<hello></hello>")(scope);
    expect(element.scope.hello()).toBe("hello");
  });
});

Define "not worked". Why use element.scope.hello() and not simply scope.hello()? Also, element.scope is a function returning the scope of the element, as documented: docs.angularjs.org/api/ng/function/angular.element. So it should be element.scope().hello(). — JB Nizet
– JB Nizet, Commented May 23, 2014 at 10:11
The result with element.scope().hello() is the same: "TypeError: 'undefined' is not a function (evaluating 'element.scope().hello()')" — Csati
– Csati, Commented May 23, 2014 at 10:29
Your directive is not applied, because its default restrict is 'A'. So you would need <div hello></div> for this directive to be applied. Set the restrict field to 'E' if you want the directive to be applied using <hello></hello> — JB Nizet
– JB Nizet, Commented May 23, 2014 at 10:44
That's correct. One more command failed in the test: beforeEach(module("myApp")); Now it's working. If you write it down in the answer, I will accept it. — Csati
– Csati, Commented May 23, 2014 at 11:46

user1364910 · Accepted Answer · 2015-07-19 09:01:39Z

2

You are missing a call to module.

The directives restrict looks just fine (nowadays) as the default is 'EA' as per the angular source for $compileProvider.

Note: Said default was introduced in angular-1.3.0(commit: 11f5ae, PR: 8321), prior to that version it was simply 'A'. Which would have been an issue in your case, seeing as how your question was posted in May'14.

I setup a fiddle showcasing your implementation with two changes;

A call to module, so as to load your directive definition.
Bumped the angular version to 1.3.0.

jsFiddle

yes I'm late to the party, but your question remains one of the top unanswered questions in [angularjs]+[unit-testing]. figured I'd have a go at changing that.

answered Jul 19, 2015 at 9:01

user1364910

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

Collectives™ on Stack Overflow

AngularJS/Karma - unit test function in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related