How to mock service in angularAMD with karma/jasmine?

Question

I have a project using AngularAMD/RequireJS/Karma/Jasmine, that I have the basic configuration all working, most unit tests run and pass successfully.

I cannot get a mocked service injected correctly using either angular.mock.module or angularAMD.value().

I have:

// service definition in services/MyService.js
define(['app'], 
       function(app) {
           app.factory('myService', [ '$document', function($document) {
               function add(html) {
                   $document.find('body').append(html);
               }
               return { add: add }; 
           }]);
       }
);


// test
define(['angularAMD', 'angular-mocks', 'app', 'services/MyService'],
       function(aamd, mocks, app) {
           describe('MyService', function() {
               var myBodyMock = {
                   append: function() {}
               };
               var myDocumentMock = {
                   find: function(sel) {
                       // this never gets called 
                       console.log('selector: ' + sel);
                       return myBodyMock; 
                   }
               }; 
               var svc;
               beforeEach(function() {
                   // try standard way to mock a service through ng-mock
                   mocks.module(function($provide) {
                       $provide.value('$document', myDocumentMock);
                   });
                   // hedge my bets - try overriding in aamd as well as ng-mock
                   aamd.value('$document', myDocumentMock);              
               });
               beforeEach(function() { 
                   aamd.inject(['myService', 
                               function(myService) {
                                   svc = myService;
                               }]);
               });
               it('should work', function() {
                   // use svc expecting it to have injected mock of $document.
                   spyOn(myDocumentMock, 'find').andCallThrough();
                   spyOn(myBodyMock, 'append');
                   svc.add('<p></p>');
                   expect(myDocumentMock.find).toHaveBeenCalledWith('body');
                   expect(myBockMock.append).toHaveBeenCalledWith('<p></p>');
               });
           });
       }
);

Does anyone know where I'm going wrong ? Any help would be much appreciated.

have a look at angularamd's git, there are some good test examples. — z.a., Jan 08 '15 at 09:37

score 0 · Answer 1 · answered Jan 26 '15 at 13:37

Angular isn't asynchronous, I think is not a good ideia use both. If you're trying to reach to a good modularization method, okay, but use the RequireJS optimizer to build everything before you put this on your browser, and about the tests, I think you can just use RequireJS optimizer to build your modules before, it will let you free from "CommonJS environment even in tests".

score 0 · Answer 2 · answered May 23 '16 at 16:40

Looks like it'll be an issue with variable scopes, karma is very finicky about that. I think you should initialize your mock objects globally, then set them in the beforeEach.

The top line of my test files always looks something like:

var bodyMock, svcMock, foo, bar

Then in the beforeEach'es I set the values

Edit: Since bodyMock is only a scope variable, at the point where the tests are actually running and the browser is looking for an object 'bodyMock', it can't find anything.

How to mock service in angularAMD with karma/jasmine?

2 Answers2