How do I test AngularJS controllers using RequireJS?

Question

Here's my Jasmine spec,

define(['app', 'angular', 'angularResource', 'angularMocks'], function() {
describe('App module tests', function(){
    var module, $rootScope, scope, AppCtrl;
    beforeEach(function () {
        module = angular.module("MyApp");
        inject(function($rootScope, $controller){
            // The injector unwraps the underscores (_) from around the parameter names when matching
            scope = $rootScope.$new();
            AppCtrl = $controller('AppCtrl', {$scope: scope});
        });
    });
    });
});

In my app.js, I have..

var MyApp = angular.module('MyApp');
MyApp.controller('AppCtrl', ['$rootScope', function($rootScope){
// controller code here
}]);

When I run the unit test, I get below error,

Error: Argument 'AppCtrl' is not a function, got undefined

Also, here's my test-main.js,

var tests = Object.keys(window.__karma__.files).filter(function (file) {
    return (/Spec\.js$/).test(file);
});
requirejs.config({
    // Karma serves files from '/base'
    baseUrl: '/base/src',
    paths: {
        'angular': 'libs/angular',
        'angularResource': 'libs/angular-resource',
        'angularMocks': 'libs/angular-mocks',
        'app': 'app/app'
    },
    // ask Require.js to load these files (all our tests)
    deps: tests,
    // start test run, once Require.js is done
    callback: window.__karma__.start
});

And my karma configuration,

// list of files / patterns to load in the browser
files = [
    JASMINE,
    JASMINE_ADAPTER,
    REQUIRE,
    REQUIRE_ADAPTER,
    'src/libs/angular.js',
    'src/libs/angular-resource.js',
    'src/libs/angular-mocks.js',
    {pattern: 'src/app/*.js', included: false},
    {pattern: 'src/app/**/*.js', included: false},
    {pattern: 'test/**/*Spec.js', included: false},
    'test/test-main.js'
];

zs2020 · Accepted Answer · 2013-07-30 22:35:31Z

2

Try this. I think you need to get rid off the function wrapping the inject().

define(['app', 'angular', 'angularResource', 'angularMocks'], function () {
    describe('App module tests', function () {
        var module, $rootScope, scope, AppCtrl;
        beforeEach(angular.module("MyApp"));

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

Editied:

I think you need ANGULAR_SCENARIO_ADAPTER to work with karma.

edited Jul 30, 2013 at 22:35

answered Jul 30, 2013 at 19:16

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

1 Comment

zs2020 Over a year ago

I think you need ANGULAR_SCENARIO_ADAPTER to work with karma.

Collectives™ on Stack Overflow

How do I test AngularJS controllers using 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