Testing an AngularJS directive with isolated scope

56 views Asked by At

I'm trying to understand how to write specs for directives, and especially how to access the isolate scope methods and attributes. I've been at it the whole morning and there's still something I don't get. Here's a very simple plunker of my attempts and the main things I've been doing to set my test suite up:

1. Create a scope with the attributes I'll pass to the directive

var scope = $rootScope.$new();
scope.daParam = "param handed to the directive";

2. Compile the directive with this scope,

element = $compile( "<my-directive param='daParam'></my-directive>" )( scope );
scope.$digest();

3. Retrieve the isolated scope of the compiled directive,

isolateScope = element.isolateScope();

4. Make some tests on what this isolated scope contains.

describe("compilation results", function()
{
  it("has the outer directive param", function() {
    // Pass
    expect( isolateScope.param ).toBeDefined();
  });

  it("has the inner scope methods", function() {
    // Doesn't pass
    expect( isolateScope.myMethod ).toBeDefined();
  });
});

But even though I can retrieve the isolated scope, this scope doesn't show any of the properties it should have (for instance a method I've declared in the directive's link method). It only shows the directive params but not the inside methods and attributes, as it is supposed to.

If any of you have a clue.. I've been reading about this a lot today, compared my code to code found on blog posts or SO answers, and can't see what I'm doing wrong.

0

There are 0 answers