How do I fix my generator-angular project so that grunt test works?

Question

I am working off of this tutorial: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/ as a means to understand what files are created using yo generator-angular.

I have experience using AngularJS, but was looking for a way to get a best-practices directory set up; I am not sure how to set up dependencies and get karma running on my own, hence using the yeoman generator.

However, straight out of the box, without editing anything else, when I run grunt test I get the following:

running "clean:server" (clean) task
Cleaning .tmp...OK

Running "concurrent:test" (concurrent) task

Running "copy:styles" (copy) task
Copied 1 files

Done, without errors

Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.

Running "connect:test" (connect) task
Started connect web server on 127.0..0.1:9001.

Running "karma:unit" (karma) task
Warning: No provider for "framework:jasmine"! (resolving: framework:jasmine) Use --force to continue.

Aborted due to warnings.

I don't understand why jasmine has no provider, and not sure how to go about resolving this issue. is it a matter of fixing my package.json files and updating node?

EDIT: Here is the config file:

// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html

module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks:['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // web server port
    port: 8080,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


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


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

};

Answer 1

I seem to have fixed my problem, for anyone with a similar problem:

Within my karma.conf.js I added the following:

plugins: [
    'karma-chrome-launcher',
    'karma-jasmine'
    ],

At first I added 'karma-jasmine' but was then met with "Can not load "Chrome", it is not registered!" This was solved by adding 'karma-chrome-launcher' as a plug-in

Not sure if it was my fault or whether generator-angular is out of date, but it is now working.

Answer 2

The github issue pointed out by @Jim Schubert has this comment:

The full list of karma dependencies that I needed to install to get tests working (coffeescript).

npm install --save-dev karma-chrome-launcher karma-firefox-launcher karma-safari-launcher karma-opera-launcher karma-ie-launcher karma-jasmine karma-coffee-preprocessor

Answer 3

If you used the --coffee flag on the yo angular command you'll need to:

install some browser launcher (chrome in this case) and the following npm packages:

npm install --save-dev karma-chrome-launcher karma-jasmine karma-coffee-preprocessor

and add the following to your karma.conf.js file:

plugins:['karma-chrome-launcher', 'karma-jasmine', 'karma-coffee-preprocessor'],
preprocessors:{'**/*.coffee':['coffee']}

After that running grunt test should work.