Foundation-Apps angular site integration with karma-jasmine unit testing

Question

I believe there is a problem with using angular-mocks and foundation-apps when trying to run a karma jasmine unit test. It could also be that I have missed something. Since there is so much code to see I have posted an example project on github for review.

Basically the site runs fine and karma runs the test but when you debug into the angular.mocks.module function you find that your module from your app is not being loaded.

If you take foundation-apps out of the situation it will work fine.

Could this be a version conflict because foundation-apps has an older dependency for angular-mocks?

fatest on github

Answer 1

I hit the same issue and my solution was to add resulting css-file (app.css - generated with sass task) to karma configuration. Without this file i got:

TypeError: 'null' is not an object (evaluating 'mediaQueries[key].replace')

Here is my gulp config:

var karma = require('karma').server;
//...........//
// Compiles Sass
gulp.task('sass', function () {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(plugins.sass({
      includePaths: paths.sass,
      outputStyle: (isProduction ? 'compressed' : 'nested'),
      errLogToConsole: true
    }))
    .pipe(plugins.autoprefixer({browsers: ['last 2 versions', 'ie 10']}))
    .pipe(gulp.dest('./build/assets/css/'))
    .pipe(plugins.livereload());
  });
/// ..... some other things here ......///
gulp.task('unit-test', function (done) {
  var testFiles = [          
          {pattern:'./build/assets/js/foundation.js',watched:false},
          {pattern:'./build/assets/js/routes.js',watched:false},
          {pattern:'./build/assets/css/app.css',watched:false},
          {pattern:'./build/assets/js/templates.js',watched:false},
          {pattern:'./bower_components/angular-mocks/angular-mocks.js', watched:false},
          {pattern:'./client/assets/js/*.js'},
          {pattern:'./client/templates/**/*.js'}                  
    ];

    karma.start({
            configFile:__dirname + '/karma.conf.js',
            singleRun: true,
            files: testFiles
        }, done);   
});

Assuming your application is already builded, just run gulp unit-test.