Organizing unit tests in angular app

Question

Testing modules dependent on other modules, and providers and services in them - possible. Let's say we need to test module 'A' that depends on module 'B':

totally not coffeescript, rather pseudo code for brevity :)

 beforeEach ->
    angular.module('B',[])
    module ($provide)->
       $provide.provider 'foo', -> 
           this.$get = ->  # ...etc...etc.

 it 'testing module A', ->
    module('A')     
    inject ->  # ...etc...etc.

Now, imagine we have quite a few modules that need to be mocked, and many services and providers. So how would you move faking 'B' part into a separate file? and how they'd be used after? It's quite possible to use module loaders (webpack, browserify) but how would one do without? Using angular capabilities and what Karma offers out of the box?

Is it possible to wrap entire mock into an angular module and load it in beforeEach?

Answer 1

Yes, actually, making services their own modules can easily be tested in Angular using Karma.

As long as you have your testing framework set up properly—Angular mocks, and all of the required modules are loaded into Karma (check the Karma config)—then this is fairly straight-forward.

The below example assumes FirstService is the service you are testing, and SecondService is another service that FirstService depends on and interacts with.

describe('FirstService', function () {
  var SecondService;

  beforeEach(module('FirstService'));

  beforeEach(inject(function (_SecondService_) {
    SecondService = _SecondService_;
    spyOn(SecondService, 'doSomethingElse');
  }));

  it('calls SecondService.doSomethingElse', function () {
    FirstService.doSomething();

    expect(SecondService.doSomethingElse).toHaveBeenCalled();
  });
});

You include the module in a beforeEach as specified on the first line—do not use square brackets [] when including it as that redefines the module and you want to include the existing module as-is.

Although you should omit the square brackets when importing modules, you should be sure that when you are initially creating your FirstService module (e.g., in your app.js file, if that's how your project is set up) that you are indeed including SecondService as a dependency:

angular.module('FirstService', ['SecondService'])

The second beforeEach is injecting the SecondService module. It is already globally available to be injected and can be accessed by its module name with a leading and trailing underscore, i.e. _SecondService_. I've assigned it to a variable so that it is available to be used in the it statements, otherwise I would need to inject it in each it statement instead of a beforeEach.

I am creating a spy using Jasmine's spyOn to spy on the method doSomethingElse to ensure it has been called. The second parameter of spyOn (the method name) should have quotes but the first should not—it should be the variable you just defined for your SecondService.

The example unit test tests that calling FirstService.doSomething() calls SecondService.doSomethingElse().