AngularJS & Karma-Jasmine - How to ignore template

问题:

I'm working on an AngularJS app using ES6, so I will have as little work as possible when migrating to AngularJS 2.0

But I found out that it's a bit more complicated to do unit tests.

So what I want to do is to test directive's "controller" (loginSidebarCtrl) Here is my code: (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'
    };
};

My app.js looks like this

/*

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

And this is my 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);
    }));  
});

When I run it I get an error

"Unexpected request: GET .../.html"

But when I don't use the templateUrl (when I delete it or comment it) it works as expected. How can I somehow ignore the templateUrl so when I want to test my app I don't have to comment the templateUrl in each document ?

回答1:

This might not be the best solution but you can get around the issue by putting the problematic templates inside the $templateCache manually before testing. Because the template is then found in the template cache no GET request is necessary.

In your actual source file, introduce a submodule dependency:

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

Then run this before each test

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

There are other ways you could implement this using template cache, but this keeps your main app mostly clean of test code.