karma jasmine with requirejs

[Muhammad Ammar]

Hi All,

This is the first time i have configured karma + jasmine + requirejs. Tests are running and passing but i am confused about how all the things are working together. I am using https://github.com/requirejs/text to load underscore templates in Backbone AMD modules, First thing i need to understand is why i have to load underscore files in karma.conf.js as i am already loading those underscore templates in my Backbone views. If i remove the below underscore files loading pattern from karma.conf.js then my Backbone view will fail to load underscore templates.

{ pattern: 'common/templates/**/*.underscore', included: false }

Second question, I have already configured all of my paths in main_requirejs.js as can see below then why again i need to load them in karma.conf.js. 

Third question,  it looks like that when my main_requirejs.js config is loaded jasmine module is not yet available at that time, for example i have below in my requirejs shim, 

'jasmine-stealth': {
    deps: ['jasmine']

} 

now when jasmine-stealth is loaded i got the below error, commenting the above will resolve the issue.

19 02 2016 12:05:16.741:WARN [web-server]: 404: /base/jasmine.js

Firefox 28.0.0 (Ubuntu 0.0.0) ERROR

  Error: Script error for "jasmine"

  http://requirejs.org/docs/errors.html#scripterror

  at /app/node_modules/requirejs/require.js:165

I am totally confused how the requirejs config is working with karma runner. I have followed the docs but found nothing regarding what i am doing wrong. Please help to understand how things are working and what i am doing doing wrong. 

Below are my karma and requirejs configuration for tests

karma.conf.js

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: 'js/vendor/jquery.min.js', included: false },
            { pattern: 'js/vendor/jasmine-jquery.js', included: true },
            { pattern: 'js/vendor/jquery.simulate.js', included: false },
            { pattern: 'js/vendor/jquery.truncate.js', included: false },
            { pattern: 'js/vendor/underscore-min.js', included: false },
            { pattern: 'js/vendor/underscore.string.min.js', included: false },
            { pattern: 'js/vendor/backbone-min.js', included: false },
            { pattern: 'js/vendor/backbone.paginator.min.js', included: false },
            { pattern: 'js/vendor/jquery.timeago.js', included: false },
            { pattern: 'js/vendor/URI.min.js', included: false },
            { pattern: 'js/test/i18n.js', included: false },
            { pattern: 'js/vendor/requirejs/text.js', included: false },
            { pattern: 'js/vendor/jasmine-stealth.js', included: false },

            { pattern: 'js/vendor/sinon-1.17.0.js', included: false},

            { pattern: 'common/js/components/**/*.js', included: false },
            { pattern: 'common/js/utils/**/*.js', included: false },
            { pattern: 'common/js/common_libraries.js', included: false },
            { pattern: 'common/templates/**/*.underscore', included: false },

            { pattern: 'common/js/spec/components/**/*.js', included: false },
            { pattern: 'common/js/spec/utils/**/*.js', included: false },
            { pattern: 'common/js/spec_helpers/**/*.js', included: false },

            'common/js/spec/main_requirejs.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: false,


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


        // 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
    })
}

main_requirejs.js

var specs = [],
    config = {};

// You can automatically get the test files using karma's configs
for (var file in window.__karma__.files) {
    if (/common\/js\/spec\/(components|utils)\/.*spec\.js$/.test(file)) {
        specs.push(file);
    }
}

(function(requirejs, define) {
    requirejs.config({
        baseUrl: '/base/',
        paths: {
            'gettext': 'js/test/i18n',
            'jquery': 'js/vendor/jquery.min',
            'jquery.ui': 'js/vendor/jquery-ui.min',
            'jquery.flot': 'js/vendor/flot/jquery.flot.min',
            'jquery.form': 'js/vendor/jquery.form',
            'jquery.markitup': 'js/vendor/markitup/jquery.markitup',
            'jquery.leanModal': 'js/vendor/jquery.leanModal',
            'jquery.ajaxQueue': 'js/vendor/jquery.ajaxQueue',
            'jquery.smoothScroll': 'js/vendor/jquery.smooth-scroll.min',
            'jquery.scrollTo': 'js/vendor/jquery.scrollTo-1.4.2-min',
            'jquery.timepicker': 'js/vendor/timepicker/jquery.timepicker',
            'jquery.cookie': 'js/vendor/jquery.cookie',
            'jquery.qtip': 'js/vendor/jquery.qtip.min',
            'jquery.fileupload': 'js/vendor/jQuery-File-Upload/js/jquery.fileupload',
            'jquery.iframe-transport': 'js/vendor/jQuery-File-Upload/js/jquery.iframe-transport',
            'jquery.inputnumber': 'js/vendor/html5-input-polyfills/number-polyfill',
            'jquery.immediateDescendents': 'coffee/src/jquery.immediateDescendents',
            'jquery.simulate': 'js/vendor/jquery.simulate',
            'jquery.url': 'js/vendor/url.min',
            'text': 'js/vendor/requirejs/text',
            'sinon': 'js/vendor/sinon-1.17.0',
            'underscore': 'js/vendor/underscore-min',
            'underscore.string': 'js/vendor/underscore.string.min',
            'backbone': 'js/vendor/backbone-min',
            'backbone.associations': 'js/vendor/backbone-associations-min',
            'backbone.paginator': 'js/vendor/backbone.paginator.min',
            "backbone-super": "js/vendor/backbone-super",
            'jasmine-jquery': 'js/vendor/jasmine-jquery',
            'jasmine-imagediff': 'js/vendor/jasmine-imagediff',
            'jasmine-stealth': 'js/vendor/jasmine-stealth',
            'jasmine.async': 'js/vendor/jasmine.async',
            'URI': 'js/vendor/URI.min'
        },
        shim: {
            'gettext': {
                exports: 'gettext'
            },
            'jquery.ui': {
                deps: ['jquery'],
                exports: 'jQuery.ui'
            },
            'jquery.flot': {
                deps: ['jquery'],
                exports: 'jQuery.flot'
            },
            'jquery.form': {
                deps: ['jquery'],
                exports: 'jQuery.fn.ajaxForm'
            },
            'jquery.markitup': {
                deps: ['jquery'],
                exports: 'jQuery.fn.markitup'
            },
            'jquery.leanModal': {
                deps: ['jquery'],
                exports: 'jQuery.fn.leanModal'
            },
            'jquery.smoothScroll': {
                deps: ['jquery'],
                exports: 'jQuery.fn.smoothScroll'
            },
            'jquery.ajaxQueue': {
                deps: ['jquery'],
                exports: 'jQuery.fn.ajaxQueue'
            },
            'jquery.scrollTo': {
                deps: ['jquery'],
                exports: 'jQuery.fn.scrollTo'
            },
            'jquery.cookie': {
                deps: ['jquery'],
                exports: 'jQuery.fn.cookie'
            },
            'jquery.qtip': {
                deps: ['jquery'],
                exports: 'jQuery.fn.qtip'
            },
            'jquery.fileupload': {
                deps: ['jquery.iframe-transport'],
                exports: 'jQuery.fn.fileupload'
            },
            'jquery.inputnumber': {
                deps: ['jquery'],
                exports: 'jQuery.fn.inputNumber'
            },
            'jquery.simulate': {
                deps: ['jquery'],
                exports: 'jQuery.fn.simulate'
            },
            'jquery.url': {
                deps: ['jquery'],
                exports: 'jQuery.fn.url'
            },
            'datepair': {
                deps: ['jquery.ui', 'jquery.timepicker']
            },
            'underscore': {
                deps: ['underscore.string'],
                exports: '_',
                init: function(UnderscoreString) {
                    /* Mix non-conflicting functions from underscore.string
                     * (all but include, contains, and reverse) into the
                     * Underscore namespace. This allows the login, register,
                     * and password reset templates to render independent of the
                     * access view.
                     */
                    _.mixin(UnderscoreString.exports());

                    /* Since the access view is not using RequireJS, we also
                     * expose underscore.string at _.str, so that the access
                     * view can perform the mixin on its own.
                     */
                    _.str = UnderscoreString;
                }
            },
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'backbone.associations': {
                deps: ['backbone'],
                exports: 'Backbone.Associations'
            },
            'backbone.paginator': {
                deps: ['backbone'],
                exports: 'Backbone.Paginator'
            },
            "backbone-super": {
                deps: ["backbone"]
            },
            'URI': {
                exports: 'URI'
            },
            'jasmine-imagediff': {
                deps: ['jasmine']
            },
            //'jasmine-stealth': {
            //    deps: ['jasmine']
            //},
            'jasmine.async': {
                deps: ['jasmine'],
                exports: 'AsyncSpec'
            },
            "sinon": {
                exports: "sinon"
            }
        },
        deps: specs,
        callback: window.__karma__.start
    });

}).call(this, requirejs, define);

Thanks