AngularJS & Karma-Jasmine - How to ignore templateUrl to avoid "Unexpected request: GET ... /. Html"

Question

I am working on an AngularJS application using ES6, so I will have as little work as possible when porting to AngularJS 2.0

But I found out that this is a little harder for unit tests.

So what I want to do is check the "controller" directive (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 is as follows

 /* ... 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(/([AZ])/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 do not use templateUrl (when I delete or comment on it), it works as expected. How can I somehow ignore templateUrl, so when I want to test my application, I do not need to comment on templateUrl in every document?

Answer 1

This may not be the best solution, but you can work around this problem by putting problematic templates inside $ templateCache manually before testing. Since the template is found in the template cache, a GET request is not required.

In your source file, enter the 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 to implement this using the template cache, but this does not allow the main application to clear the test code.