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, Dec 21 '14 at 03:54

score 12 · Accepted Answer · answered Dec 28 '14 at 07:00

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.

you are completely correct about the nested directives. – sjt003 Dec 29 '14 at 15:04 — sjt003, Dec 29 '14 at 15:04

Ivy · Answer 2 · 2016-10-11T18:38:38.933

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 '16 at 18:38

answered Sep 08 '15 at 21:26

Ivy

887
1
7
25

How to do it please ? – ricko zoe Apr 30 '17 at 13:30

isolateScope() returning undefined when testing angular directive

2 Answers2

Linked