How can I bind jasmine specs with the electron binary

[rajivsavroop]

Hi,

I am trying to setup my test framework for our electron app. My Karma config looks something like this

'use strict';

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ["jasmine"],
        browsers: ["Electron"],
        files: [
            { pattern: '/home/rkumar/blah/blah/karma.shim.js', included: true, served: true},
            { pattern:  '/home/rkumar/blah/blah//functionalTests/fse.spec.js', included: true, served: true }
        ],
        preprocessors: {
            '/home/rkumar/blah/blah//functionalTests/*.js': ['electron']
        }
    });
};

I've setup my ELECTRON_BIN to our electron binary, so when I so Karma start --log-level debug, my app launch's and on terminal it shows as

11 05 2016 17:58:11.426:DEBUG [plugin]: Loading karma-* from /home/rkumar/blah/blah//node_modules
11 05 2016 17:58:11.438:DEBUG [plugin]: Loading plugin /home/rkumar/blah/blah/node_modules/karma-chrome-launcher.
11 05 2016 17:58:11.467:DEBUG [plugin]: Loading plugin /home/rkumar/blah/blah/node_modules/karma-electron.
11 05 2016 17:58:11.491:DEBUG [plugin]: Loading plugin /home/rkumar/blah/blah/node_modules/karma-jasmine.
11 05 2016 17:58:11.941:DEBUG [karma]: List of files has changed, trying to execute
11 05 2016 17:58:11.942:WARN [karma]: No captured browser, open http://localhost:9876/
11 05 2016 17:58:11.964:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/karma.shim.js"
11 05 2016 17:58:11.966:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/spec/functionalTests/fse.spec.js"
11 05 2016 17:58:11.966:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/app/src"
11 05 2016 17:58:11.978:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
11 05 2016 17:58:11.995:INFO [launcher]: Starting browser Electron
11 05 2016 17:58:11.997:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-86992553
11 05 2016 17:58:11.998:DEBUG [launcher]: /home/rkumar/blah/blah/Programming-linux-x64/Programming /home/rkumar/blah/blah/node_modules/karma-electron/lib/electron-launcher.js --user-data-dir /tmp/karma-86992553 --url http://localhost:9876/?id=86992553

I am not able to see my tests output, either in terminal or in app console window. Could you please help me here? Thanks

[twolfson]

Everything looks right to me and it even says that Electron is being launched. It's possible that you are encountering the submodule issue (see top of README). I suggest creating a karma-electron browser that is visible to debug:

https://github.com/twolfson/karma-electron/tree/3.2.0#configuration

For reference, here's a working setup with mocha (should be similar to jasmine):

https://github.com/twolfson/mockdesk/blob/0.6.0/karma.conf.js

[rajivsavroop]

Thanks will give that a try.

[rajivsavroop]

updated dependencies with

"karma": "https://github.com/twolfson/karma/releases/download/dev%2Fpersonal.mix-16718fd/karma-0.13.22.tgz",
 "karma-electron": "git://github.com/twolfson/karma-electron#9bdfc93",

updated karma config as you described above, also added the customElectron launcher

browsers: ['CustomElectron'],

        // Define a custom launcher which inherits from `Electron`
        customLaunchers: {
            CustomElectron: {
                base: 'Electron',
                flags: [
                    '--show',
                    '--enable-logging'
                ]
            }
        },

Still can't see my tests :cry:

karma start --log-level debug
12 05 2016 11:08:53.299:DEBUG [config]: Loading config /home/rkumar/blah/blah/karma.conf.js
12 05 2016 11:08:53.308:DEBUG [plugin]: Loading plugin karma-electron.
12 05 2016 11:08:53.314:DEBUG [plugin]: Loading plugin karma-jasmine.
12 05 2016 11:08:53.315:DEBUG [plugin]: Loading inlined plugin (defining launcher:CustomElectron).
12 05 2016 11:08:53.325:DEBUG [web-server]: Instantiating middleware
12 05 2016 11:08:53.503:DEBUG [karma]: List of files has changed, trying to execute
12 05 2016 11:08:53.503:WARN [karma]: No captured browser, open http://localhost:9876/
12 05 2016 11:08:53.510:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/karma.shim.js"
12 05 2016 11:08:53.510:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/spec/functionalTests/fse.spec.js"
12 05 2016 11:08:53.511:DEBUG [watcher]: Watching "/home/rkumar/blah/blah/resources/app"
12 05 2016 11:08:53.513:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
12 05 2016 11:08:53.514:INFO [launcher]: Launching [ 'CustomElectron' ] Infinity
12 05 2016 11:08:53.548:INFO [launcher]: Starting browser Electron
12 05 2016 11:08:53.549:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-90664310
12 05 2016 11:08:53.550:DEBUG [launcher]: /home/rkumar/blah/blah/Programming /home/rkumar/blah/blah/node_modules/karma-electron/lib/electron-launcher.js --show --enable-logging --user-data-dir /tmp/karma-90664310 --url http://localhost:9876/?id=90664310

[twolfson]

Ah, it looks like I missed a spot on the docs/submodules.md page. It requires a client.useIframe: false flag in its config as well:

https://github.com/twolfson/karma-electron/tree/dev/fix.nested.context#getting-started

[rajivsavroop]

Updated the config but still same :( . I wonder if we can even bind the tests to the binary app. I tried including my app source in the config files but the source have external libraries that the app uses, so every time I run karma, the code in the library for example -

document.head.querySelector(
                        '[src$="/awesome.js"], [src^="/awesome.js"]'
                    ).src.replace(
                        /awesome\.js$/,
                        ''
                    )

Targets the karma default window and throws an error 'cannot read src of null'

[twolfson]

As a sanity check, can you verify that after updating your dependencies in your package.json you reinstalled karma and karma-electron?

rm -r node_modules
npm install

[rajivsavroop]

Yes, did rm -rf node modules and then npm i

[twolfson]

Cool, thanks =) Can you double-check that the config was set up properly?

It sounds like karma is trying to set iframe src not a child window location:

https://github.com/karma-runner/karma/blob/v0.13.22/client/karma.js#L26-L37

[rajivsavroop]

can we set the childWindow location to 'index.html' in karma configs? and then load the tests and other libraries once childWindow load is complete?

[twolfson]

I don't understand, what is index.html?

[rajivsavroop]

The app html file if I don't run karma with app binary.

[rajivsavroop]

So if I set ELECTRON_BIN=./node_modules/.bin/electron, I need to pass in the app src, thats where I get the error Cannot read property 'src' of null that I mentioned above.

But if I set ELECTRON_BIN=/home/rkumar/Git/ssmp_Apps/karma/Programming/dist/Programming-linux-x64/Programming, the app launches but doesn't include the tests

[twolfson]

That's not possible with karma; it needs to own/control the page where tests are being run. Otherwise, there's issues like:

• Installing hooks when/where we need
• Closing the application when we need
• Using a dynamic user directory to prevent cookie/localStorage sharing

I think you are looking for a webdriver solution. Please see the following resources:

• https://github.com/electron/electron/blob/v1.0.1/docs/tutorial/using-selenium-and-webdriver.md
• https://github.com/electron/spectron

[rajivsavroop]

I am checking webdriverio on the other hand, but the limitation there is that I cannot access the javascript events using that. I did a project with karma and node webkit (karma-nodewebkit-launcher) and was successfully able to inject the tests and javascript at that point. It gave me complete control over window and document and was able to access javascript events

[rajivsavroop]

Karma Config for node webkit app was this

console.log('if you have trouble remember to export NODEWEBKIT_BIN=nw');

var fs=require('fs');

//get app package
var nwPackage=JSON.parse(
    fs.readFileSync(
        __dirname+'/../src/package.json'
    ).toString()
);

var buildDir='../build/reports';

function exportConfig(config){
    config.set(
        {
            autoWatch   : false,
            autoWatchBatchDelay:1000,
            basePath    : '../src',
            //browserDisconnectTimeout:1200000,
            browserDisconnectTimeout:4200000,
            browserDisconnectTolerance:0,
            //browserNoActivityTimeout:1200000,
            browserNoActivityTimeout:4200000,
            browsers    : [
                'eyeOS'//, 
                //'Chrome-Cross-Domain'
            ],
            //captureTimeout:1200000,
            captureTimeout:4200000,
            client      :{
                args:[
                    'start'
                ],
                useIframe:false,
                captureConsole:false
            },
            colors      :true,
            customLaunchers: {
                eyeOS: {
                    base: 'NodeWebkit',
                    options: nwPackage
                },
                'Chrome-Cross-Domain': {
                    base: 'Chrome',
                    flags: [
                        '--disable-web-security'
                    ]
                }
            },
            exclude     :[],
            files       :[

                //set initial file to load
                '**/index.html',

                //make sure initial file is watched
                {
                    pattern:'**/index.html',
                    included:false,
                    served:true,
                    watched:true
                },
                {
                    pattern:'**/**/*.*',
                    included:false,
                    served:true,
                    watched:true
                },

                //include functional test tools.

                {
                    pattern:'../tests/lib/all.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {
                    pattern:'../tests/functional/app.test.tools.js',
                    included:true,
                    served:true,
                    watched:true
                },

                //include functional tests one at a time to preserver order.
                {
                    pattern:'../tests/functional/app.system.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },

                {
                    pattern:'../tests/functional/app.init.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },

                {
                    pattern:'../tests/functional/app.hybridSystem.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },

                {
                    pattern:'../tests/functional/login.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {
                    pattern:'../tests/functional/home.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {
                    pattern:'../tests/functional/blah.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {                   
                    pattern:'../tests/functional/blah.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {
                    pattern:'../tests/functional/blah.spec.js',
                    included:true,
                    served:true,
                    watched:true
                },
                {
                    pattern:'../tests/functional/blah.spec.js', 
                    included:true,
                    served:true,
                    watched:true
                }
            ],
            frameworks  :[
                'jasmine'
            ],
            hostname    : 'localhost',
            logLevel    : config.LOG_INFO,
            loggers     : [
                {
                    type: 'console'
                }
            ],
            plugins     : [
                'karma-*'
            ],
            port        : 9876,
//            preprocessors: {
//               'app/**/*.js' : ['coverage']
//            },

            preprocessors: {
               'app/core/*.js' : ['coverage'],
               'app/module/logic*/*.js' : ['coverage'],
               'app/module/ui-a*/*.js' : ['coverage'],
               'app/module/ui-c*/*.js' : ['coverage'],
               'app/module/ui-e*/*.js' : ['coverage'],
               'app/module/ui-fittingComplete/*.js' : ['coverage'],
               'app/module/ui-flow-state/*.js' : ['coverage'],
               'app/module/ui-footer/*.js' : ['coverage'],
               'app/module/ui-gamepad/*.js' : ['coverage'],
               'app/module/ui-header/module.js' : ['coverage'],
               'app/module/ui-login/module.js' : ['coverage'],
               'app/module/ui-main-action/*.js' : ['coverage'],
               'app/module/ui-notification/*.js' : ['coverage'],
               'app/module/ui-nw-controls/*.js' : ['coverage'],
               'app/module/ui-progress/*.js' : ['coverage'],
               'app/module/ui-reports/*.js' : ['coverage'],
               'app/module/ui-sidebar/*.js' : ['coverage'],
               'app/module/ui-sensitivity*/*.js' : ['coverage'],

           },

            proxies     : {
                '/app/': '/base/app/'
            },
            proxyValidateSSL: true,
            reportSlowerThan: 0,
            reporters   : [
                'dots',
                'progress',
                'coverage',
                'html',
                'junit'
            ],
            junitReporter: {
                  outputFile: buildDir+'/xml/test-results.xml',
                  suite: '*'
            },
            htmlReporter: {
                outputFile: buildDir+'/html/test-results.html'
            },
            coverageReporter: {
                subdir: 'coverage',
                reporters:[
                    //jenkins
                    {
                        type: 'cobertura', 
                        dir : buildDir+'/xml', 
                        file: 'test-coverage.xml'
                    },
                    //human
                    {
                        type: 'html',
                        dir : buildDir+'/html',
                    },
                    {   type: 'text', 
                        dir :  buildDir+'/txt',
                    },
                    {   
                        type: 'text-summary',
                        dir :  buildDir+'/txt',
                    }
                ]
            },
            runnerPort  : 9100,
            singleRun   : false,
            transports  : [
                'websocket'
            ],
            urlRoot     : '/'
        }
    );
}

module.exports=exportConfig;

[twolfson]

You should be able to access JavaScript events; anything you need can be written in via BrowserWindow's preload and ipc handlers (this can be done conditionally via an ENV=test flag/check).

I will check out karma-nodewebkit-launcher shortly

[twolfson]

I looked over karma-nodewebkit-launcher and don't see anything about using a custom HTML page. The package generates a new Node-Webkit package on each run which redirects to Karma's URL. The Node-Webkit binary it uses is a downloaded binary, not a compiled application.