茉莉花控制器和模擬服務測試

Question

這是我test_sp.js文件：

describe('Controller: MainCtrl', function() { 
    var ctrl, mockBaseService; 

    beforeEach(function() { 

     mockBaseService = { 
      cerrorMessages: 'whatever', 
      sp: "[{'spName': 'Test'}]", 
      // Calls back if errors. 
      add: jasmine.createSpyObj('BaseService.add', ['sp']), 
      logout: jasmine.createSpy('BaseService.logout'), 
      // Calls back if errors. 
      fetch: jasmine.createSpyObj('BaseService.fetch', ['selfsp']) 
     }; 

     mockBaseService.add.sp.and.callFake(function(something, cb) { 
      cb(); // execute the callback immediately 
     }); 

     mockBaseService.fetch.selfsp.and.callFake(function(something, cb) { 
      cb(); // execute the callback immediately 
     }); 

     module('SpPageApp'); 

     // Let ctrl = MainCtrl and override BaseService in MainCtrl to be 
     // the mockBaseService above. 
     inject(function($controller) { 
      ctrl = $controller('MainCtrl', { 
       BaseService: mockBaseService 
      }); 
     }); 
    }); 

    it('should have an add function', function() { 
     expect(ctrl.add).toBeDefined(); 
    }); 
}); 

這是我的人緣配置文件的file陣列：

files: [ 
    '../angular.js', 
    'node_modules/angular-mocks/angular-mocks.js', 
    '../w.js', 
    '../sp.js', 
    '../s.js', 
    '../base.js', 
    'tests/test_sp.js', 
], 

最後，這是我sp.js它具有SpPageApp模塊：

angular.module("SpPageApp", ["BaseApp"]) 
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) { 

     var self = this; 

     BaseService.fetch.selfsp(function() { 
      self.sp = BaseService.sp; 
      self.cerrorMessages = BaseService.cerrorMessages; 
     }); 

     self.add = function() { 
      BaseService.add.sp(self.sp, function() { 
       self.cerrorMessages = BaseService.cerrorMessages; 
      }); 
     }; 

     self.logoutUser = function() { 
      BaseService.logout(); 
     }; 

    }]); 

的我做karma start測試代碼，我得到一個錯誤說這個：

Chromium 47.0.2526 (Ubuntu 0.0.0) Controller: MainsCtrl should have an add function FAILED 
    TypeError: Cannot read property 'and' of undefined 
     at Object.<anonymous> (/home/a/Documents/CMS/CMSApp/static/js/karma/tests/test_sp.js:20:45) 
    TypeError: Cannot read property 'add' of undefined 
     at Object.<anonymous> (/home/a/Documents/CMS/CMSApp/static/js/karma/tests/test_sp.js:36:20) 
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs/0.006 secChromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.034 secs/0.006 secs) 

錯誤說，它無法讀取屬性的定義add，並指出這條線：

expect(ctrl.add).toBeDefined(); 

，它無法讀取屬性未定義and，並指出這條線：

mockBaseService.fetch.selfsp.and.callFake(function(something, cb) { 

爲什麼茉莉說這兩個ctrl和mockBaseService.fetch.selfsp在代碼中定義時未定義？

編輯：對於它的價值，w.js，sp.js和s.js（其業力加載）的所有已控制器稱爲MainCtrl但每個控制器是在它自己的文件和AngularJS模塊（在test_sp.js，我只加載SpPageApp模塊） 。

Answer 1

正如我的評論中提到的，您可以直接嘲笑服務並避免使用間諜。另外，你可以告訴$注入器使用你的模擬服務而不是真正的實現，允許你在解析服務時直接注入模擬，這取代了你的正常實現。

假設你BaseService的SpPageApp模塊中存在：

mockBaseService = { 
    cerrorMessages: 'whatever', 
    sp: "[{'spName': 'Test'}]", 
    add: function (something, cb) { cb() }, 
    ... 
}; 

module('BaseApp', function($provide) { 
    $provide.value('BaseService', mockBaseService); 
}); 

module('SpPageApp'); 

inject(function($controller) { 
    ctrl = $controller('MainCtrl', { 
    }); 
}); 

爲了測試它，因爲在評論中提到的，你仍然想使用間諜來確保它成功調用。

it('should have an add function', function() { 
    spyOn(mockBaseService, 'add');   
    ctrl.add(); 
    expect(mockBaseService.add).toHaveBeenCalled(); 
});