How to trick $ scope.variables in jasmine
I have the following test case: CompanyCtrlSpec.js
describe('ViewCompanyCtrl', function () {
var $rootScope, scope, $controller , $q ;
beforeEach(angular.mock.module('MyApp'));
beforeEach(inject(function ($rootScope, $controller ) {
scope = $rootScope.$new();
createController = function() {
return $controller('ViewCompanyCtrl', {
$scope: scope,
company : {}
});
};
}));
it('the company type should be equal to an object', function () {
var controller = new createController();
//some assertion
});
});
Below is the ViewCompanyCtrl.js file
angular.module('MyApp').controller('ViewCompanyCtrl',
function ($scope, companyService, $state, meetingService, company, attachmentService) {
'use strict';
$scope.company = company;
$scope.companyInfo = {};
$scope.companyInfo['AName'] = [$scope.company.Address.Street, $scope.company.Address.ZipCode + ' ' + $scope.company.Address.City].join(', ');
//more code
});
Below is the app.routes.js file where the company gets permission
.state('company', {
abstract: true,
url: '/company/:companyId',
resolve: {
company: function($q, $stateParams, companyService){
var deferred = $q.defer();
companyService
.getCompany($stateParams.companyId)
.error(function(data, status, headers){
//more code
})
.success(function(data){
deferred.resolve(data);
});
return deferred.promise;
}
},
My problem is that I am getting the following error
TypeError: $scope.company.Address is undefined in C:/Users/MyApp/WebApiRole/app/compan
y/ViewCompanyCtrl.js (line 8)
@C:/Users/MyApp/WebApiRole/app/company/ViewCompanyCtrl.js:8:42
I'm guessing this is because I haven't mocked scope.company.Address in my test case. I'm not sure how to do this. Please rate it if anyone can help me with this or any way to do it?
source to share
It seems to me to be the $scope.company
same as company
which is injected into your controller. Therefore, you only need to set Address
to company
which you enter into your layout, for example:
beforeEach(inject(function ($rootScope, $controller ) {
scope = $rootScope.$new();
createController = function() {
return $controller('ViewCompanyCtrl', {
$scope: scope,
company : {
Address: {/* address data goes here */}
}
});
};
}));
If you want the company data to be different for each test, just pass it to your function createController()
:
beforeEach(inject(function ($rootScope, $controller ) {
scope = $rootScope.$new();
createController = function(company) {
return $controller('ViewCompanyCtrl', {
$scope: scope,
company : company
});
};
}));
it('the company type should be equal to an object', function () {
var company = {Address: {/* address data goes here */}};
var controller = new createController(company);
//some assertion
});
source to share
Try adding a controller to your route definition. The controller is nothing more than another. It is usually tied to a state or species.
.state('company', {
abstract: true,
url: '/company/:companyId',
controller: 'ViewCompanyCtrl'
resolve: {
company: function($q, $stateParams, companyService){
var deferred = $q.defer();
companyService
.getCompany($stateParams.companyId)
.error(function(data, status, headers){
//more code
})
.success(function(data){
deferred.resolve(data);
});
return deferred.promise;
}
},
Better yet, I would use a convention controller As
instead of using scope in your controller. Then your controller will be available. Also, I highly recommend taking a look at the John Papa or Todd Motto coding standard . Both are good and recommend using this convention.
source to share