Unit Test for a scope that retrieves an integer (osVersion) - angularjs

Question

I am trying to write a unit test for a $scope that retrieves the customer's osVersion in a file called module.js.
Here is the function:
angular.module('app.customer-view', [])
.controller('customer-view.mainController', [
'$scope',
'$window',
'$document',
'customerViewService',
'app',
'customerViewConstants',
function ($scope, $window, $document, customerViewService, app, customerViewConstants) {
'use strict';
function getOSVersion() {
if (window.nativeBridge) {
return window.nativeBridge.deviceProfile.getOSVersion();
}
}
function init() {
$scope.osVersion = getOSVersion();
}
init();
}
]};
How to write a unit test that checks to see that $scope.osVersion return a version number as it should? This is what I have so far:
describe('customer-view.mainController', function () {
'use strict';
/* Variables directly derived from module.js */
var scope,
_window,
spec_customerService,
createController,
app,
customerViewConstants,
/* Extra dependencies required for unit test cases */
rootScope,
$controller,
stub,
deferredObj;
beforeEach(function(){
module('app.customer-view', 'senses');
stub = {
data: {
'osVersion': 4.02
}
};
inject(function($injector) {
$controller = $injector.get('$controller');
rootScope = $injector.get('$rootScope');
customerViewConstants = $injector.get('customerViewConstants');
spec_customerService = $injector.get('customerViewService');
deferredObj = $injector.get('$q');
app = {
setRadialHeaderData:function(){
}
};
_window = {
document: {
createEvent: function(){
return {initUIEvent : function(){}};
}
},
dispatchEvent: function(){}
};
createController = function() {
scope = rootScope.$new();
return $controller('customer-view.mainController', {
'$scope': scope,
'$window': _window,
'$document': _window.document,
'app': app
});
};
});
});
it('should get the OS version when native is present', function(){
spyOn(scope, 'osVersion');
createController();
scope.$apply();
expect(scope.osVersion).toEqual(stub.data.osVersion);
});
});
This test above is now returning: Error: osVersion() method does not exist in C:/xampp/htdocs/myProject/customer-view/senses/node_modules/jasmine-core/lib/jasmine-core/jasmine.js

Answer 1

I think there is something wrong with how you have declared your controller, your init function and init() call should live inside the main controller function you are passing in.
angular.module('app.customer-view', [])
.controller('customer-view.mainController', [
'$scope',
'$window',
'$document',
'customerViewService',
'app',
'customerViewConstants',
function ($scope, $window, $document, customerViewService, app, customerViewConstants) {
function getOSVersion() {
if (window.nativeBridge) {
return window.nativeBridge.deviceProfile.getOSVersion();
}
}
function init() {
$scope.osVersion = getOSVersion();
}
init();
}
]};

Answer 2

scope.osVersion cannot be spied, because the method doesn't exist on scope before controller constructor was called, and it was already called after calling $controller.
To be efficiently tested, osVersion should be extracted to separate service,
app.factory('osVersion', function ($window) {
if ($window.nativeBridge) {
return $window.nativeBridge.deviceProfile.getOSVersion();
}
});
This way it can be easily mocked on module or $controller level and tested with
var mockedOsVersion = {};
...
expect(scope.osVersion).toBe(mockedOsVersion);