The versatility of Protractor's variable scope when working with promises

Question

The versatility of Protractor's variable scope when working with promises

Insight into Angular App Testing

As I delved into testing my Angular app using ng-repeat to create a table, a user brought to my attention the presence of duplicate entries. Eager to address this issue, I visually confirmed it and proceeded to craft a Protractor test.

The Inquiry

Dilemma with Variable Scoping

During the test creation process, I stumbled upon peculiar behavior in the scope that seemed unfamiliar to me.

It seemed logical that the for-loop on line 61 would have access to linkStorage (line 38) as it resides in a higher scope. The console indicated successful addition of objects via the for-loop within the promise at line 47.

However, when attempting to perform the confirmation loop outside the promise, such as before the expect statement...

...linkStorage appeared as an empty object.

No nested key-value pairs could be identified upon iterating over the object; it was undeniably void of any data.

Pondering the Question (in short)

What is causing the linkStorage object to populate inside the then statement, but not before the expectation?

javascript angularjs protractor javascript-objects

Answer 1

Answer №1

The Power of Asynchronous Programming

Asynchronousity plays a crucial role in the success of the first example. The non-blocking nature of the .getAttribute method allows the code to keep executing while it fetches data, leading to the console loop being reached before the object is fully populated.

If you allow some time for the asynchronous code to do its job, say one second:

You'll see that linkStorage now contains the necessary information.

A Comprehensive Approach

To ensure precise timing and execution of code, chain multiple promises together as demonstrated below:

it('should not have duplicates within the match grid', function() {
    // Already on job A, with match grid shown.
    var duplicate = false;
    var linkStorage = {};

    // Save unique links
    var uniqueUserLinks = element.all(by.css('div.row table tbody tr td a'));
    
    // get an array of href attributes
    uniqueUserLinks.getAttribute('href')
      .then(function(hrefs) {
        // add the links to the linkStorage object
        for (var i = 0; i < hrefs.length; i++) {
          // if the link is already there
          if( linkStorage[ hrefs[i] ] ) {
            // update its counter
            linkStorage[hrefs[i]] += 1
            duplicate = true;
            // there's already one duplicate, which will fail the test
            break;
          } else {
            // create a link and start a counter
            linkStorage[hrefs[i]] = 1;
          }
        };
      }).then(function() {
        // confirm links have been added to storage
        for(var link in linkStorage) {
          console.log('link:', link );
          console.log('number:', linkStorage[link] );
        }
      }).then(function() {
         expect(duplicate).toBe(false);
     });
  });

Answer 2

The Power of Asynchronous Programming

Asynchronousity plays a crucial role in the success of the first example. The non-blocking nature of the .getAttribute method allows the code to keep executing while it fetches data, leading to the console loop being reached before the object is fully populated.

If you allow some time for the asynchronous code to do its job, say one second:

You'll see that linkStorage now contains the necessary information.

A Comprehensive Approach

To ensure precise timing and execution of code, chain multiple promises together as demonstrated below:

it('should not have duplicates within the match grid', function() {
    // Already on job A, with match grid shown.
    var duplicate = false;
    var linkStorage = {};

    // Save unique links
    var uniqueUserLinks = element.all(by.css('div.row table tbody tr td a'));
    
    // get an array of href attributes
    uniqueUserLinks.getAttribute('href')
      .then(function(hrefs) {
        // add the links to the linkStorage object
        for (var i = 0; i < hrefs.length; i++) {
          // if the link is already there
          if( linkStorage[ hrefs[i] ] ) {
            // update its counter
            linkStorage[hrefs[i]] += 1
            duplicate = true;
            // there's already one duplicate, which will fail the test
            break;
          } else {
            // create a link and start a counter
            linkStorage[hrefs[i]] = 1;
          }
        };
      }).then(function() {
        // confirm links have been added to storage
        for(var link in linkStorage) {
          console.log('link:', link );
          console.log('number:', linkStorage[link] );
        }
      }).then(function() {
         expect(duplicate).toBe(false);
     });
  });

The versatility of Protractor's variable scope when working with promises

Insight into Angular App Testing

The Inquiry

Dilemma with Variable Scoping

Pondering the Question (in short)

Answer №1

The Power of Asynchronous Programming

A Comprehensive Approach

Similar questions

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

The DOM assigned a new source to an image

AngularJS - the element of surprise in execution sequence

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

Using JavaScript in Internet Explorer 11, you can open multiple tabs without the UrlReferrer being null

JavaScript callback closure and the mysterious undefined variable

How can I access the marker's on-screen location in react-native-maps?

The functionality of the `next-auth` signOut button click does not seem to accept a variable as input, although

Issue: The `libsass` component could not be located

How can I improve my skills in creating efficient Angular routers?

End-to-end testing with Protractor using multiple capabilities: Running Internet Explorer at the same time

Issue with collapsed navbar button functionality in Bootstrap version 5.1.3

Keep the final item in an array that shares the same attribute

The function applyMiddleware in React Redux is not working correctly

Empty req.params in nested ExpressJS routers

Checking to see if an object is null using Javascript/AngularJS

Issue with nodes/JavaScript: Array objects not being properly updated

When attempting to download a file in AngularJS from an API REST, the file ends up becoming corrupted

Having trouble figuring out how to update a list using ajax in Yii

Executing ForceAtlas2 algorithm from a predetermined starting point within Sigma.js