Come prova di AngularJS direttive

Sto lavorando su una Rails 3.2 applicazione che utilizza AngularJS. Posso ottenere Angolare di fare quello che devo, ma sto avendo un momento difficile capire come prova di quello che sto facendo. Io sto usando il guard-gelsomino per l’esecuzione di Gelsomino specifiche utilizzando PhantomJS.

Qui è il (relativo) html:

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

Javascript (in coffeescript) si presenta come:

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

Il codice di cui sopra fa esattamente ciò che si vuole fare. Le prove sono il problema. Io non riesco a farli funzionare a tutti. Questa è una cosa che mi aveva cercato. La pubblicazione di questo è in gran parte solo per avviare la conversazione da qualche 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')

Come un a parte, sono nuovo di AngularJS, quindi se ci sono eventuali best practice in materia sorta di spazio di nomi, moduli, etc. che io non sto seguendo, l’orientamento sarebbe apprezzato.

Come faccio a fare un test per questo tipo di lavoro?

InformationsquelleAutor toadjamb | 2012-10-05

 

2 Replies
  1. 68

    Ecco come avviso direttiva è testato in angolare-ui/bootstrap.

    Ecco un’altra serie di semplici test, per i pulsanti direttiva.

    Qui ci sono un paio di suggerimenti:

    • Essere sicuri di dire al test runner quale modulo che si sta verificando con beforeEach(module('myModule')).

    • Se avete esterno templateUrls nelle vostre direttive, si desidera in qualche modo pre-cache di loro per il test runner. Il test runner non può in modo asincrono GET modelli. Nel bootstrap, iniettare i modelli in javascript con un passaggio di generazione, e fanno di ogni modello di modulo. Usiamo grunt-html2js grugnito attività.

    • Nei test, utilizzare il inject helper in un beforeEach per iniettare $compilare e $rootScope e gli altri servizi avrete bisogno. Utilizzare var myScope = $rootScope.$new() a creare un nuovo ambito per ogni test. Si può fare var myElement = $compile('<my-directive></my-directive>')(myScope); per creare un’istanza della direttiva, e di avere accesso al suo elemento.

    • Se una direttiva crea il proprio campo di applicazione e si desidera testare contro di esso, è possibile ottenere l’accesso a tale direttiva facendo var directiveScope = myElement.children().scope() – sarà l’elemento del bambino (direttiva stessa), e ottenere l’ambito per che.

    • Per il test di timeout, è possibile utilizzare $timeout.flush() alla fine tutti in attesa di timeout.

    • Per il test di promesse, ricordate che quando si risolvere una promessa, sarà non chiamare il suo then richiamate fino al prossimo digerire. Così, nel test che devi fare un sacco di tutto questo: deferred.resolve(); scope.$apply();.

    Si possono trovare i test per le direttive di varia complessità in il bootstrap repo. Basta guardare in src/{directiveName}/test/.

    • Dato plunker sembra non funzionare più, non si ha una versione funzionante? La documentazione sui test direttive di Gelsomino per AngularJS è super cattivo e male per un esempio come quello plunker.
    • OK, ho modificato per dare link a test reali 🙂
    • sono sicuro myElement.bambini().ambito di applicazione()? Io non lavoro per me =( -> UPD: ho avuto a che fare $scope.$apply()
    • Con voto positivo per il puntamento ad angolare-ui codice sorgente.

Lascia un commento