personalizadas directivas data crear angularjs testing angularjs-directive

data - Cómo probar las directivas AngularJS



directivas personalizadas angularjs (2)

Estoy trabajando en una aplicación de Rails 3.2 que utilizará AngularJS. Puedo hacer que Angular haga lo que necesito, pero estoy teniendo un momento muy difícil para averiguar cómo probar lo que estoy haciendo. Estoy usando guardia-jazmín para ejecutar las especificaciones de Jasmine usando PhantomJS.

Aquí está el html (relevante):

<html id="ng-app" ng-app="app"> <div id="directive-element" class="directive-element"> </div> </html>

El javascript (en coffeescript) se ve así:

window.Project = App: angular.module(''app'', []) Directive: {} Project.Directive.DirectiveElement = -> restrict: ''C'' link: (scope, element, attrs) -> element.html ''hello world'' Project.App.directive ''directiveElement'', Project.Directive.DirectiveElement

El código anterior hace exactamente lo que está destinado a hacer. Las pruebas son el problema. No puedo hacer que trabajen en absoluto. Esto es una cosa que había intentado. Publicar esto es principalmente para comenzar la conversación en alguna parte.

describe ''App.Directive.DirectiveElement'', -> it ''updates directive-element'', -> inject ($compile, $rootScope) -> element = $compile(''<div id="app" ng-app="app"><div id="directive''element" class="directive-element"></div></div>'') expect(element.text()).toEqual(''hello world'')

Por otro lado, soy nuevo en AngularJS, por lo que si hay algunas mejores prácticas con respecto al espacio de nombres, los módulos, etc. que no sigo, la guía sería apreciada.

¿Cómo obtengo una prueba para que esto funcione?

Aquí se muestra cómo se prueba la directiva de alerta en angular-ui / bootstrap .

Aquí hay otro conjunto simple de pruebas, para la directiva de botones.

Aquí hay algunos consejos:

  • Asegúrese de decirle al corredor de prueba con qué módulo está probando beforeEach(module(''myModule'')) .

  • Si tiene templateUrls externos en sus directivas, querrá de alguna manera precachearlos para el corredor de prueba. El corredor de prueba no puede obtener plantillas de manera asincrónica. En bootstrap, inyectamos las plantillas en javascript con un paso de compilación y hacemos que cada plantilla sea un módulo. Usamos la tarea ronco grunt-html2js .

  • En sus pruebas, use el asistente de beforeEach en beforeEach para inyectar $ compile y $ rootScope y cualquier otro servicio que necesite. Use var myScope = $rootScope.$new() para crear un nuevo alcance para cada prueba. Puede hacer var myElement = $compile(''<my-directive></my-directive>'')(myScope); para crear una instancia de su directiva y tener acceso a su elemento.

  • Si una directiva crea su propio alcance y desea probar en su contra, puede obtener acceso al alcance de esa directiva haciendo var directiveScope = myElement.children().scope() el hijo del elemento (la directiva misma), y obtener el alcance para eso.

  • Para los tiempos de espera de prueba, puede usar $timeout.flush() para finalizar todos los tiempos de espera pendientes.

  • Para probar las promesas, recuerde que cuando resuelve una promesa, no llamará a sus callbacks hasta el próximo resumen. Por lo tanto, en las pruebas debe hacer mucho esto: deferred.resolve(); scope.$apply(); deferred.resolve(); scope.$apply(); .

Puede encontrar pruebas para directivas de complejidad variable en el repositorio bootstrap . Solo mira en src/{directiveName}/test/ .