Question

我有一个指令：

应用程序/控制器/ battle.js

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

该指令的调用如下：

应用程序/视图/ routeOne.html

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

指令templateUrl指向一个看起来像这样的文件：

应用程序/视图/ testView.html

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

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

尝试了方法：

使用ngHtml2Js 。原因失败：不清楚如何访问创建的模块，新创建的模块如何帮助访问/查询testView.html文件中的DOM元素，不清楚在必须指向的4个地方的每个地方使用哪个路径。
根据this stackoverflow answer使用Html2Js 原因失败：类似于（1）。
根据this blogpost.使用jquery.ajax 访问模板。原因失败：角度路由器阻止我直接查询文件，虽然我可以直接通过curl或我的浏览器访问它。许多尝试路线失败。可能不仅是角度路由器阻止这种方法工作。
根据this article使用$ compile 。原因失败：找不到$ compile，或者找不到指令，或者编译指令没有返回任何内容。

在互联网上搜索如何测试作为角度指令模板的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');
  });
});

如何测试angularUrl指向的角度指令的HTML？

1 个答案: