如何测试 angular 指令的 templateUrl 指向的 HTML？

Question

我有一个指令：

app/controllers/battle.js

angular.module('myModule')
  .controller('myController',
  ['$scope',
  function($scope){
    $scope.sayHello = function(){console.log('hello');};
  }])
  .directive('myDirective', function(){
    return {
      templateUrl: '../views/testView.html'
    }
  });

该指令的调用方式如下：

app/views/routeOne.html

<my-directive ng-controller='myController'></my-directive>

指令 templateUrl 指向一个如下所示的文件：

app/views/testView.html

<div id='testView'>Hello</div>
<div id='eggs'>Here are some eggs.</div>

如何使用 karma/jasmine 进行单元测试以确保 testView.html 中的 div id 存在？

尝试过的方法：

根据 this Whosebug answer 使用 ngHtml2Js。失败原因：不清楚如何访问创建的模块，新建的模块如何帮助access/querytestView.html文件中的DOM元素，不清楚4个地方各用什么路径testView.html 必须指向。
根据this blogpost.使用Html2Js 失败原因：与（1）类似。
根据 this article 使用 jquery.ajax 访问模板。失败原因：angular 路由器阻止我直接查询文件，尽管我可以通过 curl 或浏览器直接访问它。在许多尝试的路线上失败。可能不仅仅是 angular 路由器阻止了此方法的工作。
按照 the angular docs 使用 $compile。失败原因：未找到 $compile，或未找到指令，或编译指令未返回任何内容。

在 Internet 上搜索如何测试作为 angular 指令模板的 HTML 文件会产生许多不同的方法，none 我已经设法实现了这些方法.我很乐意使用上述任何一种方法，但我还没有找到一个指南，可以从头到尾以整体方式引导我，并涵盖足够多的内容来实际回答我的问题。那么：如何测试我的指令使用的 HTML ？

Answer 1

我建议对解决方案 1 进行一些更改。

指令中的一个小改动。

angular.module('myModule')
   .controller('myController',['$scope',function($scope){
         $scope.sayHello = function(){console.log('hello');};
    }])
   directive('myDirective', function(){
      return {
        templateUrl: '../views/testView.html',
        controller: 'myController'
      }
   });

在karma.conf.js

plugins: [
        // some other plugins as well
        'karma-ng-html2js-preprocessor'
    ],
preprocessors: {
     "path/to/templates/**/*.html": ["ng-html2js"]
},

ngHtml2JsPreprocessor: {
    // If your build process changes the path to your templates,
    // use stripPrefix and prependPrefix to adjust it.
    stripPrefix: "app",
    prependPrefix: "..",
    // the name of the Angular module to create
    moduleName: "templates"
},

现在在battel.spec.js //测试文件

describe('Directive Tests', function () {
    beforeEach(module('templates'));
    beforeEach(module('myModule'));

    var $compile, $rootScope;

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;
   }));
  it('Some test', function(){
       var element = $compile("<my-directive></my-directive>")($rootScope);
       $rootScope.$apply();
       expect(element.html()).toContain('Here are some eggs');
  });
});

如何测试 angular 指令的 templateUrl 指向的 HTML？

How do I test the HTML pointed to by the templateUrl of an angular directive?

javascript

unit-testing

angularjs

angularjs-directive

karma-jasmine