Search code examples
javascriptclassextjsui-testingsiesta

How to override testClass methods with Siesta?


I'm using Bryntum Siesta for UI testing an ExtJS app. I've created a TestClass and aim to use its methods for different views. Whole actions of test are same only some specific things are changing such as package, view, grid names. Here is some snippets from Test Suite:

Main Test Class

var isDisplaying =  'Grid is displaying now.';
var collapseDesc = 'Collapse Navbar';

Class('Siesta.Test.ListScreen', {

    isa     : Siesta.Test.ExtJS,

    methods: {
        navigation: function (callback) {
            var t = this;

            t.chain(
                {waitForCQ: 'treelist[itemId=navigationTreeList]'},

                function (next) {
                    t.click('treelist[itemId=navigationTreeList]');
                    next();

                },
                {click: '>> treelistitem[_text=Package_Name]'},
                {click: '>> treelistitem[_text=Package_Submodule]', desc: 'Package Submodule'+isDisplaying},
                {click: '#main-navigation-btn => .fa-navicon', desc: collapseDesc},

                function (next) {
                    console.log('navigation func log');
                    next();
                },

                callback
           )
       }
   }
});

And this testClass calling from Package_Submodule and getting success:

describe('UI Testing: Submodule List Screen', function (t) {

    //Extended method for navigation to submodule
    t.it('Should open: Submodule Grid', function (t) {
        t.chain(
            {
                navigation: t.next
            }
        )
    });
});

The thing here is I want to call same TestClass method for another Submodule and override several things such as Package_Name and Package_Submodule. How can i be success to do this?

Thanks in advance


UPDATE through JackSamura's answer:

Dear @SamuraiJack I've refactored the Main Class (ListScreen) and inserted has attribute. As well modified the harness with config property but unfortunately it did not override myPackageName or mySubModule. Instead of i got this error:

Waiting for element ">> treelistitem[_text=packageName]" to appear  

As well I've tried to use function arguments but it did not work too. Could you please give an idea why I couldn't override new values?

Main Class (Updated):

   var isDisplaying =  'Grid is displaying now.';
   var collapseDesc = 'Collapse Navbar';

    Class('Siesta.Test.ListScreen', {

        isa     : Siesta.Test.ExtJS,

        has : {
          myPackageName : 'packageName',
          mySubModule   : 'subModule'
        },

        methods: {
            navigation: function (callback) {
                var t = this;

                t.chain(
                    {waitForCQ: 'treelist[itemId=navigationTreeList]'},

                    function (next) {
                        t.click('treelist[itemId=navigationTreeList]');
                        next();

                    },
                    {click: '>> treelistitem[_text='+this.myPackageName+']'},
                    {click: '>> treelistitem[_text='+this.mySubModule+']', desc: this.mySubModule+isDisplaying},
                    {click: '#main-navigation-btn => .fa-navicon', desc: collapseDesc},

                    function (next) {
                        console.log('navigation func log');
                        next();
                    },

                    callback
               )
           }
       }
    });

index.js:

group: 'UI Tests',
    items: [
        {
            group: 'Submodule List Screen',
            testClass: Siesta.Test.ListScreen,
            items: [
                {
                    title           : 'Submodule1',
                    hostPageUrl     : localApp,
                    url             : '02-ui-tests/02_01-submodule-list-screen/submodule1-list.t.js',
                    config      : {
                        myPackageName     : 'Package1',
                        mySubModule       : 'Submodule1'
                    }
                },

Solution

  • You can do it in 2 ways:

    1) Add arguments to the "navigation" method:

    // callback should be the last one
    navigation: function (packageName, packageSubModule, callback) {
    

    Probably self-explanatory

    2) A bit more complex - add new attributes to your custom test class:

    Class('Siesta.Test.ListScreen', {
    
        isa     : Siesta.Test.ExtJS,
    
        has : {
            // values goes into prototype, like in Ext
            myPackageName : 'packageName',
            mySubModule   : 'subModule'
        },
    
        methods: {
    

    Then you can refer to those attributes in "navigation" method as usual: this.myPackageName

    Then, to override, you can either create a new test class (subclassing Siesta.Test.ListScreen) and re-define the attributes in it, or alternatively, use the config property of the test descriptor:

    harness.start(
        {
            url         : 'mytest.t.js',
            config      : {
                myPackageName     : 'value1',
                mySubModule       : 'value2'
            }
        },
        ...
    )
    

    Hint: To get the answer faster - post it to the Siesta forum: https://www.bryntum.com/forum/viewforum.php?f=20

    UPDATE:

    The errors you got are probably because "navigation" method is launched from the sub test (every "t.it()" or "t.describe()" section creates a separate "subtest"). Those sub tests won't have the config applied - it is applied only to the top-level test. One solution would be to copy the attribute values:

        // in the "methods" of the custom test class
        processSubTestConfig : function (config) {
            var cfg = this.SUPER(config)
    
            cfg.myPackage = this.myPackage
            ...
    
            return cfg
        },
    

    But that is already advanced Siesta internals coding. Probably just using function arguments will be simpler..