使用 Karma 和动态模板 URL 测试 AngularJS 指令

Question

我正尝试在我的 AngularJS 指令上构建单元测试，但我运行在呈现模板时遇到了一些障碍。具体来说，我的指令的 templateUrl 有一个对 window.STATIC_URL 的引用，它会根据环境是生产环境还是暂存环境而变化。运行ning Karma 测试时，我收到错误：

Error: Unexpected request: GET undefinedjs/templates/myfolder/mytemplate.html。这是指令：

app.directive('myDirective', function(){
    ...
    templateUrl: window.STATIC_URL + 'js/templates/myfolder/mytemplate.html'
});

我正在使用 ng-html2js 预处理所有 HTML 文件。这是业力配置：

// list of files / patterns to load in the browser
files: [
    'build/lib.min.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'js/*.js',
    'js/**/*.js',
    'js/templates/**/*.html',
    'tests/*Spec.js'
],


preprocessors: {
  'js/templates/**/*.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('templates')

  moduleName: 'templates'
},

测试运行s var element = $compile("<my-directive></my-directive>")($rootScope);。我已经将 compile、rootScope 以及 httpBackend 注入到我的测试中。

此外，模板在注入器之前加载：

beforeEach(module('my-app'));
beforeEach(angular.mock.module('templates'));

为什么我要依赖window.STATIC_URL

这是我对如何将变化的变量注入我的 Angular 应用程序的最佳猜测。该变量由 settings.py 中 Django 的 STATIC_URL 变量设置。它指向我在生产中的 S3 路径，以及我在开发中的本地路径。

我试过的

由于被调用的指令依赖于 window.STATIC_URL，我试图从我的测试中编辑 STATIC_URL。（即 window.STATIC_URL = '/static'）这似乎不起作用。

唯一似乎有效的方法是从指令的 templateUrl 中删除变量，并将其替换为我正在测试的环境的静态 URL。但是，这并不理想，因为我希望它根据应用程序改变。我可以在测试中明确设置 STATIC_URL，但不能设置 Angular 应用程序。

我现在没主意了。如果有人运行有类似的东西，我将不胜感激！谢谢。

Answer 1

过去，我采用这种方法在我的指令中使用动态模板 url：

<div data-your-directive data-template-url="'partials/other.html'"></div>

将 url 作为可选属性传递，如果提供该属性将覆盖默认值。在我的指令中，我有：

angular.module('directives').directive('yourDirective', [function() {
    return {
        templateUrl: function($element, $attrs) {
            // Default template path.
            var templateUrl = 'partials/default.html';

            // Check if a template url attribute has been passed in to the 
            // directive. If one has been provided then make use of this
            // rather than the default.
            if ($attrs.templateUrl !== undefined) {
                templateUrl = $attrs.templateUrl;
            }

            return templateUrl;
        }
    };
}]);

这种方法可能更容易测试。

使用 Karma 和动态模板 URL 测试 AngularJS 指令

Testing AngularJS Directive with Karma & Dynamic Template URL

django

angularjs

karma-runner