W jaki sposób mogę przetestować izolowany zakres w dyrektywie

Question

Próbuję przeprowadzić test jednostkowy prostej dyrektywy, ale zmienna w zakresie jest zawsze niezdefiniowana.

dyrektywa Kod Src:

.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'); 

    }); 

}); 

użyłem podobnego kodu w innym teście dyrektywa jednostkowej miałem przez przepuszczenie przez wartości atrybutów i działało zgodnie z oczekiwaniami. W tym teście buttonRating jest zawsze niezdefiniowany, nie jestem pewien, dokąd się udać (jestem całkiem nowy z Jasmine/Karma).

Każda pomoc będzie świetna!

Answer 1

Zamiast ustawiania ciągu znaków green ustaw go na granicy zakresu, gdy element dyrektywy zostanie skompilowany podczas uruchamiania testu. W przeciwnym razie będzie szukał wartości właściwości scope o nazwie green w zakresie powiązanym i która oczywiście nie jest zdefiniowana w twoim przypadku.

tj scope.buttonRating = 'green';

i

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

Spróbuj:

// 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