Unit testing Jasmine使用templateUrl测试AngularJS指令

我正在用Jasmine为AngularJS编写指令测试，并使用templateUrl：

但是，当我运行测试时，我得到了包含在要点中的错误：

Error: Unexpected request: GET views/currency-select.html

从我在文档中读到的内容来看，我认为我这样做是正确的，但事实并非如此——我在这里遗漏了什么

如果您正在使用ngMockE2E或ngMock，请感谢： 所有HTTP请求都使用您指定的规则在本地处理，没有一个会传递到服务器。由于模板是通过HTTP请求的，因此它们也在本地处理。由于当应用程序尝试连接到

视图/currency select.html

时，您没有指定要执行的任何操作，因此它会告诉您它不知道如何处理它。您可以很容易地告诉ngMockE2E传递模板请求：

$httpBackend.whenGET（'views/currency select.html'）.passThrough（）；

请记住，如果愿意，也可以在路由路径中使用正则表达式来传递所有模板

文件对此进行了更详细的讨论：

否则，请使用以下命令： 您需要使用

$injector

访问新的后端。从链接的文档中：

var$httpBackend；
每次之前（注入（函数（$injector）{
$httpBackend=$injector.get（“$httpBackend”）；
$httpBackend.whenGET（'views/currency select.html'）。响应（200，）；
}));

您也许可以从注入器获取

$templatecache

，然后执行以下操作

$templateCache.put("views/currency-select.html","<div.....>");

$templateCache.put（“views/currency select.html”，”）；

您将在何处放置模板以代替

---

之后，您设置您的指令，它应该工作得很好

Karma方法是将模板html动态加载到$templateCache中。如前所述，您可以使用html2js karma预处理器

这归结为将模板“.html”添加到conf.js文件中的文件中 也 预处理器={ “.html”：“html2js” };

和使用

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

---

在js测试文件中

如果仍然不起作用，请使用fiddler查看htmltojs处理器动态生成的js文件的内容，并检查模板文件的路径

应该是这样的

angular.module('app/templates/yourtemplate.html', []).run(function($templateCache) {
  $templateCache.put('app/templates/yourtemplate.html', 

在我的案例中，这与我在实际指令中提出的导致问题的指令不同

让templateURL在所有地方都完全相同让我通过了。

如果您将与RequireJS一起使用，则可以使用将模板内容加载到变量中，然后将其放入模板缓存中

define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
    "use strict";

    describe('Directive TestSuite', function () {

        beforeEach(inject(function( $templateCache) {
            $templateCache.put("path/to/template.html", directiveTemplate);
        }));

    });
});

---

根据要求，将注释转换为答案

---

对于希望在Yeoman应用程序中使用@Lior答案的用户：

有时，karma配置中引用模板的方式，因此，

ng-html2js

生成的模块名称与指令定义中指定为

templateUrl

s的值不匹配。
您需要调整生成的模块名称以匹配

templateUrl

s.
这些可能会有所帮助：

• 要点：

---

这是如何测试使用partial作为模板URL的指令的示例

describe('with directive', function(){
  var scope,
    compile,
    element;

  beforeEach(module('myApp'));//myApp module

  beforeEach(inject(function($rootScope, $compile, $templateCache){
   scope = $rootScope.$new();
   compile = $compile;

   $templateCache.put('view/url.html',
     '<ul><li>{{ foo }}</li>' +
     '<li>{{ bar }}</li>' +
     '<li>{{ baz }}</li>' +
     '</ul>');
   scope.template = {
     url: 'view/url.html'
    };

   scope.foo = 'foo';
   scope.bar = 'bar';
   scope.baz = 'baz';
   scope.$digest();

   element = compile(angular.element(
    '<section>' +
      '<div ng-include="template.url" with="{foo : foo, bar : bar, baz : baz}"></div>' +
      '<div ng-include="template.url" with=""></div>' +
    '</section>'
     ))(scope);
   scope.$digest();

 }));

  it('should copy scope parameters to ngInclude partial', function(){
    var isolateScope = element.find('div').eq(0).scope();
    expect(isolateScope.foo).toBeDefined();
    expect(isolateScope.bar).toBeDefined();
    expect(isolateScope.baz).toBeDefined();
  })
});

description（'with directive'，function（））{
var范围，
编撰，
元素；
在每个（模块（'myApp'））之前；//myApp模块
beforeach（注入函数（$rootScope、$compile、$templateCache）{
scope=$rootScope.$new（）；
compile=$compile；
$templateCache.put（'view/url.html'，
“
{{foo}
”+
“
{{bar}
”+
“
{{baz}
”+
“
”）；
scope.template={
url:'view/url.html'
};
scope.foo='foo'；
scope.bar='bar'；
scope.baz='baz'；
范围。$digest（）；
元素=编译（angular.element(
'' +
'' +
'' +
''
))（范围）；
范围。$digest（）；
}));
它（'应该将范围参数复制到ngInclude partial'，函数（）{
var isolateScope=element.find（'div'）.eq（0.scope（）；
expect（isolateScope.foo）.toBeDefined（）；
expect（isolateScope.bar）.toBeDefined（）；
expect（isolateScope.baz）.toBeDefined（）；
})
});

如果这是单元测试，您将无法访问

$httpBackend.passthrough（）

。这仅在ngMock2E2中可用，用于端到端测试。我同意关于

ng-html2js

（以前被命名为html2js）的答案，但我想在此对其进行扩展，以提供完整的解决方案

为了呈现指令，Angular使用

$http.get（）

从

templateUrl

获取模板。因为这是单元测试，并且加载了

角度模拟

，

角度模拟

截取对

$http.get（）

的调用，并向您发出

意外请求：get

错误。您可以尝试找到绕过此过程的方法，但只使用angular的

$templateCache

预加载模板要简单得多。这样，

$http.get（）

就不会成为问题

这就是他们为你做的。要使其工作，请首先安装：

$ npm install karma-ng-html2js-preprocessor --save-dev

然后在

karma.conf.js

{
    files: [
      //
      // all your other files
      //

      //your htmp templates, assuming they're all under the templates dir
      'templates/**/*.html'
    ],

    preprocessors: {
        //
        // your other preprocessors
        //

        //
        // tell karma to use the ng-html2js preprocessor
        "templates/**/*.html": "ng-html2js"
    },

    ngHtml2JsPreprocessor: {
        //
        // Make up a module name to contain your templates.
        // We will use this name in the jasmine test code.
        // For advanced configs, see https://github.com/karma-runner/karma-ng-html2js-preprocessor
        moduleName: 'test-templates',
    }
}

最后，在测试代码中，使用刚刚创建的

测试模板

模块。只需将

测试模板

添加到通常在每次之前在

中进行的模块调用中，如下所示：

beforeEach(module('myapp', 'test-templates'));

从现在开始应该一帆风顺。要更深入地了解此指令测试场景和其他指令测试场景，请查看
Hmm，我已经尝试了一下，但似乎在注入它之后，passThrough不能作为函数使用：TypeError:“undefined”不是函数（评估“$httpBackend.when（'GET'，'views/currency select.html'）。passThrough（））我还包括了beforeach（模块（'ngMockE2E'）；在我的文件的顶部，它返回到原始错误，$httpBackend Mock中没有passThrough（）方法。文件上写着。这就是为什么您获取函数不可用的错误。现在如果你想用这个来嘲弄