javascript - unitarias - test unitarios angular 5

Controlador de burla Instanciación en la prueba unitaria directiva angular

Question

Estoy probando la unidad de una directiva Angular y me gustaría burlarme o rechazar de alguna manera la creación de instancias del controlador nombrado en la prueba de la unidad.

Así que 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 directiva de muestra que probaría por unidad, lo importante a quitar es el controlador nombrado.

Así que en mi prueba de unidad

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

    });
});

Puede ver la inclusión de los 3 módulos: la directiva, el controlador y el tercero las constantes. El controlador hace referencia a esto como una dependencia, por lo que para introducir esto en la prueba de la unidad, necesito controlar la dependencia o, en casos mucho peores, las dependencias del controlador. Pero como no estoy probando la funcionalidad del controlador en la prueba de la unidad directiva, esto parece redundante y abultado de código a través de la inclusión de módulos. Idealmente, me gustaría incluir solo el módulo que estoy probando.

  module(''App.Directives.BreadCrumbs'');

y no (módulos añadidos 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 realizamos pruebas unitarias de controladores, podemos simular servicios que se pasan completamente o mediante el uso de espías de jazmín. ¿Podemos lograr lo mismo en la prueba unitaria de directivas para que no tenga que seguir el rastro de dependencia?

Answer 1

Puede crear simulacros en el bloque de configuración del módulo utilizando $controllerProvider.register() para los controladores, $provide.provider() , $provide.factory() , $provide.service() y $provide.value() 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 haga, Angular inyectará su controlador kxBreadcrumbs en la directiva kxBreadcrumbs . De esta manera, no es necesario incluir un controlador real y sus dependencias en la prueba de unidad.

Para más información vea la documentación oficial de Angular sobre:

• $provide
• $controllerProvider