How to override testClass methods with Siesta?

Question

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'
                    }
                },

Answer 1

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..