Se Moquant De Contrôleur De L'Instanciation Angulaire De La Directive De L'Unité De Test

Question

Je suis de tests unitaires Angulaire de la directive et voudrait se moquer ou talon d'une certaine façon l'instanciation de l'nommé contrôleur de l'appareil de test.

Alors d'abord je suppose que sur un peu de code...

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

    });

C'est un exemple de la directive que je test unitaire, la chose la plus importante à tirer de cette est nommé contrôleur.

Donc, dans mon test unitaire

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

    });
});

Vous pouvez voir l'inclusion des 3 modules de la directive, le contrôleur et le troisième l'une des constantes.C'est référencée par le contrôleur comme une dépendance de la sorte pour ce pull dans l'appareil de test, j'ai besoin de tirer à la dépendance ou dans le pire des cas, les dépendances à partir du contrôleur.Mais comme je ne suis pas de tests unitaires de la fonctionnalité du contrôleur dans la directive de l'unité de test, il semble redondant et les ballonnements de code grâce à l'inclusion de modules.Idéalement, je voudrais seulement inclure le module que je suis de tests unitaires.

  module('App.Directives.BreadCrumbs');

et pas (modules ajoutés pour illustrer mon point de plus)

  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

Lorsque nous avons unité des contrôleurs de test on peut se moquer de services qui sont passées en totalité ou en utilisant le jasmin des espions.Peut-on faire la même chose de sorta dans l'unité de test des directives, donc je n'ai pas à suivre le sentier de dépendance?

Answer 1

Vous pouvez créer des simulacres dans le module bloc de configuration en utilisant $controllerProvider.register() pour les contrôleurs, $provide.provider(), $provide.factory(), $provide.service() et $provide.value() pour les fournisseurs, les usines et les services suivants:

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

Une fois que vous le faites, Angulaire va injecter de votre maquette BreadCrumbsController contrôleur en kxBreadcrumbs la directive.De cette façon, vous n'avez pas besoin d'inclure contrôleur réel et ses dépendances dans l'appareil de test.

Pour plus d'informations, voir Angulaire de la documentation officielle sur:

• $fournir
• $controllerProvider