How to implement a unit test for Angular JS controller with ajax service?

Question

I have tried to write unit test for below code, but I can't able to achieve it.

Service code:

angular.module('ActivityApp').service('PersonService', [
    '$http',
    function ($http) {

        var person = function () {
            return $http({
                method: 'GET',
                url: '/apis/person'
            });
        };

        return {
            Person: person
        }
    }]);

Controller code

angular.module('ActivityApp').controller('PersonController', [
    '$scope',
    'PersonService',
    function ($scope, PersonService) {
        'use strict';

        $scope.person = PersonService.Person().then(function(res) { alert(res.data) });


        $scope.save = function () {
            PersonService.Person().then(function (res) { alert(res.data) });
        };
    }]);

Unit test code:

describe("EDI controller", function () {
    var $httpBackend, $rootScope, mycontroller, personService, $http, $httpBackend, $scope, deferred, $controller;

    beforeEach(module('ediapp'));

    beforeEach(function () {
        filesAjaxService = jasmine.createSpyObj('personService', [
            'Person'
        ]);

        module(function ($provide) {
            $provide.value('personService', personService);
        });
    });

    beforeEach(inject(function (_$controller_, _$rootScope_, _personService_, _$http_, _$httpBackend_) {
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $controller = _$controller_;
        $scope = _$rootScope_.$new();
        $rootScope = _$rootScope_;
        personService = _personService_;
        $http = _$http_;
        $httpBackend = _$httpBackend_;
        mycontroller = $controller("filesCtrl", {
            $scope: $scope,
            PersonService: personService
        });

    }));

    it("Called", function () {
        // expect(fileController).toBeDefined();
        // expect(filesAjaxService.GetAllFiles).toHaveBeenCalled();
    });

    afterEach(function () {
        // $httpBackend.verifyNoOutstandingExpectation();
        // $httpBackend.verifyNoOutstandingRequest();
    });

});

When I run the above test case I get below error

TypeError: undefined is not an object (evaluating 'PersonService.Person().then(')

Can anyone provide a solution to solve this issue?

Maher · Answer 1 · 2017-12-14T07:08:32.540

This question made me curious that I was looking for a solution because I had not done it before and it was very good for me.

i search after answer like you, and I was able to merge them together.

hope helps you [you can test it here]

var app = angular.module('app', []);

app.controller('ctrl', function($scope, httpService) {

  $scope.url = "https://jsonplaceholder.typicode.com/users";

  httpService.getUsers().then(function(data) {
    $scope.users = data;
  })

});

app.service("httpService", function($http) {
  this.getUsers = function() {
    return $http.get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        return response.data;
      });
  }

})

describe('unitTest', function() {

  beforeEach(module('app'));

  var $controller, $httpService;

  beforeEach(inject(function($injector, _$controller_, _httpService_) {
    $httpBackend = $injector.get('$httpBackend');
    $controller = _$controller_;
    $httpService = _httpService_;
  }));


  describe('getUsers', function() {
    it('get users from httpService.getUsers()', inject(function() {
      var $scope = {};
      var controller = $controller('ctrl', {
        $scope: $scope
      });

      $httpService.getUsers().then(function(data) {
        $scope.valid = true;
        $scope.response = data;
      })

      $httpBackend.when('GET', $scope.url).respond(200, {
        foo: 'bar'
      });

      $httpBackend.flush();

      expect($scope.valid).toBe(true);
      expect($scope.response).toEqual({
        foo: 'bar'
      });
    }));
  });
});

<!-- Jasmine References -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>

<!-- Angular and Angular Mock references -->
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="user in users">
      {{user.name}}
    </li>
  </ul>
</div>

How to implement a unit test for Angular JS controller with ajax service?

1 Answers1