title: How to test AngularJS directives
body: <p>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.</p>
  
  <p>Here is the (relevant) html:</p>
  
  <pre><code>&lt;html id="ng-app" ng-app="app"&gt;
    &lt;div id="directive-element" class="directive-element"&gt;
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The javascript (in coffeescript) looks like:</p>
  
  <pre><code>window.Project =
    App: angular.module('app', [])
    Directive: {}
  
  Project.Directive.DirectiveElement =
    -&gt;
      restrict: 'C'
      link: (scope, element, attrs) -&gt;
        element.html 'hello world'
  Project.App.directive 'directiveElement', Project.Directive.DirectiveElement
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>describe 'App.Directive.DirectiveElement', -&gt;
    it 'updates directive-element', -&gt;
      inject ($compile, $rootScope) -&gt;
        element = $compile('&lt;div id="app" ng-app="app"&gt;&lt;div id="directive'element" class="directive-element"&gt;&lt;/div&gt;&lt;/div&gt;')
        expect(element.text()).toEqual('hello world')
  </code></pre>
  
  <p>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.</p>
  
  <p>How do I get a test for this to work?</p>