Individual test cases for dynamically loaded lists - WDIO Mocha

Within my website, I have a modal. Within this modal, there are tabs, and within the tabs - there is the possibility of subtabs.

My goal here, with the use of WDIO, Mocha and selenium, is to log in to the system, load the modal, and then for each tab, if there are no subtabs - validate the data on the form. If there ARE subtabs, validate the data on each subtab, and then move onto the next tab and repeat.

Here is an example:

Modal 1 contains Tabs: Sports, Science, Food

• Within the sports tab, there is hockey and football.
• Within the science tab, there are no subtabs.
• Within the food tab, there is fruits, vegetables, protein.

The desired output for this example would be:

• Log in
• Open the modal
• Click sports tab -> See there are subtabs -> click each subtab and validate the data
• Click science tab -> See there are no subtabs -> Validate the data
• Click food tab -> See there are subtabs -> click each subtab and validate the data

Please note that these tabs are dynamically loaded - so there could be more/fewer

The steps I have already tried.

  describe('Test suite for modal 1', function(){
       it('Login', function(){
            functions.login(); //Logs into the system
       });

       it('Open modal', function(){
            functions.openModal(); //Opens Modal
            tabs = functions.getTabs(); //Global variable tabs[]
       });

       tabs.forEach(function(tab){
            tab.click(); //Loads the tab
            subtabs = functions.getSubTabs(); //Global variables subtabs[]
            it('Validate tab', function(){
                 if(subtabs.length > 0){ //If there ARE subtabs
                      subtabs.forEach(function(subtab){ //For each subtab
                            it('Validate subtab', function(){
                                 subtab.click(); //Load the subtab
                                 validateForm(); //Validate the data
                            });
                      });
                 } 
                 validateForm();
            });
       });
   });

I have now learnt that this doesn't work because it's cannot be nested inside each other.

I also tried

describe('Test Modal', function(){
            for (const item in tabs) {
                    it('Should now loop through tabs ', function (item) {
                        console.log(arr1[item].getText());
                        browser.pause(2000);
                    })


                for (const item2 in subtabs) {
                        it('Should now loop through subtabs', function (item) {
                            console.log(arr2[item2].getText());
                            browser.pause(2000);
                        })
                }
            }
        })

but because the for loops are not inside a test case (it), they run instantly and therefore error because tabs and subtabs are both blank (because it('login') and it('openmodal') haven't run yet.

Any help would be greatly appreciated.