Ext4, Ext.Loader and JsTestDriver - WORKING!

[mberrie]

I didn't find any article on the internet that explains how to get Ext4's dynamic class loading system (Ext.Loader) working with JsTestDriver.


Since the solution is not that obvious, I decided to share it with the community.

Note: JsTestDriver is a test runner for Javascript *unit* tests. It ships with its own framework for writing test-cases but supports other test frameworks such as Jasmine and QUnit with 3rd party plugins.

Disclaimer: this is not a beginner's tutorial how to write Javascript unit tests, nor how to use JsTestDriver. There are plenty of tutorials and blog posts that can help getting you started.

This post rather summarizes my findings (and a solution) on the specific problem of how to get Ext's dynamic class loader (Ext.Loader) working with JsTestDriver.


I came up with the following solution:

1. use the 'serve' config to have the embedded Jetty server service the Ext source files (and possibly your application source files as well).
   Note that files specified under the 'server' section will *not* be loaded into the page by the jstd test-runner automatically/by default (as opposed to files under the 'load' section). This allows Ext.Loader to load these files dynamically.
2. Configure Ext.Loader to know where to find the source files. JsTestDriver will serve your files from an absolute URL on the test server, that is '/test/...'.
3. Tell Ext.Loader to use synchronous requests to load class files (!)
4. Patch JsTestDriver to allow ** globbing (to recursively include directories), since this is not supported out of the box. JsTestDriver only supports globs with file extension that don't recurse into sub-directories (e.g. ext/src/*.js).
   
   Please note that the ** syntax used below is not supported in JsTestDriver yet. See http://code.google.com/p/js-test-dri...es/detail?id=6. Alternatives:
   • Include ALL Ext directories following the pattern ext/src/*.js, ext/src/util/*.js, etc. Exclude the ext/src/core directory sub-tree. Update: added config file snippet that lists all required mappings, see below.
   • Include ext-all.js in the load section and use dynamic loading only for application source files
   • include file by file (oh well...)
   • When listed in the 'serve' section the order of file definitions is *not* relevant, since Ext.Loader will evaluate dependencies to load files in the correct order.

jstestdriver.conf (example):

load:
  - ext/ext-debug.js
  - test/loader.js


test:
  - test/MyTest.js


serve:
  - app/**
  - ext/src/**

loader.js:

Ext.Loader.setPath('myAppName', '/test/app');
Ext.Loader.setPath('test', '/test/test');
Ext.Loader.setPath('Ext', '/test/ext/src');
Ext.Loader.setConfig({ enabled: true, syncModeEnabled: true });

Notes:

• make sure to restart the jstd server when modifying the 'serve' section. Even though it is the client (!) that uploads the config file and file infos, the server somehow doesn't properly update the served files without a restart. At least this is my experience with the JsTestDriver TRUNK (not sure about v1.3.2)
• Update: fixed in 1.3.3c. Both 1.3.2 and trunk don't work well on Windows due to bugs in the handling of file paths (/ vs \)
• Update: fixed in 1.3.3a. There is a critical bug in 1.3.2 with Chrome 14+ and FF 6 that will completely break the reporting of assert results from test cases. This is fixed on the trunk. See http://code.google.com/p/js-test-dri.../detail?id=263
• If one experiences file loading issues remember that it is possible to monitor the resources a captured browser loads in the browser's network tab (Firebug, DevTools, etc) - however, don't be fooled by the http status code. In case the test server cannot resolve the file it will return an *empty response* with status OK 200.

Add this to your JsTestDriver config file to allow Ext.Loader to access all ExtJs source files on the server.

serve:
  - ext/src/*.js
  - ext/src/app/*.js
  - ext/src/button/*.js
  - ext/src/chart/*.js
  - ext/src/container/*.js
  - ext/src/data/*.js
  - ext/src/dd/*.js
  - ext/src/direct/*.js
  - ext/src/draw/*.js
  - ext/src/flash/*.js
  - ext/src/form/*.js
  - ext/src/fx/*.js
  - ext/src/grid/*.js
  - ext/src/layout/*.js
  - ext/src/menu/*.js
  - ext/src/panel/*.js
  - ext/src/picker/*.js
  - ext/src/resizer/*.js
  - ext/src/selection/*.js
  - ext/src/slider/*.js
  - ext/src/state/*.js
  - ext/src/tab/*.js
  - ext/src/tip/*.js
  - ext/src/toolbar/*.js
  - ext/src/tree/*.js
  - ext/src/util/*.js
  - ext/src/view/*.js
  - ext/src/window/*.js
  - ext/src/chart/axis/*.js
  - ext/src/chart/series/*.js
  - ext/src/chart/theme/*.js
  - ext/src/data/proxy/*.js
  - ext/src/data/reader/*.js
  - ext/src/data/writer/*.js
  - ext/src/draw/engine/*.js
  - ext/src/form/action/*.js
  - ext/src/form/field/*.js
  - ext/src/fx/target/*.js
  - ext/src/grid/column/*.js
  - ext/src/grid/feature/*.js
  - ext/src/grid/header/*.js
  - ext/src/grid/plugin/*.js
  - ext/src/grid/property/*.js
  - ext/src/layout/component/*.js
  - ext/src/layout/container/*.js
  - ext/src/layout/component/field/*.js
  - ext/src/layout/container/boxOverflow/*.js
  - ext/src/tree/plugin/*.js

Update 2011-Oct-18:
- Updated to reflect changes (and bug fixes) in JsTestDriver 1.3.3c
- added 'serve' config example to allow loading of all ExtJs source files

[arthurakay]

Thanks for posting that!

I've been experimenting with jsTestDriver and Jasmine for a few weeks now, and I stumbled across this post while trying to debug something. I was having issues with asynchronous tests (trying to test a UI element before it had rendered)... it's a tricky thing to figure out.

I have a bunch of thoughts specific to a Sencha Touch app I'm building, so stay tuned to my blog or my Twitter account... I'll have something posted in the next week or two.

[mberrie]

I am going to switch to Jasmine (on jstd) soon. Need to use a mocking framework and I've heard a lot about Jasmine and want to give it a try (since it includes a mocking framework as well).

Haven't done anything yet with the async support since I focus on unit tests.

[mberrie]

Update 2011-Oct-18:
- Updated to reflect changes (and bug fixes) in JsTestDriver 1.3.3c
- added 'serve' config example to allow loading of all ExtJs source files

[pfongkye]

Hi all,
i have a MVC app in extjs 4 and i'm trying to do TDD using jsTestDriver. i followed the given instructions, used the load section to load ext-all and serve section for my app src files, got the tests running on my view classes only and not on my controller classes, e.g when i try to do the following:

ControllerTest = TestCase("ControllerTest");
ControllerTest.prototype.testInstantiateNotNull = function(){
var controller = Ext.create('app.controller.MyController');
assertNotNull('controller not null', controller);
};

i'm getting the following output:

Total 1 tests (Passed: 0; Fails: 0; Errors: 1) (14.00 ms)
Chrome 16.0.912.63 Windows: Run 1 tests (Passed: 0; Fails: 0; Errors 1) (14.00
ms)
ControllerTest.testInstantiateNotNull error (14.00 ms): TypeError: Cannot
call method 'getModel' of undefined
TypeError: Cannot call method 'getModel' of undefined
at [object Object].getModel (http://localhost:42442/test/javascripts/e
xtjs/extjs/ext-all.js:15:224142)
at [object Object].getTestModel (http://localhost:42442/test/extjs/ext-all.js:15:14885)
at [object Object].<anonymous> (http://localhost:42442/test/extjs/ext-all.js:15:223317)
at Object.each (http://localhost:42442/test/extjs/ex
t-all.js:15:10359)
at [object Object].createGetters (http://localhost:42442/test/extjs/ext-all.js:15:223138)
at new <anonymous> (http://localhost:42442/test/extjs/ext-all.js:15:222882)
at [object Object].self (http://localhost:42442/test/extjs/ext-all.js:15:35731)
at eval at <anonymous> (http://localhost:42442/test/extjs/ext-all.js:15:42965)
at Object.instantiate (http://localhost:42442/test/javascri...ll.js:15:42725)
at Object.create (http://localhost:42442/test/extjs/ext-all.js:15:14985)

Tests failed: Tests failed. See log for details.

and my loader.js:

Ext.Loader.setConfig({
    paths: {
        'app': '/test/app',
        'test': '/test/src-test/extjs'
    },
    enabled: true,
    syncModeEnabled:true
});

Thanks for your help.

[edgarinvillegas]

Thans so much for sharing this. I know it will be useful for the problem I'm facing. Do you know if the ** has been added to official version? or if there have been more improvements?