Ionic and Karma UnitTest


#1

Hello folks,

I know this question was opened here several times do you think its possible to create extra blog post about how to configure ionic framework with karma ? I think it would be really helpful for everybody…

Thank for anything you can share,

FK


#2

I agree, this is a good idea. Fkbart, do you need assistance with setting up karma and Ionic? I got it to work, so I can share what I know. That said, I just sort of made up my own solution, and I would rather see what a seasoned developer came up with.


#3

After hours of investigation;-) I came up with order of the individuation JS files, putting angular-mocks on the right position and it seem it works.
This is my config file. I wonder what is the top version ionic beta -11 can work with as I sticked with what is in the ionic distro. …

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'],
        files: [

            'www/lib/ionic-v1.0.0-beta.11/js/angular/angular.js',
            'www/lib/ionic-v1.0.0-beta.11/js/angular/angular-animate.js',
            'www/lib/ionic-v1.0.0-beta.11/js/angular/angular-sanitize.js',
            'www/lib/angular-mocks/angular-mocks.js',

            'www/lib/ionic-v1.0.0-beta.11/js/angular/angular-resource.js',
            'www/lib/ionic-v1.0.0-beta.11/js/angular-ui/angular-ui-router.js',
            'www/lib/ionic-v1.0.0-beta.11/js/ionic.js',
            'www/lib/ionic-v1.0.0-beta.11/js/ionic-angular.js',

            'www/app/**/*.js',
            'www/common/**/*.js',
            'test/unit/**/*.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', 'html'],

        // the default configuration
        htmlReporter: {
            outputDir: 'karma_html',
            templatePath: '../node_modules/karma-html-reporter/jasmine_template.html'
        },


        // 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: false
    });
};

#4

Hello @fkbart could you post a ionic example project on github who include “test” files and settings.
Thanks.
Flx.


#5

Hi There,

My project is not on Git Hub.

But what I did and All works me. is following setup:
The rest is I guess normal stuff.

/ROOT/
test/unit/**/. some tests here
karma.conf.js

the file looks like this:

    // Karma configuration
// Generated on Tue Aug 26 2014 13:07:37 GMT+0200 (CEST)

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'],
        files: [

            'www/lib/ionic-v1.0.0-beta.12/js/angular/angular.js',
            'www/lib/ionic-v1.0.0-beta.12/js/angular/angular-animate.js',
            'www/lib/ionic-v1.0.0-beta.12/js/angular/angular-sanitize.js',
            'www/lib/angular-mocks/angular-mocks.js',

            'www/lib/ionic-v1.0.0-beta.12/js/angular/angular-resource.js',
            'www/lib/ionic-v1.0.0-beta.12/js/angular-ui/angular-ui-router.js',
            'www/lib/ionic-v1.0.0-beta.12/js/ionic.js',
            'www/lib/ionic-v1.0.0-beta.12/js/ionic-angular.js',
            'www/lib/angular-http-auth/src/http-auth-interceptor.js',
            'www/lib/ngAutocomplete/src/ngAutocomplete.js',
            'www/lib/ng-file-upload/angular-file-upload.js',
            'www/lib/state-mock/stateMock.js',


            'www/app/**/*.js',
            'www/common/**/*.js',

            'www/app/**/*.html',
            'www/common/**/*.html',
            'www/common/**/*.html',

            'test/unit/**/*.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: {
            'www/app/**/*.js': ['coverage'],
            'www/common/**/*.js': ['coverage'],

            'www/app/**/*.html': 'ng-html2js',
            'www/common/**/*.html': 'ng-html2js'
        },


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

        // the default configuration
        htmlReporter: {
            outputDir: 'test/karma_html',
            templatePath: '../node_modules/karma-html-reporter/jasmine_template.html'
        },

        // optionally, configure the reporter
        coverageReporter: {
            type: 'html',
            dir: 'test/html_coverage/'
        },

        ngHtml2JsPreprocessor: {
            stripPrefix: 'www/'
        },

        // 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,


                   reportSlowerThan: 500,
        // 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: false


    });
};

Then I simply run it thru the command line or thru ide which is probably easier since Intellij IDEA offer direct debugging sources directly in the IDE editor.