Basic Angular Test - angularjs

Question

I'm pretty new to JavaScript & Angular and I'm trying to test this controller but I'm missing something here. Here's the error:
PhantomJS 1.9.7 (Mac OS X) Controller: UserCalendarCtrl Calendar resize based on width resize should call mobile FAILED
spyOn could not find an object to spy upon for width()
user-calendar-controller.spec.js
'use strict';
describe('Controller: UserCalendarCtrl', function() {
var controller,
mockScope,
VivaCalendar;
beforeEach(module('vivaAngularApp', 'ui.calendar'));
beforeEach(inject(function($controller, $rootScope, _VivaCalendar_) {
mockScope = $rootScope.$new();
controller = $controller('UserCalendarCtrl', {
$scope: mockScope
});
VivaCalendar = _VivaCalendar_;
}));
describe('Calendar resize based on width', function() {
it('should set a width', function() {
expect(mockScope.width).toBeDefined(true);
});
describe('resize', function() {
beforeEach(function (mockScope){
spyOn(mockScope, 'width').and.callFake(function(){
return 700;
});
});
it('should call mobile', function() {
expect(mockScope.uiConfig).toEqual(VivaCalendar.uiConfig('mobile'));
});
});
});
describe('event sources', function(){
it('should return event sources', function() {
expect(mockScope.eventSources).toEqual([mockScope.eventSource]);
});
it('should take event source', function(){
expect(mockScope.eventSource.url).toEqual('http://162.243.222.54/fullcalendar/new_fechas_insp.php');
});
});
});
user-calendar-controller.js
'use strict';
app.controller('UserCalendarCtrl', ['$scope', '$window', '$location', 'VivaCalendar', function($scope, $window, VivaCalendar, $location) {
$scope.width = $window.innerWidth;
$scope.$watch('width', function(width) {
if (width < 768) {
$scope.uiConfig = VivaCalendar.uiConfig('mobile');
} else {
$scope.uiConfig = VivaCalendar.uiConfig();
}
});
$scope.eventSource = {
url: 'http://162.243.222.54/fullcalendar/new_fechas_insp.php'
};
$scope.eventSources = [$scope.eventSource];
}]);
viva-calendar.js
'use strict';
app.service('VivaCalendar', function() {
var UiConfig = function(size) {
this.calendar = {
defaultView: 'month',
allDaySlot: false,
minTime: 8,
maxTime: 22,
timeFormat: {
agenda: 'h:mm{ - h:mm}TT'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
buttonText: {
prev: '‹', // <
next: '›', // >
prevYear: '«', // <<
nextYear: '»', // >>
today: 'Ver el día de hoy',
month: 'mes',
week: 'semana',
day: 'día'
},
columnFormat: {
month: 'ddd', // Mon
week: 'ddd d/M', // 9/7 Mon
day: 'dddd M/d' // 9/7 Monday
},
monthNamesShort: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
editable: false,
hiddenDays: [0, 6]
};
if (size === 'mobile') {
this.calendar.defaultView = 'agendaDay';
this.calendar.header.right = 'month, agendaDay';
}
};
this.uiConfig = function(size) {
return new UiConfig(size);
};
});

Answer 1

The goal of a spy is to replace a function by another one that records the function calls, and potentially does something other than the replaced function.
width here is not a function. It's a simple attribute of type number. So it makes no sense to spy on it. If you want the width of the scope to be 700, you simply need
mockScope.width = 700;