用templaturl对AngularJS指令进行单元测试

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (51)

我有一个AngularJS指令templateUrl定义。我正试着用茉莉花对它进行单元测试。

我的JasminJavaScript如下所示:

describe('module: my.module', function () {
    beforeEach(module('my.module'));

    describe('my-directive directive', function () {
        var scope, $compile;
        beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
            scope = _$rootScope_;
            $compile = _$compile_;
            $httpBackend = $injector.get('$httpBackend');
            $httpBackend.whenGET('path/to/template.html').passThrough();
        }));

        describe('test', function () {
            var element;
            beforeEach(function () {
                element = $compile(
                    '<my-directive></my-directive>')(scope);
                angular.element(document.body).append(element);
            });

            afterEach(function () {
                element.remove();
            });

            it('test', function () {
                expect(element.html()).toBe('asdf');
            });

        });
    });
});

规范错误中运行这个错误时,我得到以下错误:

TypeError: Object #<Object> has no method 'passThrough'

我想要的只是像现在这样加载templaturl--我不想使用respond,如何用后者而不是前者呢?

提问于
用户回答回答于

它和ngMock有关。ngMock模块为每个角度测试自动加载,并初始化模拟$httpBackend的任何使用。$http服务,包括模板获取。模板系统尝试通过$http它变成了对模拟的“意外请求”。

需要一种方法将模板预加载到$templateCache所以当角形要求时,它们已经可用了,而不需要使用$http

首选解决方案:Karma

若要运行测试(应该是这样),可以将其配置为使用Ng-html2js预处理器。Ng-html2js读取指定的HTML文件,并将它们转换为一个角模块,该模块预加载$templateCache

步骤1:启用并配置karma.conf.js

// karma.conf.js

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: "source/path/to/templates/.*/",
    prependPrefix: "web/path/to/templates/",

    // the name of the Angular module to create
    moduleName: "my.templates"
},

要搭建应用程序的脚手架,此配置将工作。

plugins: [ 
  'karma-phantomjs-launcher', 
  'karma-jasmine', 
  'karma-ng-html2js-preprocessor' 
], 

preprocessors: { 
  'app/views/*.html': ['ng-html2js'] 
}, 

ngHtml2JsPreprocessor: { 
  stripPrefix: 'app/', 
  moduleName: 'my.templates' 
},

步骤2:在测试中使用模块

// my-test.js

beforeEach(module("my.templates"));    // load new module containing templates

一种非因果报应的解决方案

如果不以任何理由使用Karma(我在遗留应用程序中有一个不灵活的构建过程),并且只是在浏览器中进行测试,我发现可以绕过ngMock对$httpBackend通过使用原始XHR获取模板的REAL并将其插入$templateCache。这个解决方案的灵活性要小得多,但它现在已经完成了任务。

// my-test.js

// Make template available to unit tests without Karma
//
// Disclaimer: Not using Karma may result in bad karma.
beforeEach(inject(function($templateCache) {
    var directiveTemplate = null;
    var req = new XMLHttpRequest();
    req.onload = function() {
        directiveTemplate = this.responseText;
    };
    // Note that the relative path may be different from your unit test HTML file.
    // Using `false` as the third parameter to open() makes the operation synchronous.
    // Gentle reminder that boolean parameters are not the best API choice.
    req.open("get", "../../partials/directiveTemplate.html", false);
    req.send();
    $templateCache.put("partials/directiveTemplate.html", directiveTemplate);
}));

热门问答

使用文档遇到问题,可以找谁处理?

请叫我雷锋!腾讯云文档有“文档反馈”的功能,直接在文档页面就可以反馈,反馈还有 礼品 ~ 云+社区:问答.png ... 展开详请

直播间IM消息可以下载到自己服务器备份吗?

人生的旅途辣鸡前端
推荐
目前仅私有群(Private)、公开群(Public)和聊天室(ChatRoom)具备消息漫游能力(默认7天)。核实下您那边的群组类型看是否支持https://cloud.tencent.com/document/product/269/1502#.E6.B6.88.E6.81....... 展开详请

腾讯云容器加速地址是错的?

推荐已采纳

我刚才测试了一下,这个加速器地址可以用额,你这边是怎么测试出是关闭状态的啊?

加速器地址是不能直接用浏览器访问的,阿里云提供的直接访问也是空

webIM添加组员报错?

无聊至极互联网重度用户
推荐已采纳

付费超过组数限制,核实下是否超过限制

https://cloud.tencent.com/document/product/269/11673#.E5.8A.9F.E8.83.BD.E5.AF.B9.E6.AF.94

Tencent iot-sdk-embedded-c在Windows下编译出错:无法解析外部符号?

无聊至极互联网重度用户
推荐已采纳

腾讯云IM调用 add_group_member提示该群不能邀请成员?

推荐已采纳
是什么类型的群?根据相应类型的邀请他人入群的控制项,对照文档看下是否允许邀请他人入群。 参考文档:https://cloud.tencent.com/document/product/269/1502#.E7.BE.A4.E6.88.90.E5.91.98.E6.93.8D.E4...... 展开详请

扫码关注云+社区

领取腾讯云代金券