title: How can I test a directive using templateUrl in Chutzpah's headless browser
body: <p>Does anyone know how to get a headless browser like Chutzpah's Visual Studio Test Adapter to allow a directive to access its .html template file? Chutzpah uses PhantomJS for a headless browser which appears to limit my options.</p>
  
  <p>I'm using Chutzpah Test Adapter 2.5 and AngularJS 1.2.0-r.2.</p>
  
  <p>I get the error:</p>
  
  <blockquote>
    <p>Unexpected request: GET myApp/directives/template.html</p>
  </blockquote>
  
  <p>Which is caused by Angular attempting to use the $http service to access my directive's template.</p>
  
  <p>I've found a few different workarounds:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/a/18368287/545680">Manually using XMLHttpRequest to import the templates.</a></li>
  <li><a href="https://github.com/vojtajina/ng-directive-testing" rel="nofollow noreferrer">Using a utility like Grunt to inline the template into your directive's JS code.</a></li>
  <li><code>$httpBackend.when('GET', 'myApp/directives/template.html').passThrough()</code> - this only works in e2e tests, not unit tests.</li>
  <li><a href="https://stackoverflow.com/a/15231422/545680">Put the template directly into the test code.</a></li>
  </ol>
  
  <p>None of these options particularly satisfy me. I'd prefer to be able to let the directive load its template transparently so I can test it as a component. Is there a way I can get this scenario working?</p>
  
  <p>Example code:</p>
  
  <pre><code>angular.module('myDirective', []).directive('myDirective', function() {
      return {
          restrict: 'E',
          transclude: true,
          templateUrl: 'myApp/directives/template.html',
          // Some other options, omitted for brevity.
      };
  });
  </code></pre>
  
  <p>template.html:</p>
  
  <pre><code>&lt;div&gt;&lt;div ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Example Jasmine test:</p>
  
  <pre><code>describe('myDirective', function() {
      // Assign $scope using inject(), load module etc.
      // Insert workaround for $httpBackend loading my templateUrl here.
      it('should transclude content', function() {
          var element = $compile("&lt;my-directive&gt;Look Mom, I'm in my directive!&lt;/my-directive&gt;")($scope);
          $scope.$digest();
  
          expect(element.text().trim()).toBe("Look Mom, I'm in my directive!");
      });
  }
  </code></pre>