NodeJS, Angular Seed, Gulp, Jasmine , Karma issue

Question

Setting up a Angular Seed and I have everything working , I could even launch the jasmine browser but for some reason my spec's were not working so I added a karma.conf file and it seems to have broken the jasmine browser. I am new to using Jasmine so I am at a loss there are a lot of opinions as to how best to do it, but no matter what I try I can't seem to get it to work, I have added the repo link here for the code . Hopefully someone might be able to see what I am doing wrong.

This Seed Requires NodeJS

Download the git, put it in a folder go to the folder and enter the config folder in the root run npm install then run gulp, it will automatically launch in a browser in the console you will see this error

[14:52:17] 'jasmineWeb' errored after 2.27 ms
[14:52:17] TypeError: object is not a function
    at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:137:11)
     at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at /webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:279:18
at finish (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3)
at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at /webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:279:18

Here is the task I use to launch Jasmine

gulp.task('jasmineWeb', function() {
   var filesForTest = ['../src/**/*.js', '../src/**/*_spec.js'] 
  return gulp.src(filesForTest)
     .pipe(karma({configFile: 'karma.conf.js',action: 'run'}))
     .pipe(watch(filesForTest))
     .pipe(jasmineBrowser.specRunner())
     .pipe(jasmineBrowser.server({port: 8888}));
});

Here is my Karma.conf file

// Karma configuration
// Generated on Tue Jul 28 2015 11:28:22 GMT-0400 (EDT)

 module.exports = function(config) {
  config.set({

     // base path that will be used to resolve all patterns (eg. files,    exclude)
    basePath: '',


     // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jasmine'],


     // list of files / patterns to load in the browser
     files: [
       '../src/lib/js/angular/angular.min.js',
       '../src/lib/js/angular/angular-mocks.js',
       '../src/com/**/*.js',
       '../src/com/**/*_spec.js'
     ],

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


     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
     },


     // test results reporter to use
    // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
     reporters: ['progress'],


     // web server port
     port: 9876,


     // enable / disable colors in the output (reporters and logs)
    colors: true,


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


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


     // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     browsers: ['Chrome', 'Firefox', 'IE', 'PhantomJS'],


     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
     singleRun: false
  })
} 

I appreciate it in advance

https://bitbucket.org/baylysoft/angular-seed-project

Karma is now running but I am getting this error now

PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: com/modules/AboutController Sets the Page Message It should show the page message FAILED
    ReferenceError: Can't find variable: $scope
        at /webdev/E20/src/com/modules/about/aboutController_spec.js:15
Chrome 44.0.2403 (Mac OS X 10.10.4) Controller: com/modules/AboutController Sets the Page Message It should show the page message FAILED
    ReferenceError: $scope is not defined
        at Object.<anonymous> (/webdev/E20/src/com/modules/about/aboutController_spec.js:15:16)
Chrome 44.0.2403 (Mac OS X 10.10.4): Executed 1 of 1 (1 FAILED) ERROR (0.008 secs / 0.006 secs)
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0 secs / 0.004 secs)

Here is the updated spec file

'use strict';

describe('Controller: com/modules/AboutController', function() {
  beforeEach(module(app));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $controller = _$controller_;
  }));

  describe('Sets the Page Message', function() {
    it('It should show the page message', function() {
        expect($scope.message).toEqual('This is the about page message from the controller');
    });

  });
});

Answer 1

After going back and forth and getting help from a few people on here (Thank you all very much btw) I was able to find the culprit, turns out the issue wasn't in the actual test but in the karma configuration file, it was deceptive the issue was the bower components I was loading, I wasn't loading enough ng-mocks wasn't enough to test to controllers, so I added a few others and it worked, I was able to get all my tests to work properly.

here is what I added under the karma.conf files section

'bower_components/angular/angular.js',
        'bower_components/angular-route/angular-route.js',
        'bower_components/angular-mocks/angular-mocks.js',
        'bower_components/angular-resource/angular-resource.js',
        'bower_components/angular-cookies/angular-cookies.js',
        'bower_components/angular-sanitize/angular-sanitize.js',
        '../src/com/**/*.js',
        '../src/com/**/*_spec.js'

I have updated the bitbucket seed with the new working code for those who want a better example

bitbucket.org/baylysoft/angular-seed-project

Answer 2

I run Jasmine, Karma, and use Gulp just as you do. However there are some differences in how I start it up. Perhaps this may help with yours.

Your karma.config.js looks similar, so probably no problems there.

However, in my gulp file I just call this

gulp.task( 'karma', function( done ){
  karma.start({
    configFile: __dirname + '/karma.conf.js'
  }, done );
});

gulp karma

If you need to watch files for changes as well, then you can run this instead.

var filesForTest = [ '../src/**/*.js' ];

gulp.task( 'watchOnSave', function(){
  gulp.watch( filesForTest, [ 'karma' ]);
}

gulp watchOnSave

The karma.config.js file will execute the browser for you, as well as run your specs that you defined in your karma.config.js file.

  '../src/com/**/*_spec.js' // just make sure all your JS files are in your karma **files** property.

Let me know if this works, or we'll TS to the solution.

UPDATE

In your app (app.js), you have this

var appName = 'EuropaSeed';

var globalApp = angular.module(appName,['ngRoute','ngCookies']);
var app = angular.module(appName);

and in your testing you have

beforeEach(module('EuroSeed'));

One of your issues, is that you have two modules named EuroSeed

app and globalApp

So instead in your test, call out which of the two modules you require as in

beforeEach(module(app));

which matches what you have in your controller

app.controller('AboutController',...

I am using this to run the spec, which is passing now but without using the except as there is another issue to getting that to pass.

gulp file as

gulp.task('karma', function (done) {
  karma.server.start({ // had to add .server to karma
    configFile: __dirname + '/karma.conf.js'
  }, done);
});

---

it might be the spec, so I figured I would post the spec and controller here, they are very simple.

Now "app" is set in the app.js file so the application itself works

aboutcontroller

//This is the about function that is used in the About Module. 
    'use strict';
     app.controller('AboutController',// jshint ignore:line
        ['$scope',
        function ($scope) {
           $scope.message = 'This is the about page message from the controller';
        }]);

aboutcontroller test

'use strict';

describe('Controller: com/modules/AboutController', function() {
  beforeEach(module('EuropaSeed'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter     names when matching
    $controller = _$controller_;
  }));

  describe('Sets the Page Message', function() {
    it('It should show the page message', function() {
        expect($scope.message).toEqual('This is the about page message from the controller');
    });

  });
});

I pulled the test I was running and I am still getting the same error on jasmineWeb so it might possibly be the configuration.

Europas-MacBook-Pro:config ray$ gulp jasmineWeb
[08:29:33] Using gulpfile /webdev/E20/config/gulpfile.js
[08:29:33] Starting 'jasmineWeb'...
[08:29:33] 'jasmineWeb' errored after 12 ms
[08:29:33] TypeError: object is not a function
    at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:137:11)
    at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3
Europas-MacBook-Pro:config ray$ 

I took your suggestion and added the karma task to the gulp file , its giving me the same results so , I definitely screwed up the configuration somewhere .

Europas-MacBook-Pro:config ray$ gulp karma
[08:31:46] Using gulpfile /webdev/E20/config/gulpfile.js
[08:31:46] Starting 'karma'...
[08:31:46] 'karma' errored after 145 μs
[08:31:46] TypeError: undefined is not a function
    at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:144:9)
    at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

Here is the updated spec I am running

'use strict';

describe('Controller: com/modules/AboutController', function() {

    beforeEach(module(app));

    var AboutController,
        scope;

        beforeEach(inject(function ($rootScope, $controller) {
            scope = $rootScope.$new();
            AboutController = $controller('AboutController', {
                "$scope": scope
            });
        }));
    it('It should show the page message', function () {
        // you might also need to do this
        AboutController();
        expect(scope.greeting).toEqual("This is the about page message from the controller");
                                       });

    });