Wywoływanie sterownika szyderczego w dyrektywie kątowej Test jednostkowy

Question

Jestem jednostką testującą dyrektywę kątową i chciałabym w jakiś sposób sfabrykować lub odgadnąć instancję nazwanego kontrolera w teście jednostkowym.

Więc najpierw przypuszczam do jakiegoś kodu ...

'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 -->' 
     }; 

    }); 

to jedna dyrektywa próbka że będę testów jednostkowych, ważne jest, aby zabrać ze jest to nazwane kontroler.

Więc w moim badanej jednostki

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

    }); 
}); 

można zobaczyć na publikację modułów 3 - dyrektywy, regulator a trzeci stałych. Jest to określane przez kontroler jako zależność, więc aby przenieść to do testu jednostkowego, muszę pobrać zależność lub, w znacznie gorszych przypadkach, zależność od kontrolera. Ale ponieważ nie jestem jednostką testującą funkcjonalność kontrolera w teście jednostki dyrektorskiej, wydaje się to zbędne i rozdęte w kodzie przez włączenie modułów. Idealnie chciałbym dołączyć tylko moduł, który testuję jednostkowo.

module('App.Directives.BreadCrumbs'); 

i nie (moduły dodane do zilustrowania mój punkt więcej)

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 

Kiedy jednostka kontrolery testowe możemy kpić usług, które są przekazywane w całości lub za pomocą szpiegów jaśminu. Czy możemy dokonać tego samego w testach jednostkowych dyrektyw, więc nie muszę podążać ścieżką zależności?

Answer 1

Można tworzyć mocks w bloku konfiguracja modułu za pomocą $controllerProvider.register() dla kontrolerów, $provide.provider(), $provide.factory(), $provide.service() i $provide.value() dla dostawców, fabryk i usług:

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() {} 
      } 
     }); 
    }); 
}); 

Raz to zrobić , Angular wstrzyknie ci fałszywy kontroler BreadCrumbsController do dyrektywy kxBreadcrumbs. W ten sposób nie trzeba uwzględniać rzeczywistego kontrolera i jego zależności w teście jednostki.

Więcej informacji można znaleźć w oficjalnej dokumentacji kątowych na:

• $provide
• $controllerProvider