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

我有一个指示：

app/controllers/battle.js

该指令的名称如下：

app/views/routeOne.html

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

app/views/testView.html

你好 这里有一些鸡蛋。 如何使用karma/jasmine进行单元测试以确保testView.html中的div id存在

尝试的方法：

根据使用ngHtml2Js。失败原因：不清楚如何访问创建的模块，新创建的模块如何帮助访问/查询testView.html文件中的DOM元素，不清楚在testView.html文件的4个位置中使用的路径

根据原因使用Html2Js失败：类似于（1）

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

根据使用$compile。失败原因：$compile not found，或指令not found，或指令编译不返回任何内容

---

在互联网上搜索如何测试作为angular指令模板的HTML文件，可以得到许多不同的方法，但我都没有成功。我很乐意使用上述任何一种方法，但我还没有找到一个指南，可以让我从开始到结束以一种整体的方式，并涵盖足够的实际情况来回答我的问题。那么：如何测试指令使用的HTML

我建议对解决方案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');
  });
});

description（'Directive Tests'，function（）{
每个之前（模块（“模板”）；
在每个（模块（“myModule”）之前；
var$compile，$rootScope；
beforeach（注入函数（$compile，$rootScope）{
//匹配时，注入器会从参数名称周围展开下划线（389;）
$compile=\$compile；
$rootScope=\u$rootScope；
}));
它（'Some test'，function（）{
var元素=$compile（“”（$rootScope）；
$rootScope.$apply（）；
expect（element.html（））.toContain（'这里有一些鸡蛋'）；
});
});

我昨天没有机会尝试，只是在一天结束时才把问题提出来。现在试一试，会让你知道，谢谢你花时间回答。我得到一个“模块‘模板’不可用！”来自karma的错误。我尝试过使用stripprefix和prependprefix选项，但没有它们，因为我根本没有构建过程，但我一直无法解决这个问题。有什么想法吗？@komali_2你在karma.conf.js

nghtml2js预处理器：{moduleName:“templates”}，

中使用了“templates”作为模块名吗？是的，但有一刻，我才意识到，在过去三天里，通过我的各种尝试，我有了第二个插件：[]在我的karma config底部声明，我从未见过。在我用我的头在墙上打了个洞之后，我会再次尝试，并让你知道。作为参考，这里是我试图实施的实际回购协议。我简化了我的例子。所有代码都在应用程序文件夹中

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

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"
},

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');
  });
});