javascript - 如何测试 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 存在？

尝试过的方法:

1. 根据 this stackoverflow answer 使用 ngHtml2Js .失败原因:不清楚如何访问创建的模块，新创建的模块如何帮助访问/查询testView.html文件中的DOM元素，不清楚testView.html必须指向的4个地方分别使用什么路径。

2. 使用 Html2Js 根据 this blogpost.失败原因:类似于(1)。

3. 根据 this article 使用 jquery.ajax 访问模板 .原因失败: Angular 路由器阻止我直接查询文件，尽管我可以通过 curl 或我的浏览器直接访问它。在许多尝试的路线上失败。可能不仅仅是 Angular 路由器阻止了这种方法的工作。

4. 根据 the angular docs 使用 $compile .失败原因:未找到 $compile，或未找到指令，或编译指令未返回任何内容。

在 Internet 上搜索如何测试作为 angular 指令模板的 HTML 文件会产生许多不同的方法，但我没有设法使它们起作用。我很乐意使用上述任何一种方法，但我还没有找到一个指南，可以从头到尾以整体方式引导我，并涵盖足够多的内容来实际回答我的问题。那么:如何测试我的指令使用的 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');
  });
});