Alay Denetleyicisinin Açısal Direktif Birim Testinde Örneklenmesi

Question

Angular direktifini test eden bir ünitiyim ve bir şekilde adlandırılan denetleyicinin ünite testinde başlatılması için bir şekilde taklit edilmeli veya takılmak istiyorum.

Bu nedenle ilk önce

'use strict'; 

angular.module('App.Directives.BreadCrumbs', []) 

    .directive('kxBreadcrumbs', function() { 
     return { 
      restrict: 'E', 
      controller: 'BreadCrumbsController', 
      template: 
       '<!-- Breadcrumbs Directive HTML -->' + 

       '<ol class="breadcrumb">' + 
       ' <li ng-repeat="crumb in crumbPath">' + 
       '  <a ng-class="{true: \'disable\', false: \'\'}[crumb.last]" href="{{crumb.href}}" ng-click="updateCrumb(crumb.name)">{{crumb.name}}</a>' + 
       ' </li>' + 
       '</ol>' + 

       '<!-- End of Breadcrumbs Driective HTML -->' 
     }; 

    }); 

Bu benim birim test, önemli olan bu mesafede almaya olurdu bir örnek yönergesi adlı kontrolör mesafesindedir ... bazı kod üzerinde varsayalım. yönergesini, kontrolör ve üçüncü bir sabitleri -

Yani benim birim testi

'use strict'; 

describe('Directives: Breadcrumbs', function() { 

    var//iable declarations 
     elm, 
     scope, 
     $rootScope 
    ; 

    beforeEach(function() { 
     module('App.Directives.BreadCrumbs'); 
     module('App.Controllers.BreadCrumbs'); 
     module('App.Constants'); // <--- Comes from the controller dependancy 
    }); 


    beforeEach(inject(function (_$rootScope_, $compile) { 
     $rootScope = _$rootScope_; 
     scope = $rootScope.$new(); 

     elm = angular.element('<kx-breadcrumbs></kx-breadcrumbs>'); 
     $compile(elm)(scope); 
     scope.$apply(); 
    })); 

    it('Should create the breadcrumbs template', function() { 
     scope.crumbPath = [{name: 'home', href: '/'},{name: 'coffee', href: '/coffee'},{name: 'milk', href: '/milk'}]; 
     scope.$apply(); 
     var listItem = $(elm).find('li'); 
     expect(listItem.length).toBe(3); 
     expect($(listItem).text()).toContain('home'); 
     expect($(listItem).text()).toContain('coffee'); 
     expect($(listItem).text()).toContain('milk'); 

    }); 
}); 

içinde 3 modüllerin eklenmesi görebilirsiniz. Bu, kontrolör tarafından bir bağımlılık olarak adlandırılır, dolayısıyla bunu birim testine çekmek için bağımlılığı çekmem gerekiyor veya çok daha kötü durumlarda kontrolörün bağımlılıkları. Ancak, direktif birim testinde kontrolörün fonksiyonelliğini test etmediğim için, bu modüllerin eklenmesiyle gereksiz ve kod şişmesi gibi görünmektedir. İdeal olarak sadece birim test ettiğim modülü dahil etmek istiyorum.

module('App.Directives.BreadCrumbs'); 

değil biz birim test kontrolörleri biz ya tamamen ya da yasemin casuslar kullanarak geçirilen hizmetler alay ne zaman

module('App.Directives.BreadCrumbs'); 
    module('App.Controllers.BreadCrumbs'); 
    module('App.Constants'); // <--- Comes from the controller dependancy 
    module('App.Service.SomeService'); // <--- Comes from the controller dependancy 
    module('App.Service.SomeOtherService'); // <--- Comes from the SomeService dependancy 

(modüller daha benim açımdan örnek eklenir). Direktiflerin birim testinde aynı soruyu başarabilir miyiz? Dependanlık izini takip etmek zorunda değilim.

Answer 1

Sen sağlayıcıları, fabrikalar ve hizmetler için denetleyicileri için $controllerProvider.register(), $provide.provider(), $provide.factory(), $provide.service() ve $provide.value() kullanarak modül yapılandırma bloğunda mocks oluşturabilirsiniz: Bunu yaptıktan sonra JavaScript

beforeEach(function() { 
    module('App.Directives.BreadCrumbs', function($provide, $controllerProvider) { 
     $controllerProvider.register('BreadCrumbsController', function($scope) { 
      // Controller Mock 
     }); 
     $provide.factory('someService', function() { 
      // Service/Factory Mock 
      return { 
       doSomething: function() {} 
      } 
     }); 
    }); 
}); 

Angular, sahte BreadCrumbsController denetleyicinizi kxBreadcrumbs yönergesine enjekte edecektir. Bu şekilde, gerçek denetleyiciyi ve bağımlılıkları birim sınamaya dahil etmeniz gerekmez.

• $provide
• $controllerProvider

: Daha fazla bilgi için

üzerine açısal resmi belgelere bakın