Results 1 to 6 of 6

Thread: Ext4, Ext.Loader and JsTestDriver - WORKING!

  1. #1
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Bangkok, Thailand
    Vote Rating

    Default Ext4, Ext.Loader and JsTestDriver - WORKING!

    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 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):

      - ext/ext-debug.js
      - test/loader.js
      - test/MyTest.js
      - app/**
      - ext/src/**

    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 });
    • 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
    • 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.

      - 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

  2. #2
    Sencha Developer
    Join Date
    Sep 2008
    Antioch, IL
    Vote Rating


    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.

  3. #3
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Bangkok, Thailand
    Vote Rating


    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.

  4. #4
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Bangkok, Thailand
    Vote Rating


    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

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2011
    Vote Rating

    Default How to unit test controller

    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
    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
    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
    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:
        paths: {
            'app': '/test/app',
            'test': '/test/src-test/extjs'
        enabled: true,
    Thanks for your help.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Vote Rating


    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?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts