Results 1 to 3 of 3

Thread: [4.2.0-489] Unit testing controllers - specifically event handlers

  1. #1
    Sencha Premium Member twasink's Avatar
    Join Date
    Oct 2012
    Brisbane, Australia
    Vote Rating

    Default [4.2.0-489] Unit testing controllers - specifically event handlers

    One of the promoted advantages of 4.2.0, as per the announcement post, is that controllers can be unit tested.

    I have certainly found that I can easily instantiate a controller and unit test the methods without problems. However, I'm at a loss as to how to unit test the event listeners.

    Given a controller and Jasmine unit test like this:
    Ext.define("TestApp.controller.TestController", {
        extend : '',
        init : function() {
                'button' : { click : this.onClick }
        onClick : function(btn, e, eOpts) {
            console.log("Button was clicked");
    describe("Test Controller", function() {
        it("should be able to be created", function() {
            var test = Ext.create('TestApp.controller.TestController');
            spyOn(test, 'onClick');
            // Do something _here_ to simulate a button clikc
    what would be the best thing to do to trigger the event handler? Short of instantiating a view class that matches the selector (which would normally be more complex, of course)

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    The EventBus is not put onto the controllers themselves instead of getting them from the application. Before the controller would have to go to the application to set the listeners but now the bus is put on each controller.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Redwood coast
    Vote Rating


    Controller testing isn't easy because of the number of components involved. If you consider how Controllers work, there are two major things to test: component selectors/ref selectors and controller methods. The latter can be tested in the usual way, whereas component selectors depend on Ext.ComponentQuery, which in turn depends on actual components being instantiated for queries to be meaningful.

    Starting from this point, I'd suggest breaking Controller tests into two suites: first would instantiate the relevant View(s) and run over component selectors to test that they actually return Views in question; the second would test everything else. If your views are too heavy to be instantiated for testing, you can use mockups that replicate the structure of your view without adhering to the same layout constraints.

    If and when you find yourself with a View that's too big to be tested this way, that would mean it's a good candidate for refactoring.

    Just my 2 anyway.


Posting Permissions

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