CODEWITHSUNDEEP
angularjsjasmineleaflet
Geetika Sharma Bhargava
Geetika Sharma Bhargava

Reputation: 21

Unable to access leafletData object in jasmine tests

We are using angularjs with leaflet to display maps. Along with it we are using jasmine(1.3.1.5) + maven for the tests. In the specs written, we are unable to access the leafletData object. The controller goes like this:

  angular.module('TestProject').controller('TestCtrl', ['$scope', 'leafletData',       
         function TestCtrl($scope, leafletData){
         'use strict';
          $scope.map;
          leafletData.getMap().then(function(map) {
                var southWest = L.latLng(-90, -180),
                northEast = L.latLng(90, 180),
                bounds = L.latLngBounds(southWest, northEast);
                mapObj.setMaxBounds(bounds);
                mapObj.options.maxZoom = 19;
                mapObj.options.minZoom = 1;
                $scope.map=map;
                $scope.featureGroup = L.featureGroup().addTo($scope.map);
      });
  }]);

The spec for the controller is:

   describe("test controller",function() {
        var scope,leafletData, compile;

        beforeEach(module("TestProject"));

        beforeEach(inject(function($controller, $rootScope, $compile, leafletData) {
            scope = $rootScope.$new();
            compile = $compile;

            $controller('TestCtrl', {
                '$scope' : scope,
                'leafletData' : leafletData
            });
        }));

        it("test function", function() {
            var element = angular.element('<leaflet></leaflet>');
            element = compile(element)(scope);
            expect(leafletData).toBeDefined();
            leafletData.getMap().then(function(map) {
                scope.map = map;
            });
            $rootScope.$digest();
            expect(scope.map.getZoom()).toEqual(1);
            expect(scope.map.getCenter().lat).toEqual(0);
            expect(scope.map.getCenter().lng).toEqual(0);
        });

  });

And the error we are getting is:

1.) test controller it test function <<< FAILURE! * Expected undefined to be defined. * TypeError: 'undefined' is not an object (evaluating 'leafletData.getMap') in spec/controllers/testCtrlSpec.js (line 22)

We have specifically imported all the js files within angular-leaflet-directive but it doesn't seem to work. We also had the feeling that this could be an issue with the angular module name difference and we tried using beforeEach(module("TestProject", "leaflet-directive")); but this also did not solve our problem.

Please help us with this!!

Upvotes: 2

Views: 1554

Answers (1)

user2943490
user2943490

Reputation: 6940

leafletData is not defined because it's declared at the top of the tests, but never has a value assigned to it. This is the general pattern to follow when bringing in injectables into your tests:

describe("test controller",function() {
    var leafletData;

    beforeEach(module("TestProject"));

    beforeEach(inject(function(_leafletData_) {
        // without this, leafletData will be undefined
        leafletData = _leafletData_;
    }));

    it("should be defined", function() {
        expect(leafletData).toBeDefined();
    });
});

Moreover, when doing any unit testing, the code under test should be tested in isolation. Any services it relies on (i.e. leafletData in this case) and the responses from those services, should be mocked. For example:

describe("test controller",function() {
    var $q;
    var scope;
    var leafletData;

    var mockMapData = {
        // ...
        // some mock map data
        // ...
    };

    beforeEach(module("TestProject"));

    beforeEach(inject(function(_$controller_, _$rootScope_, _$q_, _leafletData_) {
        scope = _$rootScope_.$new();
        $q = _$q_;
        leafletData = _leafletData_;

        // mock the leafletData
        spyOn(leafletData, 'getMap').andReturn($q.when(mockMapData));

        _$controller_('TestCtrl', {
            '$scope' : scope
        });
    }));

    it("test function", function() {
        scope.$digest();
        expect(scope.map).toEqual(mockMapData);
    });
});;

Upvotes: 2

Related Questions