Using angular-mocks

[tauren]

It seems that loading angular-mocks via JSPM does not expose globals such as module and inject. What is the recommended way to access them? The following works, but is there a different approach that is better?

var angular = require('angular');
require('angular-mocks');

describe('MyController', function() {
  beforeEach(angular.mock.module('MyApp'));
  beforeEach(angular.mock.inject(...));
  it(...);
});

Is this a deficiency in https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-mocks%401.3.0-beta.19.json ? Should it be exporting globals?

[capaj]

@tauren I do it the same way. Haven't found a better way. Though there are things around karma-jspm which suck much more I think.

[nightire]

Since lot of tests need to import angular-mock (and angular itself is its dependency) so what I've done is to write a helper like this:

import 'angular-mock'

let helper = {
    module: angular.mock.module,
    inject: angular.mock.inject
}

export default helper

then, every test file just import this helper:

import helper from 'test/helper'

// use helper.module & and helper.inject or name the helper anything else you like

currently no better way to do this for what I know.

[delta62]

First off, it's a good idea to declare all of your global modules (angular, angular-mocks) explicitly in your JSPM configuration. In addition to preventing race conditions, this will automatically ensure that dependencies (angular in this situation) will be loaded in the correct order. You could do this with karma-jspm like so in your karma.conf.js file:

    ...

    jspm: {
      meta: {
        'jspm_packages/github/angular/angular.js': {
          format: 'global',
          exports: 'angular'
        },
        'jspm_packages/gitub/angular/angular-mocks.js': {
          format: 'global',
          deps:   'angular'
        }
      },
      loadFiles:  ['spec/**/*-spec.js'],
      serveFiles: ['lib/**/*.js']
    },

    ...

After that, you can just import the pieces that you need directly if you are using the ES6 syntax.

import { module, inject } from 'angular-mocks';

beforeEach(module('MyApp'));
beforeEach(inject(...));
it(...);

If you are using the AMD syntax, you would have to qualify the mock functions you want to use:

define(['angular-mocks'], function(mock) {
  beforeEach(mock.module('MyApp'));
  beforeEach(mock.inject(...));
  it(...);
});