Develop Reference

ReferenceError: Can't find variable: d3

Hello all I am trying to do some jasmine/karma testing on a d3 application however I cannot get past this error: ReferenceError: Can't find variable: d3...
at getSvg (C:/Users/test/Desktop/bob/angular-force-directed-graph/src/app/d3mapping.spec.js:9)
at C:/Users/test/Desktop/bob/angular-force-directed-graph/src/app/d3mapping.spec.js:9
ReferenceError: Can't find variable: d3
I know it has something to do with d3 being undefined until window.load but I am not sure how to properly define d3 and the methods it uses.
// Karma configuration
// Generated on Thu Oct 29 2015 14:09:24 GMT-0400 (Eastern Daylight Time)
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'app',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-route/angular-route.js',
'bower_components/d3/d3.js',
'home/*.js',
'common/*.js',
'home/home.module.js',
'app.js',
'**/*.module.js',
'**/*.controller.js',
'**/*.service.js',
'**/*.directive.js',
'**/*.routes.js',
'**/*.spec.js'
],
// list of files to exclude
exclude: [
'bower_components/**/!(angular*|angular-mocks|angular-route*).js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'!(bower_components)/**/!(*spec).js': 'coverage',
'*.js': 'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
coverageReporter: {
dir: '../coverage/',
subdir: 'report'
},
captureTimeout: 30000,
// 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: false,
// 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: true,
// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity
})
};

add d3 to your karma.conf.js files
if your project structure looks like this
|--app
| |--app.js
| |--...
|
|--test
| |--karma.conf.js
|
|--bower_components
you have to set the basePath to '../' because the karma.conf.js file lies inside the test folder but you want to address the files via 'app/app.js' or 'bower_components/...'
config.set({
basePath: '../' // dont forget the right basePath!
files:[
'path/to/d3'
],
...
})

Karma returns error and executes 0 out of 0, even though I have one test using Jasime

This is my karma/karma.conf.js:
// Karma configuration
// Generated on Mon Jan 04 2016 16:17:18 GMT-0500 (EST)
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: [
],
// 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'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
and this is my karma/tests/test_post.js:
describe('Controller: MainCtrl', function() {
beforeEach(module('PostPageApp'));
var ctrl;
beforeEach(inject(function($controller) {
ctrl = $controller('MainCtrl');
}));
it('Show have an add and logout function', function() {
expect(ctrl.add).toBeDefined();
});
});
and this is ../post.js:
angular.module("PostPageApp", ["BaseApp"])
.controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {
var self = this;
self.add = function() {
BaseService.add.post(self.post, function() {
self.cerrorMessages = BaseService.cerrorMessages;
});
};
self.logoutUser = function() {
BaseService.logout();
};
}]);
Now, when I do karma start, it returns this:
04 01 2016 16:48:10.137:INFO [karma]: Karma v0.13.17 server started at http://localhost:9876/
04 01 2016 16:48:10.144:INFO [launcher]: Starting browser Chrome
04 01 2016 16:48:13.138:INFO [Chromium 47.0.2526 (Ubuntu 0.0.0)]: Connected on socket ayhU7qR23sshUzi3AAAA with id 50222765
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 0 of 0 ERROR (0.013 secs / 0 secs)
Any idea why it is executing 0 out of 0 and returning an error? I thought it would run
it('Show have an add and logout function', function() {
expect(ctrl.add).toBeDefined();
});
Please note that I am new to using Karma and Jasmine so I am still trying to get the hang of all of this.
Thanks in advance.

It's not running any tests because you aren't telling it to load any files into the browser. I think a lot of people use RequireJS for this, but unfortunately I am not familiar with it.
In karma.conf.js under the files: section:
List your JS dependencies (like JQuery or Angular).
List the files that you are testing next.
List the test specs themselves last.
For instance:
files: [
'angular.js',
'app.js',
'app.spec.js'
]
If you don't want certain files to be included then put them in the exclude section. Make sure the file paths are relative to where karma.conf.js is located.

I would suggest specifying a default path and a pattern at ./karma.conf.js:
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'test/',
// list of files / patterns to load in the browser
files: [
{pattern: '**/*.js*', included: true}
],
It worked for me.

Karma not pausing in debugger mode

I am trying to run my application in Chrome using Karma. I configured karma.conf.js in such a way where I would expect the browser to run through all tests and then not exit: I have set this up with other projects and that is what occurs. However, on this project the browser always exits as soon as tests are finished and this prevents me from debugging.
Karma.config.js
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '.',
// frameworks to use
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [ 'dist/appTest.js', 'dist/app.css' ],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['mocha', 'junit'],
junitReporter: {
outputDir: '', // results will be saved as $outputDir/$browserName.xml
outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
suite: '' // suite will become the package name attribute in xml testsuite element
},
// 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: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['Chrome'],
// 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
});
};

Jasmine Test require is undefined

I have the following test
require ('./src/gameService.js');
describe('gameService', function(){
describe('getState', function(){
it('should return the state of the box', function(){
gameService.gameState[1][2]=true;
expct(gameService.getState(1,2)).toBe(true);
})
})
})
And the following code in gameService.js
var gameState = []
...
this.getState = function(row, column){
return gameState[row][column];
}
When I run karma (using jasmine)
Chrome 45.0.2454 (Windows 7 0.0.0) ERROR
Uncaught ReferenceError: require is not defined
at C:/devl/JS/FUSE/test/gameServiceSpec.js:1
IE 11.0.0 (Windows 7 0.0.0) ERROR
'require' is undefined
at C:/devl/JS/FUSE/test/gameServiceSpec.js:1
Firefox 38.0.0 (Windows 7 0.0.0) ERROR
ReferenceError: require is not defined
at C:/devl/JS/FUSE/test/gameServiceSpec.js:1
From what I understand, jasmine should just accept the require statement.
My karma.conf.js
// Karma configuration
// Generated on Sat Sep 05 2015 10:46:37 GMT-0400 (Eastern Daylight Time)
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: [
{pattern: 'bower_components/angular/angular.js'},
{pattern: 'src/**/*.js'},
{pattern: 'test/**/*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'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
}

Grunt Karma runs tests but blocks

I have a grunt task to run Karma unit tests using Phantom JS. The tests run but the task doesn't exit. This blocks any other task from starting till I manually kill the karma:unit task using ctrl+c.
My karma.conf.js file is:
// Karma configuration
// Generated on Thu Mar 06 2014 13:17:21 GMT-0500 (Eastern Standard Time)
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// frameworks to use
frameworks: ['mocha', 'requirejs', 'chai', 'sinon'],
// list of files / patterns to load in the browser
files: [
{ pattern: 'src/vendor/**/*.js', included: false },
{ pattern: 'src/*.js', included: false },
{ pattern: 'src/app/*_test.js', included: false },
{ pattern: 'src/app/**/*.js', included: false },
{ pattern: 'src/app/*_test.js', included: false },
'test-main.js'
],
// list of files to exclude
exclude: [
'src/app/main.js',
'**/Gruntfile.js'
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress', 'coverage'],
preprocessors: {
'src/app/**/!(*_test).js': 'coverage'
},
// 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: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['PhantomJS'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 10000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
});
};
My Grunt config for the karma task is:
karma: {
options: {
configFile: 'karma.conf.js'
},
unit: {
autowatch: true,
singleRun: true,
}
},
When I run grunt karma:unit, I get:
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.12.0 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Windows 7)]: Connected on socket V2NFfUtyUi_gl0gWqbov with id 17494532
PhantomJS 1.9.7 (Windows 7): Executed 2 of 2 SUCCESS (0.012 secs / 0 secs)
but it never gets to Done, without errors until I press ctrl+C

I reinstalled karma and PhantomJS in the project and the problem cleared. I noticed that when I changed my karma configuration to use Chrome, everything worked normally so I figured the issue had to be with PhantomJS
npm install karma --save-dev
npm install phantomjs --save-dev