Nested it in Protractor/Jasmine

Question

Can I create a nested it in Protractor/Jasmine.

it("outer it", function () {
    it("inner it", function () {
        expect(1).toBe(1);
    });
});

I am trying to execute it test cases inside a loop, and in every iteration I want to run a test, for example:

it("outer it", function () {
    for(var i=0;i<10;i++){
        it("inner it", function () {
            expect(1).toBe(1);
        });
    }
});

The reason I want to do it is that I want to initialize an array and then in a dynamically way to loop trough all the element and run a number of "it", for example:

describe ("[Components]", function() {
   var grid = new Grid();

   it("Initialize the grid for the history window", function () {
       grid.init();
   });

   for(var i=0;i<grid.length;i++){
       it("test 1", function () {
           expect(1).toBe(1);
       });
   }

});

The grid.length is equal to 0 when the for loop execute, I want the for loop execute after the initialize "it".

Answer 1

Answering to your question, no you cannot nest it's one inside other. Though Jasmine framework doesn't throw any error, the code inside a nested it doesn't execute. Also, I don't see any use of nesting it's as they are specs or functions that run on their own to complete a particular test step. It also gives an overview of the function that is being executed currently. If you are trying to run something in a loop, you can create another function and then call it inside the for loop, something like this -

it("outer it", function () {
    var newFunction = function(){
        expect(1).toBe(1);
    };
    for(var i=0;i<10;i++){
        newFunction();
    };
});

Hope this helps. More on it's can be found here - Jasmine Framework - it's

Answer 2

1. As mentioned earlier - no, you can not place it inside of another it block, BUT you could place a whole describe block inside another one
2. You also have an ability to run it blocks inside of for loops, OR for example make it block conditional.

You can find a real example of a code below (I've added for loop just for demonstration purposes)

describe("E2E: Environment configuration test", function () {

    beforeAll(function () {
        logIn();
    });

    afterAll(function () {
        logOut();
    });

    describe("Members page configuration test", function() {

    for (let i=0; i<3; i++) {
        it("Members page - columns", function () {
            //code that verifies that all columns of the page are presented
        });
    }

        it( "Members page - filters", function() {            
            //code that verifies that all filters of the UI are presented as expected
        });

        it( "Members page - eligibility feature", function() {            
            //code that verifies that if the feature is set to true then additional column must be displayed
        });

    });

    describe("Providers page configuration test", function() {

    // use of conditional it blocks
    // if feature is turned on run one set it blocks
    // otherwise execute another set of it blocks
        if (envConfig.providerFeature) {

            it( "Organizations tab configuration test", function() {            
                //code that verifies that all elements of the current tab are displayed according to configurations of all features of the application 
            });

            it( "Practitioners tab configuration test", function() {});
                //code that verifies that all elements of the current tab are displayed according to configurations of all features of the application 
        
        } else {

            it( "Providers page - verification of the page being disabled", function() {
                //code that verifies that both tabs are not present in the UI
                console.log('Providers feature is set to FALSE for the environment by default configuration, the test case will be skipped');
            });
        }

    });

    it( "Users page configuration test", function() {
         //code that verifies that all elements of the current page are displayed according to configurations of all features of the application 
    });

    it( "Reports page configuration test", function() {

        if (!envConfig.disabledReportsFeature) {
         //code that verifies that all elements of the current page are displayed according to configurations of all features of the application 
        } else {
            console.log('Reports DISABLED_REPORTS_FEATURE is set to TRUE for the environment by default configuration, the test case will be skipped');

        }
    });
});

The console output in this case will look well organized

P.S. Additionally I will attach an image of clean console