Question

我正在使用将使用AngularJS的Rails 3.2应用程序。我可以让Angular做我需要的东西，但是我很难搞清楚如何测试我正在做的事情。我正在使用guard-jasmine来使用PhantomJS运行Jasmine规范。

这是（相关的）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的新手，所以如果有关于我没有遵循的命名空间，模块等的最佳实践，我们将非常感谢指导。

如何让测试工作？

Answer 1

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

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

以下是一些提示：

请务必告诉测试运动员您使用beforeEach(module('myModule'))测试的模块。
如果您的指令中有外部templateUrls，您将需要以某种方式为测试运行器预先缓存它们。测试运行器不能异步GET模板。在bootstrap中，我们通过构建步骤将模板注入到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()结束所有待处理的超时。
为了测试承诺，请记住，当您解决承诺时，不会调用其then回调直到下一个摘要。所以在测试中你必须做很多事情：deferred.resolve(); scope.$apply();。

您可以在the bootstrap repo中找到针对不同复杂程度的指令的测试。只需查看src/{directiveName}/test/。

Answer 2

Angular Test Patterns可能对您有帮助，coffeescript和javascript都有例子。

以下是验证example directive为rendering the expected output的测试模式。

如何测试AngularJS指令

2 个答案: