javascript - Testing angularjs directive (template not updated in tests after changing an isolated scope var) -

i'm creating angularjs component (will) provides checkbox list directive filtering, sorting, toggling options, scrolling, etc... once finished. should people deal long checkbox lists.

i'm trying test order label or id feature template not reflect model changes after $digest or $apply call. tried solve no way.

here directive definition:

angular.module('angularjssmartcheckboxapp')   .directive('smartcheckbox', [function () {     return {       templateurl: 'views/smartcheckbox.html',       restrict: 'e',       replace: true,       scope: {model: '='},       controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {         // todo       }]     };   }]); 

usage:

<smart-checkbox model="smartlist" /> 

where smartlist is:

$scope.smartlist = [     {id: '001', label: 'first item'},     {id: '002', label: 'second item'},     {id: 'z01', label: 'another item'}   ]; 

here template:

... <div class="input-group ordercontrols">   order options:   <label class="radio-inline">     <input type="radio" value="label" ng-model="orderby"> label   </label>   <label class="radio-inline">     <input type="radio" value="id" ng-model="orderby"> id   </label>   <label>     <input type="checkbox" ng-model="reverse" />     reverse   </label> </div>  <div>   <div class="checkbox widgetcontrols" ng-repeat="elem in model | filter:{$:filter} | orderby: orderby:reverse">     <label>       <input class="smart" type="checkbox" ng-model="elem.value" value="{{elem.value || false}}" />       <span class="itemid">[{{elem.id}}]</span> {{elem.label}}     </label>   </div> </div> 

here can find failing test 'labels order (reverse)':

describe('directive: smartcheckbox', function () {    // load directive's module   beforeeach(module('angularjssmartcheckboxapp', 'views/smartcheckbox.html'));    var element,     $rootscope,     $compile,     scope;    beforeeach(inject(function (_$rootscope_, _$compile_) {     $rootscope = _$rootscope_;     scope = $rootscope.$new();     $compile = _$compile_;     $rootscope.model = [         {id: '001', label:'first item'},         {id: '002', label:'second item'}     ];      element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope);     $rootscope.$apply();    }));    it('labels order (reverse)', function () {      scope.reverse = true;     scope.orderby = 'label';     scope.$apply();      expect(element.children().eq(3).find('label').eq(0).find('span').text()).tobe('[002]');   }); }); 

repository link: https://github.com/davidemoro/angularjs-smartcheckbox

ps: if open browser reordering works fine, suppose there of wrong in test method.

what problem? thank in advance

how solved it:

-    element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope); +    $element = angular.element('<smart-checkbox model="model"></smart-checkbox>'); +    element = $compile($element)(scope);  ...     it('labels order (reverse)', function () {  -    scope.reverse = true; -    scope.orderby = 'label'; -    scope.$apply(); +    $element.isolatescope().reverse = true; +    $element.isolatescope().orderby = 'label'; +    $element.isolatescope().$apply();  -    expect(element.children().eq(3).find('label').eq(0).find('span').text()).tobe('[002]'); +    expect($element.children().eq(3).find('label').eq(0).find('span').text()).tobe('[002]');    }); 

since directive uses isolated scope, need use .isolatescope method. hope might other people :)

update: i've writed blog post based on answer. see http://davidemoro.blogspot.com/2014/02/testing-angularjs-directives-with_13.html