2012-10-05 21 views
44

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.Cómo probar las directivas AngularJS

Aquí es el (relevante) html:

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

El javascript (en CoffeeScript) parece:

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 se pretende 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') 

Como acotación al margen, soy nuevo en AngularJS, así que si hay algún mejores prácticas con respecto a los espacios de nombre, módulos, etc., que no estoy siguiendo, orientación sería apreciada.

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

Respuesta

68

Here's how alert directive is tested in angular-ui/bootstrap.

Here's another simple set of tests, for the buttons directive.

Aquí hay algunos consejos:

  • Asegúrese de decirle al corredor de prueba lo que el módulo que se está probando con beforeEach(module('myModule')).

  • Si tiene templateUrls externos en sus directivas, querrá de alguna manera almacenarlos previamente en la memoria caché para el corredor de prueba. El corredor de prueba no puede asincrónicamente plantillas GET. 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 de grunt grunt-html2js.

  • En sus pruebas, use el ayudante inject en un 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() - Obtendrá el elemento secundario (la directiva misma) y obtendrá el alcance para ese .

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

  • Para la prueba de promesas, recuerda que cuando se resuelve una promesa, se no llamar a sus then devoluciones de llamada hasta el siguiente resumen. Entonces en las pruebas tienes que hacer esto mucho: deferred.resolve(); scope.$apply();.

puede encontrar pruebas de directivas de diversa complejidad en the bootstrap repo. Solo mira en src/{directiveName}/test/.

+0

Dado que Plunker ya no parece funcionar, ¿tiene una versión funcional? La documentación sobre las directivas de prueba con Jasmine para AngularJS es súper mala y perjudicial para un ejemplo como el del plunker. – Philipp

+1

OK, lo edité para dar enlaces a pruebas reales :-) –

+0

¿Estás seguro de myElement.children(). Scope()? No funciona para mí = ( -> UPD: tuve que hacer $ scope. $ Apply() –

Cuestiones relacionadas