Wie kann ich Einheit isoliert Bereich in Direktive

Question

Einheit Ich versuche, eine einfache Direktive Einheit testen, aber die Variable im Bereich ist immer undefiniert.

Richtlinie Src Code:

.directive('ratingButton', ['$rootScope', 


function($rootScope) { 
     return { 
      restrict: "E", 
      replace: true, 
      template: '<button type="button" class="btn btn-circle" ng-class="getRatingClass()"></button>', 
      scope: { 
       buttonRating: "=" 
      }, 
      link: function(scope, elem, attr) { 
       scope.getRatingClass = function() { 
        if (!scope.buttonRating) 
         return ''; 
        else if (scope.buttonRating.toUpperCase() === 'GREEN') 
         return 'btn-success'; 
        else if (scope.buttonRating.toUpperCase() === 'YELLOW') 
         return 'btn-warning warning-text'; 
        else if (scope.buttonRating.toUpperCase() === 'RED') 
         return 'btn-danger'; 
        else if (scope.buttonRating.toUpperCase() === 'BLUE') 
         return 'btn-info'; 
       } 
      } 
     }; 
    }]) 

Test:

describe('Form Directive: ratingButton', function() { 

    // load the controller's module 
    beforeEach(module('dashboardApp')); 

    var scope, 
     element; 

    // Initialize the controller and a mock scope 
    beforeEach(inject(function($compile, $rootScope) { 
     scope = $rootScope.$new(); 

     //set our view html. 
     element = angular.element('<rating-button button-rating="green"></rating-button>'); 
     $compile(element)(scope); 
     scope.$digest(); 
    })); 

    it('should return appropriate class based on rating', function() { 
     //console.log(element.isolateScope()); 
     expect(element.isolateScope().buttonRating).toBe('green'); 
     expect(element.isolateScope().getRatingClass()).toBe('btn-success'); 

    }); 

}); 

ich ähnlichen Code in einer anderen Richtlinie Unit-Test verwendete ich, indem Werte durch das Element Attribute hatte und es funktionierte wie erwartet. Für diesen Test buttonRating ist immer undefined nicht sicher wohin von hier zu gehen (Ich bin ziemlich neu mit Jasmine/Karma)

Jede Hilfe wäre toll!

Answer 1

Anstatt die Zeichenfolge green festzulegen, legen Sie sie auf die Bereichsgrenze fest, wenn das Anweisungselement beim Start des Tests kompiliert wird. Andernfalls wird nach dem Wert der Eigenschaft scope mit dem Namen green im gebundenen Bereich gesucht, der in Ihrem Fall natürlich nicht definiert ist.

d.h scope.buttonRating = 'green';

und

angular.element('<rating-button button-rating="buttonRating"></rating-button>')

Versuchen:

// Initialize the controller and a mock scope 
    beforeEach(inject(function($compile, $rootScope) { 
     scope = $rootScope.$new(); 
     scope.buttonRating = 'green'; //<-- Here 
     //set our view html. 
     element = angular.element('<rating-button button-rating="buttonRating"></rating-button>'); 
     $compile(element)(scope); 
     scope.$digest(); 
    })); 

    it('should return appropriate class based on rating', function() { 
     expect(element.isolateScope().buttonRating).toBe('green'); 
     expect(element.isolateScope().getRatingClass()).toBe('btn-success'); 

    }); 

Plnkr