AngularJS Unit Testing - TypeError: Cannot read property 'title' of null

Question

I am new with AngularJS, so for learning purpose..I have built a very simple app which has one title as "Hello friends!" and a button named "Change the title!", on click it results to the change in the title as "How are you?"...

Now for doing Unit-testing, I wrote testcases.. but faces unusual errors like:

Chrome 35.0.1916 (Windows 7) titleCtrl Intially has a title FAILED, Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector
TypeError: Cannot read property 'title' of null at null: C:/Myapp1/test/test.js:21
Chrome 35.0.1916 (Windows 7) titleCtrl Clicking the button changes the title FAILED, Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector
TypeError: Cannot read property 'changeIt' of null: C:/Myapp1/test/test.js:26

So, for your reference am adding these files: scope.html, controller.js and test.js :

scope.html

<!doctype html>
<html ng-app="app">

<head runat="server">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="C:/Myapp1/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs-1.2.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div ng-controller= "titleCtrl">
    <h1 ng-model = "title">{{title}}</h1>
    <button ng-click="changeIt()">Change the title!</button>
    </div>
</form>
</body>
</html>

controller.js

var myModule = angular.module('app',[]);
var $scope = null;

myModule.controller('titleCtrl', function($scope)
{
    $scope.title="Hello friends!";
    $scope.changeIt = function()
    {
        $scope.title = "How are you?";
    };
});

test.js

describe('titleCtrl', function()
{
    var $controller = null;
    var $scope = null;

    beforeEach(function()
    {
        module('myModule');
    });
    beforeEach(inject(function($controller,$rootScope)
    {
        $scope = $rootScope.$new();
        controller = $controller('titleCtrl',
        {
            $scope: $scope
        });
    }));
    it('Intially has a title', function()
    {
        expect($scope.title).toBe("Hello friends!");

    });
    it('Clicking the button changes the title', function()
    {
        $scope.changeIt();
        expect($scope.title).toBe("How are you?");
    });
});

Am kind a stuck with this error.. Any help will be appreciated..

score 1 · Accepted Answer · answered Jul 22 '14 at 09:52

1

You're almost there, there are a couple of weird things on the way:

On the html, better load your own code after you load all your vendor libraries. On the other hand, I am not so sure if that angular-mocks path is going to work that way.

It seems to be asp.net mvc, but in angular those runat are not needed (or at least it shouldn't, but I am not an asp.net user).

On the controllers file, that $scope = null is going to give errors, there is no $scope there.

And finally on the test, you only have 1 error.

The module('foo') loads your module into the test and in your case, you're loading a module named myModule and there is none with that name, your module is named app. You need to change that.

Doing that, your tests will work. Check here for a demo.

answered Jul 22 '14 at 09:52

Jesus Rodriguez

11,918
9
64
88

Hi Jesus, thanks.. The tests successfully ran by changing the module name.. But I have one question that "app" is a name given to my app and not to the module.. Can u please explain me..? How u said that "app" is my module name..? As I have defined var myModule = angular.module('app',[]); , so here "app" meant app-name and "myModule" a var for defining module.. – Newbie Jul 22 '14 at 10:09
Am new to this.. so your answer will be beneficial to me in future.. :) – Newbie Jul 22 '14 at 10:10
Angular works by creating modules, you can have 1 or dozens. You have one called `app` by the `angular.module('app', [])`. That defines one `app` module and there is where you are creating your controller. Then when you have your 1 or many modules, you assign one to be your main module (by putting its name on the `ng-app`). So you have a `app` module which is also the one on the `ng-app` and your controller is also there. That means that the module you need to load, is the one where your controller is, AKA `app`. – Jesus Rodriguez Jul 22 '14 at 10:22
Ohh..Thanks.. That's Great.. So, we need to know controller's location to load any module.. – Newbie Jul 22 '14 at 14:04

AngularJS Unit Testing - TypeError: Cannot read property 'title' of null

1 Answers1