Loading mocks into an AngularJS unit test

I'm trying to setup my AngularJS application to test out controllers, routes, templates and so on, but I'm having an issue getting some of the helper methods provided by the angular-mocks.js to work (namely module and inject).

I'm using testacular to load up the test suite with the following files added before the specs:

files = [
  MOCHA,
  MOCHA_ADAPTER,
  '../application/lib/angular.min.js',
  './lib/angular/angular-mocks.js',
  './lib/angular/angular-scenario.js',
  '../application/application.js',
  './lib/chai.js',
  './lib/chai-should.js',
  './lib/chai-expect.js',
  './spec/**/*.js'
];

So far so good, but when I run the tests I get this issue:

ReferenceError: Can't find variable: module

Not sure where this is loaded. Am I missing something?

First thing to check is that all those files are getting loaded in the test browser. It's surprisingly easy to get a path wrong in your config and not realize it. If you're running testacular with autowatch, you can navigate to http://localhost:9876/context.html with a browser and use developer tools inspect elements/resources/network and see if anything is missing.

If everything is good there and you're still having problems, post some of your test code and I'll take a look.

UPDATE: It appears (strangely) from the comments in the source for angular-mocks.js (line 1635) that window.module is only available with Jasmine. It looks like you're using Mocha instead of Jasmine. This is very likely the culprit.

ANSWER:

I can't rightly take credit for this Matsko, since you figured it out yourself... but it turns out that the current AngularJS stable download and angular-seed contain an older version of ngMock that doesn't support Mocha. Manually replacing the mock file with the latest from the github repo solves the problem. Glad I could help ;-)

I ran into this issue today and I wanted to provide others with a complete summary of the required steps to get this working. First let's say you have a module named myApp. Inside that that module there is a service called myModel. the myModel service has a method named getItems().

  1. Currently, the angular-mocks.js (I am using AngularJS 1.0.6) does not support Mocha. You will need to visit this link and replace the 1.0.6 version with the one in the master branch from the AngularJS GitHub project. An easy way to do this (if you have wget) is wget https://raw.github.com/angular/angular.js/master/src/ngMock/angular-mocks.js in the correct directory. If you use a properly configured Sublime or vim it can also easily pull it down for you.
  2. Make sure your karma.conf.js file includes the angular-mocks.js file in files array
  3. Somewhere in your tests.js file (maybe at the top level describe) include beforeEach(module('myApp')); or whatever you named your main module.
  4. If you plan to use the service (or whatever you want to include in the test) in more than one place you can call another beforeEach where needed like this:

beforeEach(inject(function(myModel) {
mymodel = myModel;
}));

otherwise you just can inject where it is needed. Now the mymodel variable (notice this is the variable you assigned in the beforeEach above) will be available to you for testing in your next blocks. For example, you can now write:

describe('when fetched', function() {
it('should return 3 items', function() {
// console.log(mymodel.getItems());
expect(mymodel.getItems()).to.have.length(3);
});
});