Getting Jasmine to Work with Angular JS

Question

I am trying to get Jasmine to work with my Angular JS Project But I always keep getting the following error. I am trying to get it to run a very very simple test. Also I have setup the angular js project using RequireJS. I have given my code below.

The Error I get is :

enter image description here

My Very Simple TestSpec is as given 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 as given 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 the TestRunner.html is :

<!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 the requirejs dependencies is :

(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 given the entire source for my seed project here. I would much appreciate it if anyone could help me out.

i use karma test runner to run jasmine unit tests on my angular app, do you want to know how it is done? — Vamsi, Aug 20 '14 at 10:12
where is app.js defined? it looks like you're not including that from the files you've provided. I'm assuming this file is where you do the original `angular.module('app', [])`? — gonzofish, Aug 22 '14 at 17:10
How did you define 'app' module? What test runner do you use? — ne4istb, Aug 24 '14 at 17:02

score 1 · Answer 1 · edited Aug 22 '14 at 06:18

You should include all the 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');
    });     
});

score 1 · Answer 2 · edited May 23 '17 at 12:09

The issue you are probably experiencing is that your test code runs before require+angular finishes initializing. You should write your testcode to take your use of requirejs and angularjs into account.

This will probably mean configuring your tests using require/define just like the rest of your code, and modifying the runner accordingly.

A possible solution would be a setup like the one proposed in the accepted answer here: Getting requirejs to work with Jasmine

UPDATE: also make sure to check this Does Jasmine 2.0 really not work with require.js? That basically tells you that without modifying the jasmine boot.js there is no way to postpone jasmine 2's initialization until after require is done.

score 0 · Answer 3 · answered Aug 17 '14 at 21:53

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 may want to take a look a the code. For example this one: http://vtortola.github.io/ng-terminal-emulator/tests/spec/vtortola.ng-terminal.spec.js

Tried it. Did not help :(. I have provided a link to the entire seed project source code at the end of the question. It would be great if you could download it,run it and provide feedback. You simply need to open the "TestRunner.html" in the "test" folder in your browser. — msrameshp, Aug 18 '14 at 01:05

score 0 · Answer 4 · answered Aug 17 '14 at 22:19

0

I am guessing your app.js is never included.

Guessing it should be added below this:

 <!-- include source files here... -->
 <script data-main="main" src="framework/lib/require.js"></script>

answered Aug 17 '14 at 22:19

user3915433

59
1
2

I have already done this in the code. Did not help :(. I have provided a link to the entire seed project source code at the end of the question. It would be great if you could download it,run it and provide feedback.You simply need to open the "TestRunner.html" in the "test" folder in your browser. – msrameshp Aug 18 '14 at 01:04

Getting Jasmine to Work with Angular JS

4 Answers4