Jasmine test runner for ExtJs

I have been thinking for a while on plugging Jasmine into ExtJs apps in an easy way. So here it goes an ExtJs TestRunner for Jasmine. This is more a PoC than a completed module, but so far it proved itself to be working as expected.

It can replace the app's viewport:

or work side by side:

The usage is rather simple:

//get the query params, so can dynamically adjust where the tests will be executed
//this may be handy if the tests need ui for example
var query = Ext.Object.fromQueryString(window.location.search),
    testRunnerCfg,
    tests = [
        'Jasmine.test.Simple',
        'Jasmine.test.Async'
    ];

//check if should handle the normal startup or kick in with the tests mode
if(Jasmine.util.TestRunner.isInTestMode()){

    //by default the test runner creates its own viewport that is displayed instead of the app
    //it is possible to customise this and display the jasmine output on the side or actually in any container

    //the default will run test runner with the standard output generated instead of the app
    testRunnerCfg = {
        tests: tests
    };

    //display tests on the side
    if(query.hasOwnProperty('testsonside') && query['testsonside']){
        this.viewport = Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    xtype: 'panel',
                    region: 'center',
                    layout: 'fit',
                    items: [
                        Ext.create('Jasmine.view.main.Main')
                    ]
                },
                {
                    xtype: 'panel',
                    region: 'south',
                    height: 300,
                    html: '
', overflowY: true, split: true, title: 'Jasmine output' } ] }); testRunnerCfg.outputContainer = 'jasmine_output'; } Ext.create('Jasmine.util.TestRunner', testRunnerCfg); } else { //normal app startup //create the app's viewport this.viewport = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ Ext.create('Jasmine.view.main.Main') ] }); }

for details see the example app on github

blog comments powered by Disqus