Как проверить директивы AngularJS

Я работаю над приложением Rails 3.2, которое будет использовать AngularJS. Я могу получить Angular, чтобы делать то, что мне нужно, но мне очень сложно выяснить, как проверить, что я делаю. Я использую guard-jasmine для запуска спецификаций Jasmine с помощью PhantomJS.

Вот (соответствующий) html:

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

javascript (в coffeescript) выглядит так:

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

Приведенный выше код делает именно то, что он должен делать. Испытания - проблема. Я не могу заставить их работать вообще. Это одна вещь, которую я пробовал. Проводка это в основном только для того, чтобы начать разговор где-нибудь.

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

В стороне, я новичок в AngularJS, поэтому, если есть какие-либо лучшие практики в отношении пространства имен, модулей и т.д., которые я не соблюдаю, руководство будет оценено.

Как мне получить тест для этого?

Ответы

Ответ 1

Здесь как предупреждающая директива тестируется в angular -ui/bootstrap.

Вот еще один простой набор тестов для директивы кнопок.

Вот несколько советов:

  • Обязательно сообщите тестировщику, какой модуль вы тестируете с помощью beforeEach(module('myModule')).

  • Если у вас есть внешние шаблоны в ваших директивах, вам нужно как-то предварительно кэшировать их для тестового бегуна. Тест-бегун не может асинхронно GET шаблонов. В бутстрапе мы вставляем шаблоны в javascript с шагом сборки и делаем каждый шаблон модулем. Мы используем grunt-html2js задачу grunt.

  • В ваших тестах используйте inject помощник в beforeEach для ввода $compile и $rootScope и любых других служб, которые вам понадобятся. Используйте var myScope = $rootScope.$new(), чтобы создать новую область для каждого теста. Вы можете сделать var myElement = $compile('<my-directive></my-directive>')(myScope);, чтобы создать экземпляр вашей директивы и получить доступ к ее элементу.

  • Если директива создает свою собственную область действия и вы хотите протестировать ее, вы можете получить доступ к этой области действия, выполнив var directiveScope = myElement.children().scope() - она ​​получит дочерний элемент (сама директива) и получит для этого.

  • Для тестирования тайм-аутов вы можете использовать $timeout.flush(), чтобы завершить все ожидания ожидания.

  • Для тестирования promises помните, что при решении обещания он будет не вызывать свои обратные вызовы then до следующего дайджеста. Поэтому в тестах вы должны сделать это много: deferred.resolve(); scope.$apply();.

Вы можете найти тесты для директив различной сложности в загрузочном репо. Просто загляните в src/{directiveName}/test/.