directive scope variables not accessible in jasmine test

angularjs, angularjs-directive, angularjs-scope, karma-jasmine

Solution

First note that you are calling the `resetButton` function with two arguments when it only accepts one. I fixed this in my example code. I also added the class `btn-primary` to the button element to make the passing of the test clearer.

Your directive is setting up two-way databinding between the outer scope and the isolated scope:

scope: {
  isDirty: '=',
  isSaving: '='
}

You should leverage this to modify the `isSaving` variable.

Add the `is-saving` attribute to your element:

elem = '<save-button is-saving="isSaving"></save-button>';

Then modify the `isSaving` property of the scope that was used when compiling (you also need to trigger the digest loop to make the watcher detect the change):

var el = createDirective();

scope.isSaving = true;
scope.$apply();

expect(el.hasClass('btn-primary')).toBeFalsy();

Demo: http://plnkr.co/edit/Fr08guUMIxTLYTY0wTW3?p=preview

If you don't want to add the `is-saving` attribute to your element and still want to modify the variable you need to retrieve the isolated scope:

var el = createDirective();

var isolatedScope = el.isolateScope();
isolatedScope.isSaving = true;
isolatedScope.$apply();

expect(el.hasClass('btn-primary')).toBeFalsy();

For this to work however you need to remove the two-way binding to `isSaving`:

scope: {
  isDirty: '='
}

Otherwise it would try to bind to something non-existing as there is no `is-saving` attribute on the element and you would get the following error:

Expression 'undefined' used with directive 'saveButton' is non-assignable! (https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&p1=saveButton)

Demo: http://plnkr.co/edit/Ud6nK2qYxzQMi6fXNw1t?p=preview

Problem

I have a directive like below: ``` angular.module('buttonModule', []).directive('saveButton', [ function () { function resetButton(element) { element.removeClass('btn-primary'); } return { restrict: 'E', replace: 'false', scope: { isSave: '=' }, template: '<button class="btn" href="#" style="margin-right:10px;" ng-disabled="!isSave">' + '</button>', link: function (scope, element) { console.log(scope.isSave); scope.$watch('isSave', function () { if (scope.isSave) { resetButton(scope, element); } }); } }; } ]); ``` and the jasmine test as below: ``` describe('Directives: saveButton', function() { var scope, compile; beforeEach(module('buttonModule')); beforeEach(inject(function($compile, $rootScope) { scope = $rootScope.$new(); compile = $compile; })); function createDirective() { var elem, compiledElem; elem = angular.element('<save-button></save-button>'); compiledElem = compile(elem)(scope); scope.$digest(); return compiledElem; } it('should set button clean', function() { var el = createDirective(); el.scope().isSaving = true; expect(el.hasClass('btn-primary')).toBeFalsy(); }); }); ``` The issue is the value of isSaving is not getting reflected in the directive and hence resetButton function is never called. How do i access the directive scope in my spec and change the variable values. i tried with isolateScope but the same issue persists.

Original source