Burlándose De Controlador De La Creación De Instancias Angular De La Directiva De La Prueba De Unidad

Question

Estoy de pruebas de unidad Angular directiva y quisiera burlarse o auxiliar en cierto modo, la creación de instancias de el nombre del controlador en la unidad de prueba.

Así que lo primero supongo que en algún código...

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

    });

Esta es una muestra de la directiva que me gustaría unidad de prueba, la cosa importante es el denominado controlador.

Así que en mi unidad de prueba

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

    });
});

Usted puede ver la inclusión de los 3 módulos de la directiva, el controlador y la tercera una de las constantes.Esta es la que hace referencia el controlador como una dependencia con el fin de sacar esta en la unidad de prueba que se necesita para tirar de la dependencia o en mucho peor de los casos la dependencia de la controladora.Pero como yo no soy de la unidad de pruebas de la funcionalidad del controlador en la directiva de la prueba de unidad, este parecer redundante y la hinchazón de código a través de la inclusión de módulos.Idealmente me gustaría incluir sólo el módulo que estoy de pruebas de unidad.

  module('App.Directives.BreadCrumbs');

y no (módulos añadido para ejemplificar mi punto más)

  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

Cuando nos de la unidad de prueba de controladores de nosotros puede burlarse de los servicios que se pasan, ya sea completamente o mediante el uso de jazmín espías.Podemos realizar el mismo sorta cosa en la prueba de unidad de las directivas, así que no tiene que seguir el sendero de dependencia?

Answer 1

Usted puede crear mocks en el módulo de configuración de bloque mediante el uso de $controllerProvider.register() para los controladores, $provide.provider(), $provide.factory(), $provide.service() y $provide.value() para los proveedores, fábricas y servicios:

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

Una vez que lo hace, Angular inyectará su maqueta BreadCrumbsController controlador en kxBreadcrumbs directiva.De esta manera usted no necesita incluir controlador real y dependencias en la prueba de unidad.

Para obtener más información, consulte Angular de la documentación oficial en:

• $proporcionan
• $controllerProvider