Comment tester les directives AngularJS

Question

Je travaille sur une application Rails 3.2 qui utilisera AngularJS. Je peux obtenir Angular pour faire ce dont j'ai besoin, mais j'ai beaucoup de mal à comprendre comment tester ce que je fais. J'utilise guard-jasmine pour exécuter les spécifications Jasmine en utilisant PhantomJS.

Voici le html (pertinent) :

Le javascript (en coffeescript) ressemble à ceci :

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

Le code ci-dessus fait exactement ce qu'il est censé faire. Les tests posent problème. Je n'arrive pas du tout à les faire fonctionner. Voici une chose que j'avais essayée. Poster cela est surtout pour commencer la conversation quelque part.

describe 'App.Directive.DirectiveElement', ->
  it 'met à jour directive-element', ->
    inject ($compile, $rootScope) ->
      element = $compile('')
      expect(element.text()).toEqual('hello world')

À titre informatif, je suis nouveau dans AngularJS, donc si vous avez des bonnes pratiques concernant le nommage, les modules, etc. que je ne suis pas, des conseils seraient appréciés.

Comment puis-je faire fonctionner un test pour cela ?

Answer 1

Voici comment la directive alerte est testée dans angular-ui/bootstrap.

Voici un autre ensemble simple de tests, pour la directive des boutons.

Voici quelques conseils :

• Assurez-vous d'indiquer au lanceur de tests quel module vous testez avec beforeEach(module('monModule')).

• Si vous avez des templateUrls externes dans vos directives, vous voudrez d'une manière ou d'une autre les précharger pour le lanceur de tests. Le lanceur de tests ne peut pas obtenir de manière asynchrone les templates avec un GET. Dans bootstrap, nous injectons les templates dans le javascript avec une étape de génération, et faisons de chaque template un module. Nous utilisons la tâche grunt grunt-html2js.

• Dans vos tests, utilisez l'aide de inject dans un beforeEach pour injecter $compile et $rootScope et tout autre service dont vous aurez besoin. Utilisez var myScope = $rootScope.$new() pour créer un nouveau scope à chaque test. Vous pouvez faire var myElement = $compile('')(myScope); pour créer une instance de votre directive, et avoir accès à son élément.

• Si une directive crée son propre scope et que vous voulez tester contre celui-ci, vous pouvez accéder au scope de cette directive en faisant var directiveScope = myElement.children().scope() - Cela récupérera l'enfant de l'élément (la directive elle-même) et obtiendra le scope pour celui-ci.

• Pour tester les timeouts, vous pouvez utiliser $timeout.flush() pour terminer tous les timeouts en attente.

• Pour tester les promesses, rappelez-vous que lorsque vous résolvez une promesse, elle n'appellera pas ses callbacks then jusqu'au prochain digest. Ainsi, dans les tests, vous devez faire cela souvent : deferred.resolve(); scope.$apply();.

Vous pouvez trouver des tests pour des directives de différentes complexités dans le dépôt de bootstrap. Il suffit de regarder dans src/{nomDeLaDirective}/test/.

Answer 2

Angular Test Patterns peut vous aider, il y a des exemples à la fois en coffeescript et en javascript.

Voici un pattern de test pour vérifier que la directive exemple est en train de rendre la sortie attendue.