Get help with testing, discuss unit testing strategies etc.


Sencha Touch 2.2.1 with Siesta

Post Reply

Post by n0daft »

Hi there

I'm new to Siesta and currently facing some problems with the siesta setup.
I have an existing application with the following structure:

commons: code base used for various clients
large: code specifically for tablet clients
small: code specifically for smartphone clients

no i wanted to make some unit tests with siesta.
I setup the siesta toolkit as follow:

test
- siesta
--lib (containing the siesta-all.js and some css files)
--tests (containing the test files)
--index.html
--index.js

my index.html looks as follow:
<!DOCTYPE html>
<html>
    <head>
        <!-- Siesta UI must use ExtJS 4.2.0 (you can specify any other ExtJS version in your "preload" config) -->
        <link rel="stylesheet" type="text/css" href="https://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="lib/resources/css/siesta-all.css">

        <!-- Siesta UI must use ExtJS 4.2.0 (you can specify any other ExtJS version in your "preload" config) -->
        <script type="text/javascript" src="https://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
        <script type="text/javascript" src="lib/siesta-all.js"></script>

        <script type="text/javascript" src="index.js"></script>
    </head>

    <body>
    </body>
</html>
My index.js looks as follow: 
var Harness = Siesta.Harness.Browser.ExtJS;

Harness.configure({
    title       : 'XY - Test Suite',

    preload     : [
        // version of ExtJS used by your application
        '../../touch/resources/css/sencha-touch.css',
        '../../resources/css/xy.css',

        // version of ExtJS used by your application
        '../../touch/sencha-touch-all-debug.js',
        '../../touch/sencha-touch-all.js',
    ]
});

Harness.start(
	'test_bibliothek/100_sanity.t.js',
	'test_bibliothek/200_ajax.t.js',
	'test_bibliothek/UtilsTest.js'
);
Now i would like to write some unit tests. I wrote the following simple test:
StartTest(function(t) {
    t.diag("WeatherUtils");

Ext.Loader.setPath({
    'Ext.ux': 'commons/extensions/ux',
});

    t.it('getApproximateValue', function(t){
    	var utils = Ext.create('Ext.ux.WeatherUtils');
    	var x = utils.getApproximateValue(weatherDataEnum.CLOU, 0);
    	t.expect(x.toBe(1));
    });

    t.done();   // Optional, marks the correct exit point from the test
});
While executing in the browser console i get an error:
Failed loading synchronously via XHR: 'commons/extensions/ux/WeatherUtils.js'; please verify that the file exists. XHR status code: 404


I guess i am doing something wrong in general. WeatherUtils is a singleton class in my application. since i want to do unit tests, i do not want to have the whole application running. the methods should get testet isolated. however i guess i'm missing an important setup part of siesta. what is the correct way to get access to methods, classes, controllers etc. of my application?

I did not find any tutorials which fit my level of knowledge with sencha touch testing.

cheers

Post by mats »

You preloads look broken:
preload     : [
        // version of ExtJS used by your application
        '../../touch/resources/css/sencha-touch.css',
        '../../resources/css/xy.css',

        // version of ExtJS used by your application
        '../../touch/sencha-touch-all-debug.js',
        '../../touch/sencha-touch-all.js',
    ]
Why are you including Sencha Touch twice? That has to be fixed.

In your test file, the path the UX folder is probably incorrect - you should see a 404 if you look in your console. 
Ext.Loader.setPath({
    'Ext.ux': 'commons/extensions/ux',
});
Should be relative to the test harness HTML page.

Post by n0daft »

thanks for the reply

I was able to fix the 404 error. Now i'm getting an 'Ext.ux.WeatherUtils' is a singleton and cannot be instantiated error which leads me back to the question i asked in my first post. do i need to somehow create, initiate the whole application? if so, how am i supposed to do that? this singleton class contains only some basic methods which should be testet isolated.-

Post by nickolay »

Hi,

Well, you need to somehow bring that class on the page, before testing it. You can do it either with "preload" option, or you can specify empty preload and load it manually in the test code:
t.requireOk([ 'Ext.ux.MyClass' ], function () {
    // do something with the  class
})
The latter requires correct loader path to be set.

One more option for you is to test your application as a whole, using https://bryntum.com/docs/siesta/#!/api/S ... ostPageUrl option, though I'd start from covering separate classes with the unit tests first.
Post Reply