Question

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

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

所以我想做的是测试指令＆＃34;控制器＆＃34; （loginSidebarCtrl）这是我的代码：（LoginSidebar.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();
    });
}

我的app.js看起来像这样

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);
    }));  
});

这是我的spec.js（Jasmine）

templateUrl

当我运行它时出现错误

＆＃34;意外请求：GET ... /。html＆＃34;

但是当我不使用templateUrl时（当我删除它或评论它时）它会按预期工作。我怎么能以某种方式忽略templateUrl所以当我想测试我的应用时，我不必在每个文档中评论SELECT City, SUM(case when name2015 = 'Jane' then income2015 end) income2015_total, SUM(case when name2020 = 'Jane' then income2020 end) income2020_total from finaldata where (name2015='Jane' or name2020='Jane') GROUP BY City？

Answer 1

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

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

_bstr_t test;

for (int i = 0; i < myArrayLength; i++) {
    test = test + (_bstr_t) myArray[i];
}

然后在每次测试之前运行

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

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

AngularJS＆amp; Karma-Jasmine - 如何忽略templateUrl以避免＆＃34;意外请求：GET ... /。html＆＃34;

1 个答案: