PhantomJS test runner for ExtJs Jasmine test runner

Having borrowed some stuff from here I have extended my ExtJs Jasmine test runner so it can be used with PhantomJs.

The ExtJs Jasmine test runner as well as its new PhantomJs test runner have made it to a separate library called gm (see here how to use it); both test runners are actually the very first utils available ;)

So once you have PhantomJs installed and your tests created they can be executed in PhantomJs like this:

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

ExtJs 5 & 'strict mode'

There are some good discussions on why one should or should not use the strict mode when coding in JS. I am not going to elaborate on that but rather focus on what to do to write an ExtJs class / app in strict mode.

Before going further, a bit of reading on the strict mode:

ExtJs implements its own class system and basically does not support strict mode (here, here). This is the case with ExtJs 5 too so far. But luckily it will not stop us from creating an ExtJs class with strict mode enabled.

So let's have a look at an ExtJs class with strict mode enabled class wide:

(function(){
    //Make sure strict mode is on
    'use strict';

    Ext.define('MyApp.Class1', {

        daNumber: null,

        constructor: function(config){
            //do some work
            this.daNumber = 666;
        },

        gimmeDaNumber: function(){
            return this.daNumber;
        }
    });
}());

So far so good, the class behaves as expected, so let's extend it:

More...

OpenLayers.Layer.Panoramio

While working on one of our recent projects we came with an idea (or I should rather say - we eventually managed to spare some time on something not strictly project related ;) that giving some more context to a map should improve the perception of the map data itself:

More...