1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Question Extjs 3.2.X Unit Testing and Ext.test.session implementation

    Extjs 3.2.X Unit Testing and Ext.test.session implementation


    Hi,

    Since 3.2 Beta the extjs zip package contains a new folder named test, with a lots of unit testing examples.
    All this unit test works with Ext.test.session class.
    But there is no testing harness with the 3.2.X release (see why http://www.extjs.com/forum/showthrea...a-Unit-Testing)

    This is not the official Ext.test.session class!
    It is based on YUI 3 Test.

    GitHub Repo: http://github.com/yhwh/Ext.test

    Demos :
    All Widgets
    Simple Console

    Screenshots :
    All Widget
    Simple Console

    Sources :
    http://github.com/downloads/yhwh/Ext.test/Ext.test-1.1.zip

    API Documentation:
    http://ext-test.sylogix.org/docs/

    Tutorials :
    http://wiki.github.com/yhwh/Ext.test/
    Last edited by yhwh; 4 Jun 2010 at 7:11 AM. Reason: Big Update
    Nicolas FERRERO

    My GitHub Repo

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


    Nice, thanks for sharing

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Default


    Hi,

    Code updated:
    * Comments
    * Y.ObjectAssert.hasKeys and Y.ObjectAssert.areEqual
    * Interface enhancements
    See First Post


    Then,
    Y.ObjectAssert.hasKeys and Y.ObjectAssert.areEqual implementation proposition.
    Code:
    /** 
     * Asserts that all properties in the object exist in another object.
     * Note: ObjectAssert.hasKeys is not implemented in YUI 2.8
     * I'am not sure this implementation is correct, because in Direct.js 
     * (Ext 3.2.1) unit test this method seems to have 4 arguments.
     * @param {Object} actual An object with the actual properties.
     * @param {Mixed} keys An Array or an Object which contains expected key.
     * @param {String} message (Optional) The message to display if the assertion fails.
     */
    Y.ObjectAssert.hasKeys = function (actual, keys, message){
       if (!Ext.isArray(keys)){
        var properties = [];
        for (var key in keys){
           properties.push(key);
        }  
        keys = properties;
       } 
       var len = keys.length;
       for (var i = 0; i < len; i++){
          key = keys[i];
          Y.ObjectAssert.hasProperty(key,actual,message); 
       }  
    };
    /** 
     * Asserts that all properties in the object exist and are the same (===) in another object.
     * Note: ObjectAssert.areEqual is not implemented in YUI 2.8
     * I'am not sure this implementation is correct.
     * @param {Object} expected An object with the expected properties.
     * @param {Object} actual An object with the actual properties.
     * @param {String} message (Optional) The message to display if the assertion fails.
     */
    Y.ObjectAssert.areEqual = function(expected, actual, message){
      for (var property in expected){
        Y.Assert.areSame(expected[property], actual[property],message); 
      }
    };
    For Y.ObjectAssert.hasKeys, I'am not sure because in test of Ext.Direct there is 4 arguments in hasKeys methods.
    Direct.js at line 62.
    Code:
       Y.ObjectAssert.hasKeys(p.actions, p, Ext.Direct.providers, "Test providers cache");
    Why ? ? ?

    Any idea or comments appreciated
    Nicolas FERRERO

    My GitHub Repo

  4. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Impressed that you have been able to reverse-engineer this We do plan to release our testing harness before too long, though work on the framework itself is obviously a priority.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Default


    Hi,
    Code updated:
    - Grouping bug fix
    - getTestSuite fix
    - All 3.2.1 unit test added
    Nicolas FERRERO

    My GitHub Repo

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Posts
    28
    Vote Rating
    0
    eugs51 is on a distinguished road

      0  

    Default


    Wow, I really want that unit testing capability. I worked in something like this using extjs and QUnit then automatic testing to different browsers using JsUnit, QUnit and QUnit to JsUnit converter to realize this. If this existed before, I would have used it. Keep it up.

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Default


    Hi again,

    I have remarks about current unit test implementation on Extended Classes.

    Here an example:

    Class2 extend Class1.

    Code:
    Class2 = Ext.extend(Class1,{
      /* foo */
    });
    Then we write 2 Unit test , one for Class1 and one for Class2, with the current unit test style.
    Class1 Unit Test:
    Code:
    Ext.test.session.addTest( 'Core', {
    
        name: 'Class1',
    
        planned: X,
    
        setUp: function() {
           /* foo */
        },
    
        tearDown: function() {
         /* foo */
        }, 
        test_1: function() {
            /* foo */
        }
    });
    Class2 Unit Test:
    Code:
    Ext.test.session.addTest( 'Extension', {
    
        name: 'Class2',
    
        planned: X,
    
        setUp: function() {
           /* foo */
        },
    
        tearDown: function() {
         /* foo */
        }, 
        test_2: function() {
            /* foo */
        }
    });
    Then we run both with testing harness. But setUp and tearDown may be duplicated
    and the only way to test regression in Class 2, is to duplicate code of test_1 method from Class1.

    Code:
    Ext.test.session.addTest( 'Extension', {
    
        name: 'Class2',
    
        planned: X,
    
        setUp: function() {
           /* foo */
        },
    
        tearDown: function() {
         /* foo */
        }, 
        test_1: function() {
            /* foo */
        }
        test_2: function() {
            /* foo */
        }
    });
    So I think it's useful to create a testCase Class that we can extend so we will write Class1 and Class2 Unit Test like this

    Code:
     Ext.test.currentTestCases['Class1'] = Ext.extend(Ext.test.testCase,{
        name: 'Class1',
        testSuite: 'Core'
        planned: X,
    
        setUp: function() {
           /* foo */
        },
    
        tearDown: function() {
         /* foo */
        }, 
        test_1: function() {
            /* foo */
        }
    });
    Ext.test.currentTestCases['Class1'].register();
    Write Test of Class2 by extending Test of Class1, and we could check now if there is regression between Class1 and Class2, without code duplication.
    Code:
     Ext.test.currentTestCases['Class2'] = Ext.extend( Ext.test.currentTestCases['Class1'],{
        name: 'Class2',
        testSuite: 'Extension'
        planned: X,
    
        setUp: function() {
         Ext.test.currentTestCases['Class2'].superclass.setUp.apply(this,arguments);
           /* foo */
        },
    
        tearDown: function() {
          Ext.test.currentTestCases['Class2'].superclass.tearDown.apply(this,arguments);
         /* foo */
        }, 
        test_2: function() {
            /* foo */
        }
    });
    Ext.test.currentTestCases['Class2'].register();
    Any comments ?
    Because I'am not an expert in js unit testing, i only started this week

    PS: I hope this post is comprehensible, because my english is very bad
    Nicolas FERRERO

    My GitHub Repo

  8. #8
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Default


    Code update in first post progress bar added.
    Nicolas FERRERO

    My GitHub Repo

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
    yhwh is on a distinguished road

      0  

    Default


    Code update and fixes + Very Basic Tutorial
    Nicolas FERRERO

    My GitHub Repo

  10. #10
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


    well done, Nicolas
    this tutorial and codes are really helpful for me.