1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    3
    wgrant is on a distinguished road

      0  

    Default MVC Unit Testing Guide no longer works with Ext 4.2.0

    MVC Unit Testing Guide no longer works with Ext 4.2.0


    After upgrading to Ext 4.2.0, I find the MVC Unit Testing Guide to no longer work. Specifically I get the following error in Chrome:

    Uncaught Ext.app.Application.constructor(): [Ext.app.Application] Name property is required

    In the guide, app-test.js creates an Ext.app.Application object with a config object, and the name property is set. However looking at the Ext 4.2.0 source for app.Application, the constructor now tests for the name property to be set without calling Ext.apply() on the config object first.

    I see that the Ext 4.1.1a version (which worked fine for me) of this constructor used Ext.apply() to apply the config object and then tests that the name property was set.

  2. #2
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    197
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    Hi wgrant,

    Can I see some code please?

    Regards,
    Alex.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    3
    wgrant is on a distinguished road

      1  

    Default


    From the guide on Unit Testing in Ext JS 4.2.0 docs:

    Code:
    Ext.require('Ext.app.Application');
    
    
    var Application = null;
    
    
    Ext.onReady(function() {
        Application = Ext.create('Ext.app.Application', {
            name: 'AM',
    
    
            controllers: [
                'Users'
            ],
    
    
            launch: function() {
                //include the tests in the test.html head
                jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
                jasmine.getEnv().execute();
            }
        });
    });

  4. #4
    Sencha Premium Member rkleinkromhof's Avatar
    Join Date
    Apr 2013
    Location
    Enschede, The Netherlands
    Posts
    10
    Vote Rating
    1
    rkleinkromhof is on a distinguished road

      1  

    Default


    Hello,

    It seems that this:
    Code:
    Ext.create('Ext.app.Application', { <your config> };
    passes the following code in yoursdk/src/app/Application.js:
    Code:
        /**
         * Creates new Application.
         * @param {Object} [config] Config object.
         */
        constructor: function(config) {
            var me = this;
    
    
            //<debug>
            if (Ext.isEmpty(me.name)) {
                Ext.Error.raise("[Ext.app.Application] Name property is required");
            }
            //</debug>
    
    
            ...
        },
    I don't see how me.name can be set at this point, because the name property is just now being passed in the config var.

    I have, however, found a way to get the Unit Testing example working by using the following code in app-test.js:
    Code:
    Ext.require('Ext.app.Application');
    
    
    var Application = null;
    
    
    Ext.application({
        name: 'AM',
    
    
        controllers: [
            'Users'
        ],
        
        /* 
         * setting this option to true will make Ext.ComponentQuery.query be able to find your 
         * application's components without having to construct them separately in your tests, 
         * but will also render these components below your Jasmine report
         */
        autoCreateViewport: false, 
        
        launch: function() {
            Application = this;
            
            //include the tests in the test.html head
            jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
            jasmine.getEnv().execute();
        }
    });
    The downside is that your components will not be automatically rendered for you and therefore will not be found by Ext.ComponentQuery.query. This is not a problem for me, as i tend not to test UI interaction in a unit test. There are other tools for this, like Siesta.

    I hope this helps.

    Kind regards,

    Robert

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2012
    Location
    Boston, MA
    Posts
    44
    Vote Rating
    3
    chrisfarrell is on a distinguished road

      1  

    Default


    Robert,
    I have utilized your method for setting up Jasmine.
    Does it mean that I can not test 'refs' that are views?

    I have something similar to this:

    Code:
    Ext.define('MyApp.controller.MyController', {
        extend:'Ext.app.Controller',
        views:['MyView'],
         refs:[
            {
                ref:'myView',
                selector:'my_view'
            }
    }
    With a test similar to this:

    Code:
    describe("My controller refs", function(){
            var MyController = null;
     	beforeEach(function(){		if(!MyController){
    			MyController = MyApp.getController('MyController');
    		}
    	});
             
            /* this test passes*/
            it("should define a myView", function() {
                 var myView = MyController.getView("MyView");
        	     expect( myView ).toBeDefined();
            });
    
             
            /* this test fails, myView is undefined*/
            it("should define a myView ref", function() {
                 var myView = MyController.getMyView();
        	     expect( myView ).toBeDefined();
            });
    
    
    
    
    }

  6. #6
    Sencha Premium Member rkleinkromhof's Avatar
    Join Date
    Apr 2013
    Location
    Enschede, The Netherlands
    Posts
    10
    Vote Rating
    1
    rkleinkromhof is on a distinguished road

      0  

    Default


    Chris,

    i suggest you take a look at Ext Spec, since it is designed for testing Ext JS applications. It uses Jasmine for setup and matching, but adds a lot of Ext JS specific syntax.

    Your unit test code would look something like this:
    Code:
    describe("My controller refs", function() {
        'use strict';
    
    
        var controller,
            esj = ExtSpec.Jasmine;
    
    
        beforeEach(function() {
            this.addMatchers(esj.Matchers);
            controller = ExtSpec.create('MyApp.controller.MyController');
        });
    
    
        /* this test should pass*/
        it("should define a MyView", function() {
            expect(controller).toHaveView('MyView');
        });
    
    
    
    
        /* this test passes too*/
        it("should define a myView ref", function() {
            expect(controller).toHaveRef('myView');
        });
    });
    Both tests are running and passing in my project.

    As far as i know, boths tests only test that the controller has defined a MyView view and a myView ref, not that the application will return the correct view or any view at all.

    The Ext Spec documentation contains a lot of information on how to set up your tests for Ext JS applications.
    For testing defined resources specifically, see the part on Resource Matchers.

    I hope this helps. I'm sorry i have no pure Jasmine solution for you. However, if you have an application set up with Jasmine, using Ext Spec isn't that difficult anymore

    I use Ext Spec/Jasmine in combination with the Karma test runner. It works great for me. You also might want to take a look at that

    Good luck and happy coding!

    -Robert

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    3
    Vote Rating
    1
    jorisschutijzer is on a distinguished road

      0  

    Default


    rkleinkromhof

    I'm trying to do the same thing: karma in combo with ExtSpec and Jasmine.
    But I'm having trouble with this. Do you have a small example project where I can see how you set this up?

    kind regards,
    Joris

  8. #8
    Ext GWT Premium Member
    Join Date
    Nov 2009
    Posts
    14
    Vote Rating
    1
    ronaldploeger is on a distinguished road

      0  

    Default


    I created a blog entry on how to use Sencha Touch and Karma Test Runner. Should work the same for ExtJS: http://ronaldxq.blogspot.de/2013/12/...-or-extjs.html

  9. #9
    Sencha User
    Join Date
    Apr 2014
    Posts
    1
    Vote Rating
    0
    ColberRepor is on a distinguished road

      0  

    Default Please update Unit Testing Guide

    Please update Unit Testing Guide


    It is very frustrating to spend some time trying to follow the guide only to discover that it no longer works. Either put a warning that it doesn't work with 4.2+, or preferably update it.Thank you

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    ClaudeG is on a distinguished road

      0  

    Default Working Demos for Unit Testing ExtJS using Karma, Jasmine 1.0/2.0 and ExtJS 4.x

    Working Demos for Unit Testing ExtJS using Karma, Jasmine 1.0/2.0 and ExtJS 4.x


    I've written a few demos on unit testing ExtJs using Jasmine and Karma.. Mostly dealing with the asynchronous issues of either Stores and pure Ajax calls. You can check it out on GitHub at: https://github.com/cgauthier/karma_jasmine_2_extjs4 for Jasmine 2.0 and https://github.com/cgauthier/karma_jasmine_1_extjs4 for Jasmine 1.0.