How do you mock a service in AngularJS when unit testing with jasmine?

Question

Let's say I have a service shop that depends on two stateful services schedule and warehouse. How do I inject different versions of schedule and warehose into shop for unit testing?

Here's my service:

angular.module('myModule').service('shop', function(schedule, warehouse) {
    return {
        canSellSweets : function(numRequiredSweets){
             return schedule.isShopOpen()
                 && (warehouse.numAvailableSweets() > numRequiredSweets);
        }
    }
});

Here are my mocks:

var mockSchedule = {
    isShopOpen : function() {return true}
}
var mockWarehouse = {
    numAvailableSweets: function(){return 10};
}

Here are my tests:

expect(shop.canSellSweets(5)).toBe(true);
expect(shop.canSellSweets(20)).toBe(false);

isherwood · Accepted Answer · 2016-09-28 15:57:36Z

53

beforeEach(function () {
  module(function ($provide) {
    $provide.value('schedule', mockSchedule);
  });
});

Module is a function provided by the angular-mocks module. If you pass in a string argument a module with the corresponding name is loaded and all providers, controllers, services, etc are available for the spec. Generally they are loaded using the inject function. If you pass in a callback function it will be invoked using Angular's $injector service. This service then looks at the arguments passed to the callback function and tries to infer what dependencies should be passed into the callback.

edited Sep 28, 2016 at 15:57

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Oct 9, 2013 at 14:38

Attila Miklosi

7184 silver badges4 bronze badges

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

2 Comments

Jim Aho Over a year ago

Do you actually need the extra surrounding function? I.e. would it be possible to pass in the module function directly to beforeEach?

Jelle den Burger Over a year ago

The function wrapped around the module call is actually not needed.

Matt Richards · Accepted Answer · 2014-02-27 13:04:10Z

37

Improving upon Atilla's answer and in direct answer to KevSheedy's comment, in the context of module('myApplicationModule') you would do the following:

beforeEach(module('myApplicationModule', function ($provide) {
  $provide.value('schedule', mockSchedule);
}));

answered Feb 27, 2014 at 13:04

Matt Richards

1,4772 gold badges14 silver badges22 bronze badges

1 Comment

Jim Aho Over a year ago

So this syntax is the proper one to basically mock schedule (or any service, controller, factory) in the myApplicationModule?

Algimantas Krasauskas · Accepted Answer · 2014-02-03 17:15:53Z

7

With CoffeeScript I run in some issues so I use null at the end:

beforeEach ->
  module ($provide) ->
    $provide.value 'someService',
      mockyStuff:
        value : 'AWESOME'
    null

answered Feb 3, 2014 at 17:15

Algimantas Krasauskas

4031 gold badge5 silver badges19 bronze badges

3 Comments

endorama Over a year ago

To avoid cooffeescript implicit return you could simply add a return statement at the end of the function, so instead of returning null the function would simply not return anything. See stackoverflow.com/questions/15469580/…

Nick Perkins Over a year ago

If you say "return" it will return "undefined" -- but both ways work fine, and this way is 2 chars shorter ;) --either way, you should probably add a comment on the line because the guy who deletes it by accident is in for the same pain that you had in the first place

Shiboe Over a year ago

This fixed my (frustrating) issue. Basically, as soon as I added $provide for mocking, my angular.mock.inject no longer ran/worked. Returning null allowed them to play nicely together.

Alejandro García Seco · Accepted Answer · 2014-06-03 13:42:00Z

6

You can look here for more info

https://docs.angularjs.org/guide/services#unit-testing

You want to utilize the $provide service. In your case

$provide.value('schedule', mockSchedule);

edited Jun 3, 2014 at 13:42

Alejandro García Seco

6929 silver badges29 bronze badges

answered Oct 9, 2013 at 14:37

Adam

1,1437 silver badges7 bronze badges

Comments

bwobbones · Accepted Answer · 2017-03-23 14:47:41Z

As you are using jasmine, there is an alternative way to mock the calls with jasmine's spies (https://jasmine.github.io/2.0/introduction.html#section-Spies).

Using these you can be targeted with your function calls, and allow call throughs to the original object if required. It avoids clogging up the top of your test file with $provide and mock implementations.

In the beforeEach of your test I would have something like:

var mySchedule, myWarehouse;

beforeEach(inject(function(schedule, warehouse) {

  mySchedule = schedule;
  myWarehouse = warehouse;

  spyOn(mySchedule, 'isShopOpen').and.callFake(function() {
    return true;
  });

  spyOn(myWarehouse, 'numAvailableSweets').and.callFake(function() {
    return 10;
  });

}));

and this should work in similar fashion to the $provide mechanism, noting you have to provide local instances of the injected variables to spy on.

Emil van Galen · Accepted Answer · 2014-07-29 00:22:03Z

1

I recently released ngImprovedTesting module that should make mock testing in AngularJS way easier.

In your example you would only have to replace in your Jasmine test the ...

beforeEach(module('myModule'));

... with ...

beforeEach(ModuleBuilder.forModule('myModule').serviceWithMocks('shop').build());

For more information about ngImprovedTesting check out its introductory blog post: http://blog.jdriven.com/2014/07/ng-improved-testing-mock-testing-for-angularjs-made-easy/

answered Jul 29, 2014 at 0:22

Emil van Galen

3041 silver badge2 bronze badges

Comments

Gal Morad · Accepted Answer · 2015-06-28 18:59:35Z

1

It is simpler to put the mock on the module like this:

    beforeEach(function () {
    module('myApp');
    module({
      schedule: mockSchedule,
      warehouse: mockWarehouse
     }
    });
  });

you can use injection to get reference to these mocks for pre test manipulations :

var mockSchedule;
var mockWarehouse;

beforeEach(inject(function (_schedule_, _warehouse_) {
     mockSchedule = _schedule_;
     mockWarehouse = _warehouse_;
}));

answered Jun 28, 2015 at 18:59

Gal Morad

8667 silver badges7 bronze badges

Comments

Clemens Basler · Accepted Answer · 2016-05-03 11:30:59Z

1

I hope my answer is not that useless, but you can mock services by $provide.service

beforeEach(() => {
    angular.mock.module(
      'yourModule',
      ($provide) => {
        $provide.service('yourService', function() {
          return something;
        });
      }
    );
  });

answered May 3, 2016 at 11:30

Clemens Basler

811 silver badge8 bronze badges

Collectives™ on Stack Overflow

How do you mock a service in AngularJS when unit testing with jasmine?

8 Answers 8

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related