Angular modal controller testing error

Question

I have a hard time trying to test a modal controller (created using Angular UI Bootstrap). I dumbed down the test code as much as I could but I am still getting an error. Here's the modal controller (part of it):

var controllersModule = angular.module('forge.geomanagement.controllers');

controllersModule.controller('EditGeofenceModalController', function ($timeout, $scope: , $modalInstance, forgeGeoTriggerService, $rootScope, geofence, triggerID) {

  var searchAddressInput: HTMLInputElement;
  //make a copy of geofence obj passed into modal
  $scope.geofence = {
    FriendlyName: geofence.FriendlyName,
    Coords: angular.copy(geofence.Boundary),
    GeoTags: angular.copy(geofence.GeoTags)
  };
  $scope.goefenceID = triggerID;

  var gCLength = $scope.geofence.Coords.length;

  //wrap it in timeout function to paint the map after its container is rendered
  $timeout(function () { 

    $scope.geofenceMap = new google.maps.Map(document.getElementById('map_canvas'),  $scope.mapOptions);
    //autocomplete functionality
    searchAddressInput = document.getElementById('pac-input');
    $scope.autocomplete = new google.maps.places.Autocomplete(searchAddressInput, $scope.mapOptions);
    $scope.autocomplete.bindTo('bounds', $scope.geofenceMap); //set autocomplete suggestion bounds to map's current viewport

    //bind autocomplete to the map
    google.maps.event.addListener($scope.autocomplete, 'place_changed', function () {
        $scope.place = $scope.autocomplete.getPlace();
        $scope.geofenceMap.panTo($scope.place.geometry.location);
        $scope.geofenceMap.setZoom(12);
        $scope.model.searchAddress = $scope.place.formatted_address;
        $scope.$digest();
    });

    //GEOFENCE FUNCTIONALITY
    forgeGeoTriggerService.GeofenceCreator($scope.geofenceMap, $scope.geofence.Coords);

    //show geofence in edit mode
    forgeGeoTriggerService.ShowGeofence($scope.geofenceMap, $scope.geofence.Coords);

    $scope.$on("polygonPath.updated", function (event, geofenceCoords) {
        $scope.$apply(function () {
            $scope.geofence.Coords = geofenceCoords;
        });
    });

    //clear geofence area btn
    $scope.clearGeofenceArea = function () {
        forgeGeoTriggerService.ClearGeofenceArea();
        $scope.geofence.Coords.length = 0; // clear geofence array
    };

}, 0);

$scope.cancel = function () {
    $modalInstance.close()
};

$scope.saveGeofence = function () {
    forgeGeoTriggerService.EditGeofence($scope.geofence, $scope.goefenceID)
        .then(function (data) {
            $scope.successMessage = 'Geofence Updated Successfully'
            $rootScope.$broadcast('geotrigger.edited');
            $timeout(function () {
                $modalInstance.close();
            }, 2000);
        }, function (data) {
            $scope.errorMessage = 'There was an error when updating geofence. Please try again.';
        });
}

});

This is modal controller test

describe("forge.geomanagement.GeoApp", function () {

var scope, controller, modalInstance, timeout, forgeGeoTriggerService, window = {},
    geofencemock, geofence, triggerID;

beforeEach(module('forge.geomanagement.GeoApp'));

describe("Controller: EditGeofenceModalController", function () {

    beforeEach(inject(function ($controller, $rootScope, $timeout, _forgeGeoTriggerService_) {
        scope = $rootScope.$new();
        timeout = $timeout;

        modalInstance = { 
            close: jasmine.createSpy('modalInstance.close'),
            dismiss: jasmine.createSpy('modalInstance.dismiss'),
            result: {
                then: jasmine.createSpy('modalInstance.result.then')
            }
        }

        geofencemock = {
            FriendlyName: 'mock geofence',
            Coords: [
                {
                    "lat": 53.5598889724547,
                    "lng": -6.36953830718994
                },
                {
                    "lat": 53.463525599115,
                    "lng": -6.53707981109619
                },
                {
                    "lat": 53.3685818160803,
                    "lng": -6.46841526031494
                },
                {
                    "lat": 53.384966558115,
                    "lng": -5.75430393218994
                },
                {
                    "lat": 53.5598889724547,
                    "lng": -6.34756565093994
                },
                {
                    "lat": 53.5598889724547,
                    "lng": -6.36953830718994
                }
            ],
            GeoTags: ['tag1','tag2','tag3']
        }

        triggerIDmock = 1;

        forgeGeoTriggerService = _forgeGeoTriggerService_;

        controller = $controller("EditGeofenceModalController", {
            $scope: scope,
            $timeout: timeout,
            $modalInstance: modalInstance,
            forgeGeoTriggerService: forgeGeoTriggerService,
            geofence: geofencemock,
            triggerID: triggerIDmock
        });
    }));

    it('2 is 2', function () {
        expect(2).toBe(2);
    })

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

    it("should contain reference to forgeGeoTriggerService", function () {
        expect(forgeGeoTriggerService).not.toBeNull();
    });

    it("$modalInstance obj should be defined when modal is open", function () {
        expect(modalInstance).toBeDefined();
    });

    it("cancel function should close edit geofence modal", function () {
        scope.cancel();
        expect(modalInstance.close).toHaveBeenCalled();
    });

});

});

But when I try to run it I get the error: "Cannot read property length of undefined" that corresponds to $scope.geofence.Coords property - an array that is successfully copied over to modal from parent controller. As you can see, I also created a geofencemock object and tried to use it in a very simple test but it looks like it's not being picked up. I would really appreciate some input, cause I have already spent couple of hours trying to fix it or find a solution online, but to no avail.

Thanks.

rayners · Accepted Answer

You're setting $scope.geofence.Coords from geofence.Boundary:

$scope.geofence = {
  FriendlyName: geofence.FriendlyName,
  Coords: angular.copy(geofence.Boundary),
  GeoTags: angular.copy(geofence.GeoTags)
};

But you're mocking geofence with Coords directly:

geofencemock = {
  FriendlyName: 'mock geofence',
  Coords: [
    {
      "lat": 53.5598889724547,
      "lng": -6.36953830718994
    },

Change the latter to be geofencemock.Boundary and you should be fine.

Angular modal controller testing error

Answers (2)

Related Questions