AngularJS controller test failing with RequireJS

Question

My jasmine test (using karma) throws the error : Argument 'salesListController' is not a function, got undefined

After searching a lot this question seems close to my error, but this is unit test not e2e scenario test.

My test-main.js

(function (window, require) {
'use strict';
var file, requireModules;
requireModules = [];

for (file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
       // console.log('loaded file'+ file);
        if (file.substring(file.length - 26, file.length) === 'salesListControllertest.js') {
            console.log('Added file to testing..');
            requireModules.push(file);
        }
    }
}

//requireModules.push('appModule');
//requireModules.push('mocks');
deps: requireModules,
require({
    baseUrl: '',
    paths:{
        'angular': '/base/app/bower_components/angular/angular',
        'angularResource': '/base/app/bower_components/angular-resource/angular-resource',
        'angularMocks': '/base/app/bower_components/angular-mocks/angular-mocks',
        'appModule': '/base/app/scripts/appModule',
        'appRoutes':'/base/app/scripts/appRoutes',
        'services/dependencyResolverFor':'/base/app/scripts/services/dependencyResolverFor',
        'salesListController' : '/base/app/scripts/controllers/salesListController'
    },
    shim:{
        'angular' :{
            exports:'angular'
        },
        'appRoutes': {exports:'appRoutes'},
        'services/dependencyResolverFor' : {exports:'services/dependencyResolverFor'},
        'appModule': {
            deps: ['appRoutes', 'services/dependencyResolverFor'],
            exports: 'appModule'
        },
        'angularResource': {
            deps: ['angular'],
            exports: 'angularResource'
        },
        'angularMocks': {
            deps: ['angularResource'],
            exports: 'angularMocks'
        } ,
        'salesListController': {
            deps: ['appModule'],
            exports: 'salesListController'
        }
    }
}, requireModules, function () {
    window.__karma__.start();
}, function (err) {
    var failedModules = err.requireModules;
    console.log("err", err);

    if (failedModules && failedModules[0]) {
        throw new Error("Module could not be loaded: " + failedModules);
    } else {
        throw new Error("unknown error:" + err);
    }
});   }(window, require));

My example.spec

define(['appModule','angular', 'angularResource', 'angularMocks','salesListController'],
function(app, angular, angularResource, angularMocks, saleslstCtrl) {
    describe('SalesListController1', function(){
        beforeEach(module('AngularSampleBhoomiApp'));
        var SalesListController, scope;
        var sales = [{Customer:"A1",Number:1,Id:1},{Customer:"B1",Number:2,Id:2}];
        beforeEach(inject(function($controller, $rootScope,$injector){
        scope = $rootScope.$new();
        SalesListController = $controller('salesListController', {$scope:scope, getAllSalesResolved:sales});
    }));
    it('should have 0 items when loaded', function(){
        expect(scope.sales).toBeUndefined();
    });
});});

My example controller

define(['appModule'], function(myApp){
function SalesLstCtrl(){
    myApp.lazy.controller('salesListController' ,['$scope', 'getAllSalesResolved',
        function ($scope, sales) {
            console.log('before sales');
            $scope.sales= sales;
            console.log( $scope.sales.length);
        }]);                          }
return SalesLstCtrl;});

Since I am using lazy loading I am resolving the dependencies like this :

define([], function()
{
return function(dependencies)
{
    var definition =
    {
        resolver: ['$q','$rootScope', function($q, $rootScope)
        {
            var deferred = $q.defer();

            require(dependencies, function()
            {
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }]
    }
    return definition;
} });

My github repo with the entire sample is here

Pl help.

Bhoomi, is this working? If you've a solution, please update here ... Thanks. — user237865
– user237865, Commented Dec 7, 2013 at 4:17

Bhoomi · Accepted Answer · 2013-12-30 04:24:58Z

0

Yes, I have found the solution.

Here is my blog post for the same.

GitHub code is here : sample

It is done through mocking the module creation.

Edit : With code. The trick here is to initialize AngularJS like this :

define(function(){ var app = angular.module('AngularAppModule', 'ngResource']);app.lazy = app;  return app;});

This will add app.lazy reference in Angular, and then RequireJS can initialize the controllers the same way. Test-main.js file is the same. For running Karma, test-main will load all the scripts upfront and Require will not be intrusive. Let me know if you have further questions.

edited Dec 30, 2013 at 4:24

answered Dec 29, 2013 at 16:18

Bhoomi

8017 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kleopatra Over a year ago

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.

Collectives™ on Stack Overflow

AngularJS controller test failing with RequireJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related