Problem with setting up a test framework with karma, jasmine 2.0, requirejs and angular

advertisements

i am trying to setup testing framework with karma, jasmine 2.0, requirejs and angular. but when i run 'karma start', i got 'Uncaught Error: Module name "shelljs" has not been loaded yet for context: _. Use require([])'. i have no idea why is that. anybody can help me out? thanks.

my fold structure:

$ tree
.
|-- index.html
|-- karma.conf.js
|-- app
|   |-- bower_components
        |-- angular
        |-- requirejs
        |-- angular-mocks
        |-- jasmine
        |-- ...
    |-- scripts
        |-- model
            |-- User.js
        |-- main.js
        |-- ...
-- test
    |-- spec
    |-- model
        |-- userSpec.js
    |-- test-main.js

karma.conf.js:

// Karma configuration
// Generated on Mon Jun 02 2014 09:54:34 GMT+1000 (AUS Eastern Standard 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', 'requirejs'],

            // list of files / patterns to load in the browser
            files: [
                {pattern: 'app/bower_components/**/*.js', included: false},
                {pattern: 'app/scripts/*.js', included: false},
                {pattern: 'app/scripts/**/*.js', included: false},
                {pattern: 'test/**/*Spec.js', included: false},
                {pattern: 'test/test-main.js', included: true},

            ],

            // list of files to exclude
            exclude: [
                'app/bower_components/angular-bootstrap/ui-bootstrap.js',
                'app/bower_components/**/main.js',
                'app/scripts/main.js',
                'app/scripts/*min.js',
                'app/scripts/**/*min.js'
            ],

            // 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'],
            /*browsers: ['Chrome', 'IE', 'PhantomJS', 'Safari', 'Firefox'],*/

            plugins: [
                'karma-chrome-launcher',
                'karma-firefox-launcher',
                'karma-IE-launcher',
                'karma-PhantomJS-launcher',
                'karma-script-launcher',
                'karma-jasmine',
                'karma-requirejs'
            ],

            // Continuous Integration mode
            // if true, Karma captures browsers, runs the tests and exits
            singleRun: false`enter code here`
        }
    )
    ;
    console.log('karma config done--------------------------------');
}

;

test-main.js：

var allTestFiles = [];
/*var TEST_REGEXP = /(spec|test)\.js$/i;*/
//Replace this line with something more specific to your project and make sure it does not match files in your libraries:
var TEST_REGEXP = /spec\.js$/i;

var pathToModule = function (path) {
    return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function (file) {
    /*
     console.log(file);
     */
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(file);
        //allTestFiles.push(pathToModule(file));

    }
});

require.config({
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/app/scripts',

    paths: {
        /*'require': '../bower_components/requirejs/require',*/
        'domReady': '../bower_components/requirejs-domready/domReady',
        'jquery': '../bower_components/jquery/dist/jquery',
        'angular': '../bower_components/angular/angular',
        'angularResource': '../bower_components/angular-resource/angular-resource',
        'angularTranslate': '../bower_components/angular-translate/angular-translate',
        'uiBootstrap': '../bower_components/angular-bootstrap/ui-bootstrap-tpls',
        'uiRouter': '../bower_components/angular-ui-router/release/angular-ui-router',
        'angularGrid': '../bower_components/angular-grid/build/ng-grid',
        'stacktrace': '../bower_components/stacktrace/stacktrace',
        'angularMocks': '../bower_components/angular-mocks/angular-mocks',
        'jasmine': '../bower_components//jasmine/lib/jasmine-core/jasmine'
    },

    // angular does not support AMD out of the box, put it in a shim
    shim: {
        'angular': { deps: ['jquery'], exports: 'angular'},
        'angularResource': { deps: ['angular'] },
        'angularTranslate': { deps: ['angular'] },
        'uiBootstrap': { deps: ['angular'] },
        'uiRouter': { deps: ['angular'] },
        'angularGrid': { deps: ['angular'] },
        'angularMocks': {deps: ['angular'], 'exports': 'angularMocks'}
    },
    // dynamically load all test files
    deps: allTestFiles,

    // we have to kickoff jasmine, as it is asynchronous
    callback: window.__karma__.start

});

package.json:

{
  "name": "example",
  "version": "0.0.0",
  "dependencies": {
    "grunt-contrib-compress": "0.7.0"
  },
  "devDependencies": {
    "grunt": "0.4.1",
    "grunt-autoprefixer": "0.4.0",
    "grunt-concurrent": "0.4.1",
    "grunt-contrib-clean": "0.5.0",
    "grunt-contrib-coffee": "0.7.0",
    "grunt-contrib-compass": "0.6.0",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-connect": "0.5.0",
    "grunt-contrib-copy": "0.4.1",
    "grunt-contrib-cssmin": "0.7.0",
    "grunt-contrib-htmlmin": "0.1.3",
    "grunt-contrib-imagemin": "0.3.0",
    "grunt-contrib-jshint": "0.7.1",
    "grunt-contrib-uglify": "0.2.0",
    "grunt-contrib-watch": "0.5.2",
    "grunt-google-cdn": "0.2.0",
    "grunt-newer": "0.5.4",
    "grunt-ngmin": "0.0.2",
    "grunt-rev": "0.1.0",
    "grunt-svgmin": "0.2.0",
    "grunt-usemin": "2.0.0",
    "jshint-stylish": "0.1.3",
    "load-grunt-tasks": "0.3.0",
    "time-grunt": "0.2.1",
    "karma-ng-scenario": "0.1.0",
    "requirejs": "2.1.9",
    "karma-requirejs": "^0.2.2",
    "karma-coffee-preprocessor": "0.1.1",
    "karma-phantomjs-launcher": "0.1.1",
    "karma-ng-html2js-preprocessor": "0.1.0",
    "grunt-bower-install": "0.7.0",
    "yo": "1.1.2",
    "bower": "1.2.8",
    "generator-karma": "0.6.0",
    "generator-angular": "0.7.1",
    "generator-generator": "0.4.1",
    "grunt-contrib-requirejs": "0.4.1",
    "grunt-karma": "^0.8.3",
    "karma-firefox-launcher": "^0.1.3",
    "karma-chrome-launcher": "^0.1.4",
    "karma-ie-launcher": "^0.1.5",
    "karma-script-launcher": "^0.1.0",
    "karma-html2js-preprocessor": "^0.1.0",
    "glob": "^4.0.2",
    "karma": "^0.12.0",
    "karma-jasmine": "^0.2.0"
  },
  "engines": {
    "node": ">=0.8.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

bower.json：

{
  "name": "myEmail",
  "version": "1.0.0",
  "dependencies": {
    "angular": "1.2.14",
    "json3": "3.3.0",
    "es5-shim": "2.3.0",
    "angular-resource": "1.2.14",
    "angular-cookies": "1.2.14",
    "angular-sanitize": "1.2.14",
    "angular-route": "1.2.14",
    "bootstrap": "3.1.1",
    "respond": "1.4.2",
    "requirejs": "2.1.11",
    "requirejs-domready": "2.0.1",
    "angular-ui-router": "0.2.10",
    "angular-translate": "2.0.1",
    "angular-http-auth": "1.2.1",
    "angular-grid": "2.0.7",
    "jquery": "1.11.0",
    "angular-bootstrap": "0.10.0",
    "stacktrace": "0.6.0"
  },
  "devDependencies": {
    "angular-mocks": "1.2.14",
    "jasmine": "~2.0.0"
  }
}

I saw this error when my TEST_REGEXP in karma.conf.js was not specific enough and pulled in 'my_client/app/bower_components/jasmine/src/core/Spec.js:1' as a spec file to execute. Once I made sure the TEST_REGEXP was only capturing my specs, this error disappeared. (Presumably the issue is that any specs not actually defined as AMD will have dependency problems.)

So my general pattern for specs is "original_file_name.spec.js". Switching

var TEST_REGEXP = /spec\.js$/i;

to

var TEST_REGEXP = /\.spec\.js$/i;

properly catches that pattern. :)

Related Articles

Typography tests, with Karma, Jasmine and Grunt

I've been trying to use Karma+Jasmine to run tests written in TypeScript. Searching online, it seems quite a few have managed such feat, but I could not find a complete guide as to how to do this. The environment: Typescript using ES6 modules Karma J

Having problems with the use of OpenCV Vector and MATLAB

I am trying to use a feature detector in OpenCV in MATLAB. For that, I am creating a MEX file that calls certain other functions in other CPP files. These functions implement the necessary routine to call the OpenCV feature detector. Everything is we

Problem with the MySQL query using PDO and OOP

I'm having a problem with my login script. I'm trying to make a method to make my mySQL query handling easier. My code should return "OK!" to the page, but instead it returns "No user", which means that it counts 0 rows. I've tested th

Test a service with a promise in Angular with Karma-Jasmine

I am starting to test a service in Angularjs with Karma and Jasmine. I have no idea how $q works, i have never use it and anyway i do not know if it is necessary here. My problem is that I have a service which have 1 function which calls another func

Problem with a content type Theme ZK and IE Behavior (.htc)

BASIC QUESTION: Is there a way to set the mime-type (content-type) of elements inside a jar that are pulled into a ZK theme? Extended background (already posted to ZK Forums with no response) We are building a theme .jar for our application, and I ha

navigator.webkitGetUserMedia breaks tests with Karma / Jasmine

I got a AngularJS WebApp, wich i test with Karma and Jasmine.js But it throws an error if i use navigator.webkitGetUserMedia() in my controller. TypeError: 'undefined' is not a function (evaluating 'navigator.webkitGetUserMedia') Here is a sample of

Problem with file transfer using Java sockets and DataStreams

I've been working on a chat client for myself and some friends, and decided to attempt to add functionality to allow file transfers between clients. I am able to send a file, but it arrives in a different state than the file sent. As an example, here

Angular is undefined Error with karma-jasmine test

I am new to Testing using Karma-jasmine to run the test but getting error. My karma.conf.js files: [ 'test/*Spec.js', 'app/js/*.js' ], This error is Showing in command line Chrome 39.0.2171 (Windows 7) ERROR Uncaught TypeError: Cannot read property '

Control unit of a modalInstance controller with Karma / Jasmine

EDIT : Quick & Dirty solution at the end of this post I am using a modal window from AngularUI-Bootstrap in the same way that it is explained on the website, except that I splitted files. Therefore I have : CallingController.js : $scope.delete = func

problem with the font size using html and css

when i built my first all html/css website i used clickable images as a menu and every image and div scaled in % so it would adapt extremely well to all monitors and browsers, and it did. now on a new project i wanted to do the website menu using a b