Analyzing angular grid column cell content in TypeScript by comparing it with an array of strings

Question

Analyzing angular grid column cell content in TypeScript by comparing it with an array of strings

I have recently started working with TypeScript and I am trying to extract a list of values from an ag-grid column in order to compare them with a string array. Below is the function I created for this purpose. However, it appears that my ActualRatingsValues.push(text); line is not populating the ActualRatingsValues array as expected. I am unsure if this issue has something to do with promises. Can someone explain how promises work?

validateRatingsValues() {
   const ExpectedRatingsValues: Array<string> = ['A', 'B', 'C', 'D', 'E'];
   const ActualRatingsValues: Array<string> = [];
   const wrapper = element.all(by.css('.ag-pinned-left-cols-container div[col-id="name"]'))
            .getText()
            .then(text => {
                ActualRatingsValues.push(text);
            });

    let match = true;
    if (ExpectedRatingsValues != null && ActualRatingsValues != null) {
        if (ExpectedRatingsValues.length !== ActualRatingsValues.length) {
            match = false;

        } else {
            for (let i = 0; i < ActualRatingsValues.length; i++) {
                if (ActualRatingsValues[i].toString !== 
                    ExpectedRatingsValues[i].toString) {
                    match = false;
                    break;
                }
            }
        }
    } else {
        match = false;
    }

    expect(match).toBeTruthy();
}

javascript typescript protractor angular-promise

Answer 1

Answer №1

I have identified two issues in the code snippet provided.

1) In order to resolve the first issue, you need to replace ActualRatingsValues.push(text) with ActualRatingsValues.concat(text).

This change is necessary because the function element.all().getText() returns a promise that resolves to an array of strings, not just a string.

2) The second issue revolves around the fact that wrapper is a promise and assigning a value to ActualRatingsValues within a promise won't work as expected. To properly consume the data stored in ActualRatingsValues, you must do so inside the promise using the then() method.

validateRatingsValues() {
    const ExpectedRatingsValues: Array<string> = ['A', 'B', 'C', 'D', 'E'];
    const wrapper = element.all(by.css('.ag-pinned-left-cols-container div[col-id="name"]'))
            .getText();

    let match = wrapper.then(function(ActualRatingsValues) {
        let length = ExpectedRatingsValues.length;

        for(let i=0;i<length;i++) {
            let find = ActualRatingsValues.includes(ExpectedRatingsValues[i]);
            if (find === false) {
                return find;
            }           
        }

        return true;     
    });

    // The variable 'match' is also a promise which eventually resolves to a boolean value.
    // The reason why the expect statement doesn't consume 'match' inside then() is that Jasmine can detect it's a promise and handles the assertion internally.
    expect(match).toBeTruthy();
}

Answer 2

I have identified two issues in the code snippet provided.

1) In order to resolve the first issue, you need to replace ActualRatingsValues.push(text) with ActualRatingsValues.concat(text).

This change is necessary because the function element.all().getText() returns a promise that resolves to an array of strings, not just a string.

2) The second issue revolves around the fact that wrapper is a promise and assigning a value to ActualRatingsValues within a promise won't work as expected. To properly consume the data stored in ActualRatingsValues, you must do so inside the promise using the then() method.

validateRatingsValues() {
    const ExpectedRatingsValues: Array<string> = ['A', 'B', 'C', 'D', 'E'];
    const wrapper = element.all(by.css('.ag-pinned-left-cols-container div[col-id="name"]'))
            .getText();

    let match = wrapper.then(function(ActualRatingsValues) {
        let length = ExpectedRatingsValues.length;

        for(let i=0;i<length;i++) {
            let find = ActualRatingsValues.includes(ExpectedRatingsValues[i]);
            if (find === false) {
                return find;
            }           
        }

        return true;     
    });

    // The variable 'match' is also a promise which eventually resolves to a boolean value.
    // The reason why the expect statement doesn't consume 'match' inside then() is that Jasmine can detect it's a promise and handles the assertion internally.
    expect(match).toBeTruthy();
}

Answer 3

Answer №2

It's quite surprising that you're not encountering an error while attempting to push to ActualRatingsValues given that it is a const.

The issue at hand is that the lines after your getText() call are being executed before all the promises are resolved. This creates the illusion that it's not functioning as intended. One possible solution would be to utilize async/await.

Below is how you could implement async/await, with some code cleanup included:

async validateRatingsValues() {
    const ExpectedRatingsValues: Array<string> = ['A', 'B', 'C', 'D', 'E'];

    // this will wait for all the promises to resolve before continuing
    const wrapper = await element.all(by.css('.ag-pinned-left-cols-container div[col-id="name"]'))
              .getText()

    wrapper.forEach(item => {
        expect(ExpectedRatingsValues.indexOf(item)).toBeGreaterThan(-1);

        // this approach should also work
        expect(ExpectedRatingsValues).toContain(item);
    }

    expect(wrapper.length).toEqual(ExpectedRatingsValues.length);
}

There are alternative methods to address this without resorting to async/await. I attempted to demonstrate one briefly but realized it wouldn't suffice. For better insight, consider reviewing the question/answer mentioned by Matt in the comments - it contains valuable information.

Answer 4

It's quite surprising that you're not encountering an error while attempting to push to ActualRatingsValues given that it is a const.

The issue at hand is that the lines after your getText() call are being executed before all the promises are resolved. This creates the illusion that it's not functioning as intended. One possible solution would be to utilize async/await.

Below is how you could implement async/await, with some code cleanup included:

async validateRatingsValues() {
    const ExpectedRatingsValues: Array<string> = ['A', 'B', 'C', 'D', 'E'];

    // this will wait for all the promises to resolve before continuing
    const wrapper = await element.all(by.css('.ag-pinned-left-cols-container div[col-id="name"]'))
              .getText()

    wrapper.forEach(item => {
        expect(ExpectedRatingsValues.indexOf(item)).toBeGreaterThan(-1);

        // this approach should also work
        expect(ExpectedRatingsValues).toContain(item);
    }

    expect(wrapper.length).toEqual(ExpectedRatingsValues.length);
}

There are alternative methods to address this without resorting to async/await. I attempted to demonstrate one briefly but realized it wouldn't suffice. For better insight, consider reviewing the question/answer mentioned by Matt in the comments - it contains valuable information.

Analyzing angular grid column cell content in TypeScript by comparing it with an array of strings

Answer №1

Answer №2

Similar questions

Creating a diagonal effect on a table using jQuery

Determine if a variable contains only one digit in Angular 6 using Typescript

Tips for executing a series of getJSON requests sequentially, depending on the outcome of the preceding request

Using Angular's ui-router to nest ui-views inside of one another

Proper method to update the outdated R70 threejs code for compatibility with the latest version

Callback function for asynchronous operations on the client side with Meteor

`Even though I specified `{cache: $templateCache}` in the $http call, the directive is still showing $templateCache as

Is there a way for me to detect variations in the input and subsequently alter the text?

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Frequent occurrence when a variable is utilized prior to being assigned

Is there a way to identify the browser version that is being used?

Find a partial match in the regular expression

Error: Value not defined in the (Node, Express, Pug, JQuery) environment

Implementing Object-Oriented Programming (OOP) to insert data into a database in PHP

a guide on using ajax to distribute retrieved data among various td elements

Can next.js rewrites be configured with environment variables?

Issue with reCAPTCHA callback in Firebase Phone Authentication not functioning as expected

Vue - Troubleshooting why components are not re-rendering after data updates with a method

I encountered a MISSING_MESSAGE error while using the next-intl npm package in my next.js application

Unable to access the current state within an asynchronous function in React.js