Question

我正在尝试在我的AngularJS指令上构建单元测试，但是我遇到了一些渲染模板的障碍。具体来说，我的指令templateUrl引用了window.STATIC_URL，它根据环境是生产还是暂存而变化。运行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'
},

测试运行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

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

<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＆amp; amp ;;测试AngularJS指令动态模板网址

1 个答案: