unit testing - tutorial - Unidad de prueba de una directiva que define un controlador en AngularJS

unit test angular 6

Question

Estoy tratando de probar una directiva usando Karma y Jasmine que hace un par de cosas. Primero es que usa una plantillaUrl y segundo que define un controlador. Puede que esta no sea la terminología correcta, pero crea un controlador en su declaración. La aplicación Angular está configurada para que cada unidad esté contenida dentro de su propio módulo. Por ejemplo, todas las directivas se incluyen en el módulo app.directive, todos los controladores están contenidos en app.controller y todos los servicios están contenidos en app.service, etc.

Para complicar aún más las cosas, el controlador que se define dentro de esta directiva tiene una única dependencia y contiene una función que realiza una solicitud $ http para establecer un valor en el $ scope. Sé que puedo simular esta dependencia usando $ httpBackend mock para simular la llamada $ http y devolver el objeto adecuado a la llamada de esta función. He hecho esto varias veces en las otras pruebas de unidad que he creado, y tengo un buen conocimiento de este concepto.

El siguiente código está escrito en CoffeeScript.

Aquí está mi directiva:

    angular.module(''app.directive'')
      .directive ''exampleDirective'', [() ->
        restrict: ''A''
        templateUrl: ''partials/view.html''
        scope: true
        controller: [''$scope'', ''Service'', ($scope, Service) ->
          $scope.model = {}
          $scope.model.value_one = 1

          # Call the dependency
          Service.getValue()
            .success (data) ->
              $scope.model.value_two = data
            .error ->
              $scope.model.value_two = 0
        ]
      ]

Aquí está el servicio de dependencia:

    angular.module("app.service")
      .factory ''Service'', [''$http'', ($http) ->

      getValue: () ->
        options.method = "GET"
        options.url = "example/fetch"

        $http _.defaults(options)

Aquí está la vista:

    <div>
      {{model.value_one}} {{model.value_two}}
    </div>

He simplificado esto bastante, ya que mi objetivo es solo entender cómo conectar esto, puedo tomarlo desde allí. La razón por la que lo estoy estructurando de esta manera es porque inicialmente no creé esto. Estoy trabajando en escribir pruebas para un proyecto existente y no tengo la capacidad de configurarlo de ninguna otra manera. Hice un intento de escribir la prueba, pero no puedo hacer que haga lo que quiero.

Quiero probar para ver si los valores están vinculados a la vista y, si es posible, también probar para ver si el controlador está creando los valores correctamente.

Aquí está lo que tengo:

    ''use strict''

    describe "the exampleDirective Directive", ->

      beforeEach module("app.directive")
      beforeEach module("app/partials/view.html")

      ServiceMock = {
        getValue : () ->

        options.method = "GET"
        options.url = "example/fetch"

        $http _.defaults(options)
      }

     #use the mock instead of the service
     beforeEach module ($provide) ->
       $provide.value "Service", ServiceMock
       return

     $httpBackend = null
     scope = null
     elem = null

     beforeEach inject ($compile, $rootScope, $injector) ->

     # get httpBackend object
     $httpBackend = $injector.get("$httpBackend")
     $httpBackend.whenGET("example/fetch").respond(200, "it works")

     #set up the scope
     scope = $rootScope

     #create and compile directive
     elem = angular.element(''<example-directive></example-directive>'')
     $compile(elem)(scope)
     scope.$digest()

No sé qué tan cerca estoy, o si esto es correcto. Quiero poder afirmar que los valores están vinculados a la vista correctamente. He usado el ejemplo de Vojtajina para configurar html2js en mi archivo karma.js para que pueda capturar las vistas. He investigado mucho para encontrar la respuesta, pero necesito ayuda. Ojalá un programador más sabio que yo pueda orientarme en la dirección correcta. Gracias.

Answer 1

Cree el elemento en karma, luego use la función .controller() con el nombre de su directiva para tomar el controlador. Para su ejemplo, reemplace las últimas dos líneas con estas:

elem = angular.element(''<div example-directive></div>'');
$compile(elem)($rootScope);
var controller = elem.controller(''exampleDirective'');

Tenga en cuenta que dado que definió su directiva, debe ser por atributo y no como un elemento. Tampoco estoy 100% seguro, pero no creo que necesites el scope.$digest; por lo general, solo pongo cualquier cosa que deba aplicarse en un scope.$apply(function() {}) Bloque scope.$apply(function() {}) .