testing AngularJS with karma and jasmine

Question

I'm trying to write some unit test. I got an error about angular being undefined, so I figure I need to include the angular js file in with my other js files... to that end I'm trying to npm install it...

{
  "name": "jzAddons",
  "description": "A collection of addons for AngularJS",
  "version": "0.0.1",
  "private": false,
  "devDependencies": {
    "angularjs": "git://github.com/angular/angular.js.git",
    "grunt": "0.4",
    "grunt-contrib-jshint": "0.7.2",
    "grunt-contrib-stylus": "0.10.0",
    "grunt-contrib-uglify": "0.2.7",
    "grunt-contrib-clean": "0.5.0",
    "grunt-karma": "*",
    "karma": "~0.12",
    "karma-chrome-launcher": "*",
    "karma-jasmine": "*",
    "karma-phantomjs-launcher": "*"
  }
}

but npm install is failing:

> npm install
npm WARN package.json jzAddons@0.0.1 No repository field.
npm http GET https://registry.npmjs.org/grunt-contrib-uglify/0.2.7
npm http GET https://registry.npmjs.org/grunt-contrib-jshint/0.7.2
npm http GET https://registry.npmjs.org/grunt-contrib-stylus/0.10.0
npm http GET https://registry.npmjs.org/grunt-contrib-clean/0.5.0
npm http GET https://registry.npmjs.org/grunt-karma
npm http GET https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/karma-chrome-launcher
npm http GET https://registry.npmjs.org/karma-jasmine
npm http GET https://registry.npmjs.org/karma-phantomjs-launcher
npm http GET https://registry.npmjs.org/karma
npm http 304 https://registry.npmjs.org/grunt-contrib-clean/0.5.0
npm http 304 https://registry.npmjs.org/grunt-contrib-stylus/0.10.0
npm http 304 https://registry.npmjs.org/grunt-contrib-uglify/0.2.7
npm http 304 https://registry.npmjs.org/grunt-contrib-jshint/0.7.2
npm http 304 https://registry.npmjs.org/grunt-karma
npm http 304 https://registry.npmjs.org/karma-jasmine
npm http 304 https://registry.npmjs.org/karma-phantomjs-launcher
npm http 304 https://registry.npmjs.org/karma-chrome-launcher
npm http 304 https://registry.npmjs.org/grunt
npm http 304 https://registry.npmjs.org/karma
npm ERR! Error: No version provided
npm ERR!     at needVersion (/usr/local/lib/node_modules/npm/lib/cache.js:1238:40)
npm ERR!     at /usr/local/lib/node_modules/npm/lib/cache.js:1112:10
npm ERR!     at process._tickCallback (node.js:415:13)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <npm-@googlegroups.com>

npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/jzaun/Development/jzAddons
npm ERR! node -v v0.10.18
npm ERR! npm -v 1.3.8
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/jzaun/Development/jzAddons/npm-debug.log
npm ERR! not ok code 0

How do I get angular to test with?

Is there any way to use grunt to install something form bower without having to make a bower.json? I really don't want to deal with 2 package system :-/ I don't need Angular for anything but testing and it seems dumb to have to go through all the hoops...

score 0 · Answer 1 · answered Mar 26 '14 at 07:44

Not sure if it helps you but here is what I have:

I used Yeoman to scaffold an angular application with its generator-angular. It sets up everything you need including karma and some sample tests. Then you could compare with your app and see what you are missing.

In my package.json I have these entries related to karma:

"karma-ng-scenario": "~0.1.0",
"grunt-karma": "~0.6.2",
"karma-script-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.3",
"karma-chrome-launcher": "~0.1.2",
"karma-html2js-preprocessor": "~0.1.0",
"karma-jasmine": "~0.1.5",
"karma-coffee-preprocessor": "~0.1.3",
"karma-requirejs": "~0.2.1",
"karma-phantomjs-launcher": "~0.1.2",
"karma": "~0.10.9",
"karma-ng-html2js-preprocessor": "~0.1.0"

You see that there are version numbers everywhere, while you have a "*".

and in my Karma.conf.js file I am referencing angular:

files: [
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/bower_components/angular-resource/angular-resource.js',
  'app/bower_components/angular-cookies/angular-cookies.js',
  'app/bower_components/angular-sanitize/angular-sanitize.js',
  'app/bower_components/angular-route/angular-route.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

Hope this helps somehow. Let me know if you need more info

I never used the `"*"` but according to [this question](http://stackoverflow.com/questions/16073603/how-do-i-update-each-dependency-in-package-json-to-the-latest-version), it should work. Has there been a breaking change? — glepretre, Mar 26 '14 at 08:15
The issue is I can't get npm to install angular. Looks like I have to use bower in addition to npm. PITA. — Justin808, Mar 26 '14 at 16:52
err. sorry I may misunderstand you, but with npm you install node packages such as yo or generator-angular. Bower is a different thing. it manages the javascript dependencies you webapp has. so angular.js or jquery or bootstrap.css are things that bower takes care of. while nodejs modules such as karma, grunt, yeoman are installed using npm. see: http://stackoverflow.com/questions/18641899/difference-between-bower-and-npm — PeterFromCologne, Mar 28 '14 at 20:35
@Justin808 (And future readers) I think it's normal to use NPM for dependencies for build tools (gulp, or grunt, etc.), test tools (karma, jasmine, etc.), but not the application itself, and then bower for dependencies for your application (angular, etc.). — Jesus is Lord, Jan 31 '16 at 18:44

testing AngularJS with karma and jasmine

1 Answers1