How to test Angular controller having a service

Question

I am having a controller and service like below

(function () {

    var mockController = function ($scope, MockService) {
        $scope.message = "This is a text message";

        $scope.getCities = function () {
            $scope.places = [];
            MockService.getCities().then(function (response) {
                var places = response.data["weather-app:root"].city;
                if (places) {
                    if (Array.isArray(places)) {
                        $scope.places = places;
                    } else {
                        $scope.places.push(places);
                    }
                }
            });
        };

    };


    var mockService = function ($http) {
        this.getCities = function () {
            return $http.get("../rest/url", {
                headers: {
                    'Accept': 'application/yang.data+json'
                }
            });
        };
    };

    angular.module("MockApp", [])
        .service("MockService", mockService)
        .controller("MockController", mockController);

}())

I created a mock service like below for mocking the service for unit testing.

(function () {
    angular.module('mock.service', [])
        .service('MockService', function ($q) {
            var mockService = {};
            mockService.getCities = function () {
                var mydata = {
                    "weather-app:root": {
                        "city": [
                            {
                                "city-name": "Chennai"
                                , "country-name": "India"
                            }




                            , {
                                "city-name": "Mangalore"
                                , "country-name": "India"
                                }
                                ]
                    }
                }
                return $q.when(mydata);
            };
            return mockService;

        });
}());

My test case is like

describe("MockController", function () {

    var $scope;

    beforeEach(function () {
        module("MockApp");
        beforeEach(module('mock.service'));

        inject(function (_$controller_, _$rootScope_, _MockService_) {
            $scope = _$rootScope_.$new();
            controller = _$controller_("MockController", {
                $scope: $scope
                , MockService: _MockService_
            });

        });
    });

    describe("Test", function () {

        it("Should be Bangalore", function () {
            $scope.getCities();
            console.log($scope.places);
        });
    });

});

the problem is that the then method in controller is not getting called. How can I resolve the issue ?

Possible duplicate of Unit-test promise-based code in Angular — Phil
– Phil, Commented May 16, 2016 at 6:44
@Phil where should i call it if i call it in the beforeeach its throwing error saying apply not function — robin
– robin, Commented May 16, 2016 at 6:55
Whoops, was meant to be $scope.$apply() (forgot a $). In any case, I saw another problem so compiled it all into an answer. — Phil
– Phil, Commented May 16, 2016 at 7:03

Phil · Accepted Answer · 2016-05-16 07:02:27Z

1

Three things to fix...

Don't nest the beforeEach calls. You can init multiple modules with module.

beforeEach(function() {
    module('MockApp', 'mock.service');
    // and so on

Your mock data does not quite match what you'd see from an $http based promise response
```
return $q.when({data: mydata});
```

In order to process promises, you need to trigger a digest cycle

it("Should be Bangalore", function() {
    $scope.getCities();
    $scope.$apply();
    console.log($scope.places);
});

answered May 16, 2016 at 7:02

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

How to test Angular controller having a service

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related