CODEWITHSUNDEEP
angularjsunit-testingjasminekarma-runnercode-reuse
Eduard Gamonal
Eduard Gamonal

Reputation: 8031

AngularJS + Karma: reuse a mock service when unit testing directives or controllers

I'm working with AngularJS + Karma. configService manages the settings of my app (e.g. the background-color, wether it's on debug mode, general permissions...). It loads initial data with $http. I wrote the test successfully for the service but my directives and controllers use it.

When I write the unit tests for directives, I have to mock the service.

I know I can do:

spyOn(configService, 'getBackgroundColor').andCallFake(function (params) {
   return "red";
});

but the service has 25+ methods and initial data load. I don't feel like writing (and maintaining) this spyOn thing in every test suite. What's more, I load data in the factory with $http, and that should be mocked as well. if I just inject the service and mock the calls, I'll still make the http get request.

What do you think would be the best way to reuse a mock?

Upvotes: 9

Views: 4482

Answers (2)

Stephane
Stephane

Reputation: 12790

Instead of spraying the testing code with spies you can create a proper mock of the service in its own module and add it in any test that needs it.

The controller unit test sits in a test/spec/modules/user/controller.js file.

The mocked service sits in a test/mock/modules/user/service.js file.

For a controller method:

$scope.refreshList = function() {
  UserService.all(pageNumber, size, sort, function(data) {
    $scope.users = data.content;
    $scope.page = data.page;
  });
};

the mocked service:

(function () {

'use strict';

angular.module('app.user.mock', ['app.user']);

angular.module('app.user.mock').factory('UserServiceMock',
  ['$q',
  function($q) {
    var factory = {};

    factory.mockedUsers = { 
      content: [ { firstname: 'Spirou', lastname: 'Fantasio', email: '[email protected]', workPhone: '983743464365' } ],
      page: '1'
    };

    factory.search = function(searchTerm, page, size, sort, callback) {
      var defer = $q.defer();
      defer.resolve(this.mockedUsers);
      defer.promise.then(callback);
      return defer.promise;
    };

    factory.all = function(page, size, sort, callback) {
      var defer = $q.defer();
      defer.resolve(this.mockedUsers);
      defer.promise.then(callback);
      return defer.promise;
    };

    return factory;
  }
]);

})();

and the controller unit test:

(function () {

'use strict';

var $scope;
var listController;
var UserServiceMock;

beforeEach(function() {
  module('app.project');
  module('app.user.mock'); // (1)
});

beforeEach(inject(function($rootScope, _UserServiceMock_) {
  $scope = $rootScope.$new();
  UserServiceMock = _UserServiceMock_; // (2)
}));

describe('user.listCtrl', function() {

  beforeEach(inject(function($controller) {
    listController = $controller('user.listCtrl', {
      $scope: $scope,
      UserService: UserServiceMock
    });
  }));

  it('should have a search function', function () { // (3)
    expect(angular.isFunction(UserServiceMock.search)).toBe(true);
  });

  it('should have an all function', function () {
    expect(angular.isFunction(UserServiceMock.all)).toBe(true);
  });

  it('should have mocked users in the service', function () {
    expect(UserServiceMock.mockedUsers).toBeDefined();
  });

  it('should set the list of users in the scope', function (){
    expect($scope.users).not.toEqual(UserServiceMock.mockedUsers);
    $scope.refreshList();
    $scope.$digest();
    expect($scope.users).toEqual(UserServiceMock.mockedUsers.content);
  });

});

})();

You add the app.user.mock module containing the mocked service (1) and inject the mocked service in the controller (2).

You can then test your mocked service has been injected (3).

Upvotes: 9

Paul Sweatte
Paul Sweatte

Reputation: 24627

I created a .js file that just contained a plain old javascript function that I called to create the mock. Another plain old javascript function to configure the server responses for tests. And like you say, if you define a global variable with the json responses then you can use that in your tests to compare against

Upvotes: 0

Related Questions