mocking and testing directive with isolate scope containing ng-model

Question

I have a directive that I want to mock and test. The directive has ngModel set to double binding and transclude true

scope: {'ngModel': '=' } 

transclude: true

The spec that I am to test is pretty straightforward.

$el.find('input').prop('checked', $scope.ngModel);

Inside of my unit tests I created a beforeEach and created the directive to test ngModel=checked

   element = angular.element("<div *directiveName* ><div><input type=\"checkbox\" ngModel=checked /> </div></div>");

        $rootScope = $rootScope.$new();
        $compile(element)($rootScope);
        $rootScope.$digest(element);

        scope = element.isolateScope();

Usually I would set scope to equal element.scope(). I would call the isolateScope() method on this right?

I believed that since I am setting scope to equal the elements isolateScope() the spec should be as simple as

        expect(scope.ngModel).to.equal('checked');

However, scope.ngModel is undefined. I am not sure what I am missing when I create the directive or call the test. Any direction would be much appreciated.

Answer 1

You're not passing the value into the element correctly. It should be:

element = angular.element("<div *directiveName* ><div><input type=\"checkbox\" ng-model=checked /> </div></div>");

the change being ng-model instead of ngModel.

I would also recommend using a different name for your custom attribute in the directive because of the confusion with the built in angular directive.