Getting jasmine to work with Angular JS
I am trying to get Jasmine to work with my Angular JS project, but I always get the following error. I am trying to get him to run a very simple test. Also I have installed Angular js project using RequireJS. I have given my code below.
The error I am getting:
My very simple TestSpec is below:
describe('Controller:UserController', function () {
var scope,controller;
beforeEach(function () {
module('app');
inject(function ($controller,$rootScope) {
scope = $rootScope.$new();
controller = $controller('UserController', { '$scope': scope });
});
});
it('checks the troller name', function () {
expect(scope.name).toBe('Superhero');
});
});
And my controller code is below:
define(['app','WebCallManager'], function (app) {
app.controller('UserController', function ($scope,$location,webcallService) {
$scope.name = 'Superhero';
$scope.loginUser = function(){
console.log("Login User Called...");
$location.path('/login').replace();
console.log("View Navigated...");
};
$scope.slidePanel = function(){
f7.openPanel('left');
};
$scope.doWebCall = function(){
console.log("Doing the Web Call...");
webcallService.sendGetRequest();
};
});
});
And TestRunner.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Test Runner v2.0.1</title>
<link rel="shortcut icon" type="image/png" href="framework/lib/jasmine-2.0.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="framework/lib/jasmine-2.0.1/jasmine.css">
<!-- Jasmine/Angular testing framework libraries -->
<script type="text/javascript" src="framework/lib/jasmine-2.0.1/jasmine.js"></script>
<script type="text/javascript" src="framework/lib/jasmine-2.0.1/jasmine-html.js"> </script>
<script type="text/javascript" src="framework/lib/jasmine-2.0.1/boot.js"></script>
<script type="text/javascript" src="framework/lib/angular.js"></script>
<script type="text/javascript" src="framework/lib/angular-mocks.js"></script>
<!-- include source files here... -->
<script data-main="main" src="framework/lib/require.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="UserControllerTest.js"></script>
</head>
<body>
</body>
</html>
and my main.js file used to load requirejs dependencies:
(function() {
require.config({
baseUrl: "../www/scripts",
// alias libraries paths
paths: {
'angular': '../libs/angular',
'angular-route': '../libs/angular-route',
'angular-animate':'../libs/angular-animate',
'angular-mocks':'../libs/angular-mocks',
'angularAMD': '../libs/angularAMD.min',
'Framework7':'../libs/framework7',
'UserController':'controller/UserCtrl',
'WebCallManager':'services/WebCallManager'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate':['angular'],
'angular-mocks':['angular'],
'Framework7':{exports: 'Framework7'}
},
//kick start application
deps: ['app']
});
require(['Framework7'], function(Framework7) {
f7 = new Framework7({
modalTitle: 'Seed App',
swipePanel: 'left',
animateNavBackIcon: true
});
return {
f7: f7
};
});
})();
I have also provided the entire source for my seed project here . I would really appreciate it if someone could help me.
source to share
You must enable everything provider
and services
used in your controller to avoid this error.
describe('Controller:UserController', function () {
var scope,controller,webcallService,$location;
beforeEach(module('app'));
beforeEach(inject(function ($controller,$rootScope,$injector,_webcallService_) {
scope = $rootScope.$new();
webcallService=_webcallService_;
$location=$injector.get('$location');
controller = $controller('UserController', { '$scope': scope });
}));
it('checks the troller name', function () {
expect(scope.name).toBe('Superhero');
});
});
source to share
The problem you are probably running into is that your test code runs before it needs to + angular completes initialization. You have to write your test code to use your requirejs and angularjs requirements.
This probably means setting up your tests using require / define just like the rest of your code, and changing the runner accordingly.
A possible solution would be a setup like the one suggested in the accepted answer here: Getting Requirements to Work with Jasmine
UPDATE: also check this Doesn't Jasmine 2.0 work with require.js? This basically tells you that without changing the jasmine boot.js there is no way to defer the jasmine 2 initialization until the requirement is met.
source to share
Try this way:
describe('Controller:UserController', function () {
var scope,controller;
beforeEach(module('app'));
beforeEach(inject(function ($controller,$rootScope) {
scope = $rootScope.$new();
controller = $controller('UserController', { '$scope': scope });
}));
it('checks the troller name', function () {
expect(scope.name).toBe('Superhero');
});
});
I have some unit tests online with Jasmine 2.0 , you can look at the code. For example this: http://vtortola.github.io/ng-terminal-emulator/tests/spec/vtortola.ng-terminal.spec.js
source to share