CODEWITHSUNDEEP
testingmockingangularjsrequirejsinject
Edward
Edward

Reputation: 929

Injection in test when using Angularjs & requirejs

I am trying to use AngularJS with RequireJS currently, but I do not know how to make the test work with injection. Without RequireJS we could,

Impl 

PhoneListCtrl.$inject = ['$scope', '$http'];  
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { 
    /* constructor body */ 
}];

Test

beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
  $httpBackend = _$httpBackend_;
  $httpBackend.expectGET('phones/phones.json').
      respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
  scope = $rootScope.$new();
  ctrl = $controller(PhoneListCtrl, {$scope: scope});
}));

However, when we use RequireJS we may define the controller as following,

demoController.js

define(["dependency"], function() {
    /* constructor body */ 
});

When using this controller, we add it as one of the dependencies and do not have a variable declaration.(Let me just use "Controller" as an example since we'd better call it "Service")

someJS.js 

define(["demoController"], function(controller) {
     controller.method();
});

My Question
How can we inject the $http, $scope(or something else) to the target controller or service for testing when using RequireJS(AMD)?

Any help would be highly appreciated.

Upvotes: 0

Views: 1548

Answers (2)

Edward
Edward

Reputation: 929

I finally made it work by following. 

angular.module('app').controller('MyController', ['$scope', 'dep2', function              ($scope, dep2) {
    $scope.method = function () {//do something};
}]);

We can use this controller in test cases like this: 

inject(function($controller, $rootScope, dep2) {
        scope = $rootScope.$new();
        myController = $controller("MyController",
                {
                    $scope : scope,
                    dep2: dep2
                });
);

Upvotes: 0

asgoth
asgoth

Reputation: 35829

I've done something similar:

/*global define, document */

define(['angular', 'jquery'], function (angular, $) {
    'use strict';

    return function () {
        var $injector = angular.bootstrap(document, ['myApp']);
        var $controller = $injector.get('$controller');
        var myController = $controller('myController');
    };
});

The idea is that angular.bootstrap returns an injector, which allows you to fetch a service.

Upvotes: 1

Related Questions