isolateScope() returning undefined when testing angular directive

Question

Using Angular v1.2.25 and rails asset pipeline, I am attempting to test that a directive's isolate scope has indeed been updated. Since isolateScope() returns undefined I am getting expected undefined to be defined ...'

describe("cool directive", function() {

  beforeEach(module('necessaryModule'));

  var scope, $rootScope, $compile, elem,
    baseElement = '<div auto="mock_a" inc="mock_p" method="mock_m" reset-method="mock_r"></div>';

  beforeEach(inject(function( _$rootScope_, _$compile_, _$httpBackend_, $http){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    scope = $rootScope.$new();
    angular.extend(scope, {
      mock_a: [
        {name: "example1"},
        {name: "example2"}
      ],  
      mock_m: function(){
        return $http.get('/mockBackend', {
          params:{
            page:  scope.mockPage
          }   
        }); 
      },  
      mock_r: function() {
        scope.page = 1;
        scope.list = []; 
        load();
      },  
      mock_p: 1
    }); 
    $httpListGet = _$httpBackend_;
    $httpListGet.whenPOST('/api/something').respond({});
    $httpListGet.whenGET('/mockBackend').respond({name: "example3"});
    $httpListGet.whenGET('/mockBackend?page=1').respond({name: "example3"});
    $httpListGet.whenGET('/mockBackend?page=2').respond({name: "example4"});
  }));

    var create = function() {
      elem = angular.element(baseElement);
      compiledElement = $compile(elem)(scope);
      elem.scope().$apply();
      return compiledElement;
    };  

  it("has 'list' defined", function() {
    var compiledElem = create();
    var isolateElemScope = compiledElem.isolateScope();
    $rootScope.$apply();
    console.log('isolateElemScope',isolateElemScope);
    expect(isolateElemScope.list).toBeDefined();
  });

I'm expecting the directives scope to be accessible and testable, but I'm getting undefined when I test for it. Thank you.

just at first glance, I'd say get rid of elem.scope().$apply(); from the create function and change $rootScope.$apply() to scope.$digest(). — dcodesmith
– dcodesmith, Commented Dec 21, 2014 at 3:54

guy mograbi · Accepted Answer · 2014-12-28 07:00:40Z

12

to get the isolateScope I use the following code

compiledElem.children().scope()

This is because that most directives don't use replace, which means the directive tag is on the page, and the directive implementation is added as children of that tag. In that case, the isolate scope will belong to the children.

Even if that is not the case, the snippet should still work - as the children will share the parent's scope..

The only case it won't work, is an extreme scenario where you have 2 nested directives, where the inner one uses replace. but I never saw this.

answered Dec 28, 2014 at 7:00

guy mograbi

28.9k17 gold badges92 silver badges128 bronze badges

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

1 Comment

sjt003 Over a year ago

you are completely correct about the nested directives.

I V · Accepted Answer · 2016-10-11 18:38:38Z

0

Other people coming to this page may have added the test to jasmine but forgotten to add a reference to their directive.

edited Oct 11, 2016 at 18:38

answered Sep 8, 2015 at 21:26

I V

8871 gold badge7 silver badges27 bronze badges

1 Comment

ricko zoe Over a year ago

How to do it please ?

Collectives™ on Stack Overflow

isolateScope() returning undefined when testing angular directive

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related