Error while testing route Karma in e2e tests

Question

I'm trying to make some basic end to end tests (e2e) on a django/angularjs application using Karma and I'm getting a weird error.

Here is my test code:

# testacular-e2e.conf.js

describe('Log in tests', function() {
   it('should show the disconnected home', function() {
      browser().navigateTo('/#');
      expect(browser().location().url()).toBe('/#');
   });
});

When I'm running this code, I get the following output:
[DEPRECATED ERROR - left for reference only]
$>karma start testacular-e2e.conf.js [2013-04-30 22:19:26.465] [WARN] config - "/" is proxied, you should probably change urlRoot to avoid conflicts [2013-04-30 22:19:26.467] [DEBUG] config - autoWatch set to false, because of singleRun INFO [karma]: Karma server started at http://local.host:9876/ INFO [launcher]: Starting browser PhantomJS INFO [PhantomJS 1.9 (Mac)]: Connected on socket id cwhp0lnTraNa4ToQ0HkS PhantomJS 1.9 (Mac) Log in tests should show the disconnected home FAILED TypeError: 'undefined' is not a function (evaluating '$document.injector()') PhantomJS 1.9 (Mac): Executed 1 of 1 (1 FAILED) (0.098 secs / 0.04 secs)

Any one can help please?
Thanks in advance :)

EDIT: Here is my Karma configuration file:

// Karma configuration

// base path, that will be used to resolve files and exclude
basePath = '';

// frameworks to use
frameworks = ['jasmine', 'ng-scenario'];

// list of files / patterns to load in the browser
files = [
  'app/components/angular/angular.js',
  'app/components/angular-complete/angular-resource.js',
  'app/components/angular-complete/angular-cookies.js',
  'app/components/angular-mocks/angular-mocks.js',
  'app/components/ng-translate/translate.js',
  'app/scripts/*.js',
  'app/scripts/services/services.js',
  'app/scripts/**/*.js',
  'test/spec/**/*.js'
];

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters = ['progress'];

// web server port
port = 9876;

// cli runner port
runnerPort = 9100;


// enable / disable colors in the output (reporters and logs)
colors = true;


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_DEBUG;


// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

// plugins to load
plugins = [
  'karma-jasmine',
  'karma-phantomjs-launcher',
  'karma-chrome-launcher',
  'karma-ng-scenario',
];

EDIT 2: Add component.json file

# component.json
  {
    "name": "myapp",
    "version": "0.0.0",
    "dependencies": {
    "angular": "~1.0.5",
    "json3": "~3.2.4",
    "es5-shim": "~2.0.5",
    "angular-resource": "~1.0.5",
    "angular-cookies": "~1.0.5",
    "angular-complete" : "*",
    "jquery" : "~1.9",
    "bootstrap" : "~2.3.1",
    "bootstrap-js" : "*",
    "jquery.localScroll" : "",
    "jquery.scrollTo" : "1.4.4",
    "ng-translate" : ""
  },
  "devDependencies": {
    "angular-mocks": "~1.0.5",
    "angular-scenario": "~1.0.5"
  }
}

EDIT 3 : Updated the above Karma conf file + this is my e2e conf file:

// e2e karma configuration

var fs = require('fs');

// Load from basic karma configuration
eval(fs.readFileSync('karma.conf.js')+'');

// list of files / patterns to load in the browser
files = [
  'app/components/angular/angular.js',
  'app/components/angular-complete/angular-resource.js',
  'app/components/angular-complete/angular-cookies.js',
  'app/components/angular-mocks/angular-mocks.js',
  'app/components/ng-translate/translate.js',
  'app/scripts/*.js',
  'app/scripts/services/services.js',
  'app/scripts/**/*.js',
  'test/e2e/**/*.js'
];


// Proxy the root path to the location of app server
proxies = {
  '/': 'http://localhost:8000/'
};

If you need the details of the files imported in the "files" params, let me know. With he actual configuration, the "normal" tests (not the e2e ones) works fine but the e2e tests give me the following error:

$>karma start karma-e2e.conf.js
[2013-05-01 11:32:19.047] [WARN] config - "/" is proxied, you should probably change urlRoot to avoid conflicts
INFO [karma]: Karma v0.9.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9 (Mac)]: Connected on socket id HmPYnc9PJUdaGb35pl-K
PhantomJS 1.9 (Mac) Log in tests should show the disconnected home FAILED
ReferenceError: Can't find variable: browser
    at /Users/hugo/Projs/wc/angular/test/e2e/scenarios.js:9
    at /Users/hugo/Projs/wc/angular/node_modules/karma-jasmine/lib/adapter.js:107
    at http://localhost:9876/karma.js:111
    at http://localhost:9876/context.html:68
PhantomJS 1.9 (Mac): Executed 1 of 1 (1 FAILED) (0.082 secs / 0.006 secs)

Answer 1

Add this to your e2e config file:

urlRoot = '/_karma_/';

Answer 2

So I was using this exact config ... then I realized that jasmine has no concept of Browser. As soon as I removed jasmine from the frameworks, this error went away.

Of course, I got another one, so off to debug that :)

Answer 3

For anyone else struggling with this: If you are using requirejs and bootstrap the page manually, make sure you still have the ng-app directive in your HTML file. This fixed it for me.

karma 0.9.5 requirejs 2.1.6 angularjs 1.0.7 karma-ng-scenario 0.0.2 karma-chrome-launcher 0.0.2

Also, this is my config for my e2e tests with the web server running on localhost:8000:

module.exports = function(config) {
    config.set({
        frameworks: ['ng-scenario'],

        files: [
            'test/e2e/**/*.js'
        ],

        basePath: '../',

        autoWatch: true,

        proxies: {
            '/': 'http://localhost:8000/'
        },

        urlRoot: '__karma__',

        browsers: ['Chrome'],

        reporters: ['dots'],

        plugins: [
            'karma-ng-scenario',
            'karma-chrome-launcher'
        ]
    });
};

Edit: I played around a bit more with my now working configuration to reproduce the error. It occurred again when I did not sleep() after navigating to the app root. So this might be worth checking, too.

Answer 4

Which version of karma are you using? I see a similar error when I run your test:

test/e2e/scenarios.js:9:14: TypeError: Object [object Object] 
has no method 'injector'

So it's not just your environment. This looks similar to:

https://github.com/angular/angular.js/issues/1518

which vojtajina suggested addressing by updating karma to get the latest fixes.

As a warning, though, it's worth noting that if you pull karma@canary with npm, you'll have several config changes to make before you can run anything.