How to test angular directive that use templateUrl with angular-rails-templates

Question

I'm using teaspoon as the test runner, which load all template files (using angular-rails-templates), which populate the templates module with stuff like this:

angular.module("templates").run(["$templateCache", function($templateCache) {
  $templateCache.put("directives/sample/tmpl.html", '<span>Hey</span>')
}]);

And my directive coffee is like this:

angular.module 'myApp'
.directive 'sample', () ->
  restrict: 'E'
  templateUrl: 'directives/sample/tmpl.html'
  scope:
    address: "="
  controllerAs: 'vm'
  bindToController: true
  controller: () ->

And my test coffee

describe "sample directive", ->
  element = undefined

  beforeEach ->
    module("myApp", "templates")

  # Store references to $rootScope and $compile
  # so they are available to all tests in this describe block
  beforeEach ->
    inject ($compile, $rootScope) ->
      scope = $rootScope.$new()
      scope.address = "abcdef"
      element = $compile("<div><sample address='address'/></div>")(scope)
      scope.$digest()

  it "Replaces the element with the appropriate content", ->
    expect(element.html()).toContain "Hey"

The directive will never render with this. If I replace the templateUrl with template content then it runs fine. But that is not useful at all. What am I missing to let the directive render during test with templateUrl?

Answer 1

You haven't closed the <sample> tag in $compile

Try changing:

element = $compile("<div><sample address='address'</div>")(scope)

To

 element = $compile("<div><sample address='address'></sample></div>")(scope)