Làm thế nào tôi có thể kiểm tra đơn vị phạm vi cô lập trong chỉ thị

Question

Tôi đang cố gắng để đơn vị kiểm tra một chỉ thị đơn giản nhưng biến trong phạm vi luôn luôn là không xác định.

Chỉ 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'); 

    }); 

}); 

tôi đã sử dụng mã tương tự như trong một thử nghiệm đơn vị chỉ thị tôi đã bằng cách thông qua các giá trị thông qua các thuộc tính nguyên tố và nó làm việc như mong đợi. Đối với nút kiểm tra này, luôn luôn không xác định vị trí không chắc chắn nơi cần đi từ đây (Tôi khá mới với Jasmine/Karma)

Bất kỳ trợ giúp nào sẽ tuyệt vời!

Answer 1

Thay vì đặt chuỗi green đặt nó trên phạm vi bị ràng buộc khi phần tử chỉ thị được biên dịch khi bạn khởi động thử nghiệm. Nếu không, nó sẽ tìm giá trị của thuộc tính phạm vi với tên green trên phạm vi bị ràng buộc và tất nhiên là không được xác định trong trường hợp của bạn.

tức là scope.buttonRating = 'green';

và

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

Hãy thử:

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