AngularJS 和 Karma-Jasmine - 如何忽略 templateUrl 以避免“意外请求：GET .../.html”答案

【问题标题】：AngularJS & Karma-Jasmine - How to ignore templateUrl to avoid "Unexpected request: GET .../.html"AngularJS 和 Karma-Jasmine - 如何忽略 templateUrl 以避免“意外请求：GET .../.html”
【发布时间】：2015-06-23 06:32:46
【问题描述】：

我正在使用 ES6 开发 AngularJS 应用程序，因此在迁移到 AngularJS 2.0 时我将尽可能少地工作

但我发现做单元测试有点复杂。

所以我想做的是测试指令的“控制器”（loginSidebarCtrl）这是我的代码：（LoginSidebar.js）

class LoginSidebar {

    constructor(loginSidebarService) {
        this.loginSidebarService = loginSidebarService;

    }

    /*
        ... SOME METHODS ...
    */


}

LoginSidebar.$inject = ['loginSidebarService'];

export default function() {
    return {
        scope: {},
        templateUrl: 'path/to/loginSidebar.tpl.html',
        replace: true,
        controller: LoginSidebar,
        controllerAs: 'loginSidebarCtrl'
    };
};

我的 app.js 看起来像这样

/*

...
import ...
...

*/

import loginSidebar from "./js/path/to/LoginSidebar.js";
import loginSidebarService from "./js/path/to/LoginSidebarService.js";

angular.module('myModule', [
    'ngNewRouter',
    'ngAnimate'
])
    /*
    ...
    .directive(...)
    ....
    */
    .directive("loginSidebar", loginSidebar)


    /*
    ...
    .service(...)
    ....
    */

    .service("loginSidebarService", loginSidebarService)



    /*
    .config(...);
    */

angular.module('booking', [
    'ngNewRouter',
    'ngAnimate',
    'cross.ui',
    'agenda.booking'
])
    .directive("alerts", alerts)
    .directive("breadcrumbs", breadcrumbs)

    .directive("topHeader", topHeader)
    .directive("loginSidebar", loginSidebar)

    .service("loginHandler", loginHandler)
    .service("userHandler", userHandler)
    .service("familyMembersService", familyMembersService)
    .service("loginSidebarService", loginSidebarService)

    .service("alertsHandlerService", alertsHandlerService)

    // name path to components dir and className
    .config(function ($componentLoaderProvider) {
        $componentLoaderProvider.setTemplateMapping(function (name) {
            return 'page/booking/' + dotCase(name) + '.html';
        });

        $componentLoaderProvider.setCtrlNameMapping(function (name) {
            return name[0].toUpperCase() + name.substr(1) + 'Ctrl';
        });
    })

    // pretty URL
    .config(function ($locationProvider) {
        $locationProvider.html5Mode(true);
    });

function dotCase(str) {
    return str.replace(/([A-Z])/g, function ($1) {
        return '.' + $1.toLowerCase();
    });
}

这是我的 spec.js (Jasmine)

describe("Test", function(){
    var el, scope;

    beforeEach(function () {
        module('myModule');

        inject(function($compile, $rootScope){
            el = angular.element("<login-sidebar></login-sidebar>");

            $compile(el)($rootScope.$new());
            $rootScope.$digest();
            scope = el.isolateScope() || el.scope() ;


        }); 
    });

    it("test", inject(function() {
     console.log(scope);
    }));  
});

当我运行它时，我得到一个错误

“意外请求：GET .../.html”

但是当我不使用templateUrl（当我删除它或评论它时）它会按预期工作。我怎样才能以某种方式忽略 templateUrl，这样当我想测试我的应用程序时，我就不必在每个文档中评论 templateUrl 了？

【问题讨论】：

我想你可能会考虑使用ng-html2js。它将在 Angular 的 $templateCache 中加载模板并绕过任何对模板的 GET 请求。

标签： angularjs unit-testing ecmascript-6 karma-jasmine

【解决方案1】：

这可能不是最好的解决方案，但您可以通过在测试之前将有问题的模板手动放入 $templateCache 来解决此问题。因为模板是在模板缓存中找到的，所以不需要 GET 请求。

在你的实际源文件中，引入一个子模块依赖：

angular.module('myApp', ['myApp.templates']);

然后在每次测试之前运行它

angular.module('myApp.templates').run(function($templateCache) {
   $templateCache.put('url/of/template.html', '');
});

还有其他方法可以使用模板缓存来实现这一点，但这可以使您的主应用程序大部分都保持干净的测试代码。

【讨论】：