Help with unit tests. Variable undefined.

[christop...@googlemail.com]

Hallo.
I need your help with unit testing my AngularJS work.

The app modul

var app = angular.module('App', [
    'AppCtrl'
]);

The controller modul

var appCtrl = angular.module('AppCtrl', []);

The controller I want to test.

appCtrl.controller('SignalListCtrl', ['$scope',
    function($scope) { 
        $scope.name = "World";
}]);

 
I want to test $scope.name, but in the unit test, it is undefined. I don't know where the error is.

describe('Controller', function() {

    var scope, controller;
   
    beforeEach(function() {
        module('AppCtrl');
    });

    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        controller = $controller("SignalListCtrl", {
            $scope: scope
        });
    }));

    it('should expect name to be World', function () {
        expect(scope.name).toBe("World");
    });
});

Thanks

[xrd]

You are using karma? Are you sure all the files are loaded and in the correct order? Care to post your karma configuration file?

[christop...@googlemail.com]

Am Dienstag, 11. Februar 2014 21:38:11 UTC+1 schrieb xrd:

You are using karma? Are you sure all the files are loaded and in the correct order? Care to post your karma configuration file?

Yes. I'm using karma.
My karma.conf

module.exports = function(config){
    config.set({
    basePath : '../',

    files : [
      'app/lib/jquery/jquery.js',
      //'app/lib/jquery/jquery-ui-dialog.js',
      //'app/lib/jquery/jquery-dialog.js',
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/lib/angular/growl/*.js',
      'test/lib/angular/angular-mocks.js',
      //'app/lib/bootstrap/*.js',
      //'app/lib/highcharts/*.js',  
      //'app/lib/xml2json/*.js',
      'app/js/*.js',
      'test/unit/*.js'
    ],

    exclude : [
      //'app/lib/angular/angular-animate.js'
      //'app/lib/angular/angular-loader.js',
      //'app/lib/angular/*.min.js',
      //'app/lib/angular/angular-scenario.js',
      //'app/lib/angular/angular-ng-grid.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['Firefox'],

    plugins : [
            'karma-junit-reporter',
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

})}

 

The deps:

lib/jquery/jquery.js
lib/jquery/jquery-ui-dialog.js
lib/jquery/jquery-dialog.js

lib/angular/angular.js
lib/angular/angular-resource.js
lib/angular/angular-sanitize.js
lib/angular/angular-animate.js
lib/angular/angular-ng-grid.js
lib/angular/growl/growl.js
lib/angular/growl/growlFactory.js
lib/angular/growl/growlDirective.js

lib/bootstrap/bootstrap.js
lib/bootstrap/bootstrap-tpl.js

lib/highcharts/highcharts.js
lib/highcharts/exporting.js

lib/xml2json/xml2json.js

js/main.js
js/controller.js
js/services.js
js/directives.js

An the message when I run the test:

[33mWARN [plugin]: [39mCannot find plugin "karma-junit-reporter".
  Did you forget to install it ?
  npm install karma-junit-reporter --save-dev
[32mINFO [karma]: [39mKarma v0.10.9 server started at http://localhost:9876/
[32mINFO [launcher]: [39mStarting browser Firefox
[32mINFO [Firefox 24.0.0 (Windows 7)]: [39mConnected on socket ZZlHWw3lTzYSBZLzoTct
[31mFirefox 24.0.0 (Windows 7) Controller should expect name to be World FAILED [39m
    Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal
    http://errors.angularjs.org/1.2.9/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal in L:/Netbeans/SVN/trunk/app/lib/angular/angular.js (line 78)
    minErr/<@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:78
    createInjector/providerCache.$injector<@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3546
    getService@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3673
    createInjector/instanceCache.$injector<@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3551
    getService@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3673
    invoke@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3700
    instantiate@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3721
    @L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:6772
    @L:/Netbeans/SVN/trunk/test/unit/controllerTest.js:12
    invoke@L:/Netbeans/SVN/trunk/app/lib/angular/angular.js:3710
    workFn@L:/Netbeans/SVN/trunk/test/lib/angular/angular-mocks.js:2101
   
    angular.mock.inject@L:/Netbeans/SVN/trunk/test/lib/angular/angular-mocks.js:2086
    @L:/Netbeans/SVN/trunk/test/unit/controllerTest.js:9
    @L:/Netbeans/SVN/trunk/test/unit/controllerTest.js:1
   
    Expected undefined to be 'World'.
    @L:/Netbeans/SVN/trunk/test/unit/controllerTest.js:17
   
Firefox 24.0.0 (Windows 7): Executed 1 of 1 [31m (1 FAILED) [39m (0 secs / 0.009 secs)
[1A [2KFirefox 24.0.0 (Windows 7): Executed 1 of 1 [31m (1 FAILED) [39m [31m ERROR [39m (0.205 secs / 0.009 secs)

Thats look like an error ;)

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal

I use the ModalDialog from AngularJS in the SignalListController:

appCtrl.controller('SignalListCtrl', ['$scope', '$modal',
    function($scope, $modal) { 

scope.name = "World";

$scope.disconnect = function() {
            var quitDialogInstance = $modal.open({
                templateUrl: 'templates/quitDialog.html',
                controller: 'QuitDialogCtrl'
            });

            quitDialogInstance.result.then(function () {
            });
        };
}]);

Have I to inject the $modal in the tests? And how I could do that?

Thanks

 

 

[christop...@googlemail.com]

I changed the test a little bit.

describe('Controller', function() {

    var scope;
    var controller;
   
    beforeEach(function() {
        module('App', 'AppCtrl');
    });

    beforeEach(inject(function($controller, $rootScope) {

        scope = $rootScope.$new();
        controller = $controller("SignalListCtrl", {
            $scope: scope
        });
    }));

    it('should expect name to be World', function () {
        expect(scope.name).toBe("World");
    });
});

Now, scope is undefined. But why? The scope were built by $rootScope.$new(). Do you know where the error is?
Thanks.

[christop...@googlemail.com]

Push.

Can somebody help me, please?
I don't know what i can do now.