如何测试AngularJS指令 [英] How to test AngularJS directives
问题描述
我工作的一个Rails 3.2的应用程序将使用AngularJS。我可以得到角做什么，我需要，但我有一个非常困难的时期搞清楚如何测试我在做什么。我使用的看守茉莉使用PhantomJS运行茉莉花规格。
I am working on a Rails 3.2 app that will be using AngularJS. I can get Angular to do what I need, but I am having a very difficult time figuring out how to test what I'm doing. I am using guard-jasmine to run Jasmine specs using PhantomJS.
下面是（相关）HTML：
Here is the (relevant) html:
<html id="ng-app" ng-app="app">
<div id="directive-element" class="directive-element">
</div>
</html>
JavaScript的（在CoffeeScript中）如下：
The javascript (in coffeescript) looks like:
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
上面的code不正是它打算做的事。试验都是问题。我不能让他们在所有的工作。这是一件事我试过。发布这通常只是从某个地方开始了谈话。
The code above does exactly what it is intended to do. The tests are the problem. I can't get them to work at all. This is one thing I had tried. Posting this is mostly just to start the conversation somewhere.
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，因此，如果有关于命名空间，我没有遵循任何的最佳做法，模块等，指导，将AP preciated。
As an aside, I am new to AngularJS, so if there are any best practices regarding namespacing, modules, etc. that I am not following, guidance would be appreciated.
我如何获得这个测试工作？
How do I get a test for this to work?
推荐答案
的这里的指令如何在警报角UI /引导的测试。
下面是一些提示：
-
请务必告诉测试运行哪些模块，您使用
测试beforeEach（模块（'Mymodule中'））。
如果您在您的指令有外部templateUrls，你会希望以某种方式pre-缓存他们的测试运行。测试运行不能异步 GET 模板。在引导，我们注入模板与一个构建步骤的JavaScript，使每个模板的模块。我们使用咕噜-html2js 咕噜任务。
If you have external templateUrls in your directives, you'll want to somehow pre-cache them for the test runner. The test runner can't asynchronously GET templates. In bootstrap, we inject the templates into the javascript with a build step, and make each template a module. We use grunt-html2js grunt task.
在您的测试中，使用注助手在 beforeEach 注入$编译和$ rootScope而你需要的任何其他服务。使用 VAR的MyScope = $ rootScope $新的（）以创建为每个测试一个新的范围。你可以做 VAR myElement = $编译（'＆LT;我的指导性和GT;＆LT; /我-指令＆GT;'）（的MyScope）; 以创建你的指令的情况下，并有机会获得它的元素。
In your tests, use the inject helper in a beforeEach to inject $compile and $rootScope and any other services you'll need. Use var myScope = $rootScope.$new() to create a fresh scope for each test. You can do var myElement = $compile('<my-directive></my-directive>')(myScope); to create an instance of your directive, and have access to its element.
如果一个指令，创建自己的范围，要对照它，你可以通过执行 VAR directiveScope = myElement.children（）获得该指令的范围。范围（） - 这将得到元素的子（指令本身），并获得范围为
If a directive creates its own scope and you want to test against it, you can get access to that directive's scope by doing var directiveScope = myElement.children().scope() - It will get the element's child (the directive itself), and get the scope for that.
有关测试超时，可以使用 $ timeout.flush（）结束所有挂起超时。
For testing timeouts, you can use $timeout.flush() to end all pending timeouts.
有关测试的承诺，记住，当你解决一个承诺，它将不可以调用它的然后回调，直到下一次消化。所以在测试中，你必须这样做了很多： deferred.resolve（）; 。范围$适用（）;
For testing promises, remember that when you resolve a promise, it will not call its then callbacks until the next digest. So in tests you have to do this a lot: deferred.resolve(); scope.$apply();.
您可以找到在的src / {} directiveName /测试/ 。
You can find tests for directives of varying complexity in the bootstrap repo. Just look in src/{directiveName}/test/.
这篇关于如何测试AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
