Angularjs unit test isolated scope value

Question

I have a directive that look like this:

angular.directive('myDirective', ['$compile', function($compile){
    return {
        link: function(scope, element, attr, controller) {
            function update(){
                if(scope.value == "A"){
                    scope.desc = "Welcome";
                }else{
                    scope.desc = "Not Welcome";
                }
            }

            scope.$watch('value', function(newValue, oldValue) {
                update();
            },true);

            update();
        }
    };
}]);

How can I write an unit test that can verify the changes in scope.value will return the correct scope.desc?

score 2 · Accepted Answer · edited May 23 '17 at 12:28

Based on info from this question:

// inject $rootScope and $compile in beforeEach
it('should change desc on value change', function() {
  var scope = $rootScope.$new();
  var element = angular.element('<my-directive></my-directive>');
  element = $compile(element)(scope);
  $rootScope.$digest();
  var directiveScope = element.scope();
  expect(directiveScope.desc).toEqual("Not Welcome");
  directiveScope.value = 'A';
  $rootScope.$digest();
  epxect(directiveScope.desc).toEqual("Welcome");
});

Fiddle

Angularjs unit test isolated scope value

1 Answers1