How to set an object variables and return them through a method - typescript?

Question

**I have a set, get class UserInfo which is used to set and get variables. I wanted to set those variables from a method createNewUser() and return the UserInfo object.

when I am trying to return the object it's always giving me null values. when I tried to return it from the then block, the method is complaining that there is no return value.**

 export default class UserInfo {
      private accountId!: string;
      private firstName!: string;
      private lastName!: string;

      constructor() {}

      /**
       * Gets Account Id
       */
      public getAccountId(): string {
        return this.accountId;
      }

      /**
       * Sets Account Id
       */
      public setAccountId(accountId: string) {
        this.accountId = accountId;
      }

    /**
       * Gets FirstName
       */
      public getFirstName(): string {
        return this.firstName;
      }

      /**
       * Sets FirstName
       */
      public setFirstName(firstName: string) {
        this.firstName = firstName;
      }

      /**
       * Gets LastName
       */
      public getLastName(): string {
        return this.lastName;
      }

      /**
       * Sets LastName
       */
      public setLastName(lastName: string) {
        this.lastName = lastName;
      }  

    }

    import UserInfo from '../../d/user-info'
    export default class QuickPage {
      constructor() {}

      lastNameText() {
        return cy.get('#lastName');
      }

     firstNameText() {
        return cy.get('#firstName');
      }

      accountIdText() {
        return cy.get('#accountId');
      }


    public createNewUser(): UserInfo {
        let userInfo =  new UserInfo();
        cy.getQuickRegisterUrl().then(url => {
          cy.log(url);
          cy.visit(url);

          this.firstNameText().getText().then((text) => {
            userInfo.setFirstName(text);
          });

          this.lastNameText().getText().then((text) => {
            userInfo.setLastName(text);
          });

          this.accountIdText().getText().then((text) => {
            userInfo.setAccountId(text);
          });    

        });
        return userInfo;
      }
    }

I am trying above code and userinfo is always returning undefined!!

can someone explain to me how to write this in asynchronous format?

Answer 1

Create a UserInfo variable globally in the class and set them in your createNewUser method and access them, wherever you called the QuickPage class. no need to write a return type you can write like this and this will work

 import UserInfo from '../../d/user-info'
    export default class QuickPage {
      public userInfo: UserInfo;
      constructor() {
    this.userInfo = new UserInfo();
    }

      lastNameText() {
        return cy.get('#lastName');
      }

     firstNameText() {
        return cy.get('#firstName');
      }

      accountIdText() {
        return cy.get('#accountId');
      }


    public createNewUser(){
        let userInfo =  new UserInfo();
        cy.getQuickRegisterUrl().then(url => {
          cy.log(url);
          cy.visit(url);

         this.firstNameText()
          .getText()
          .then(text => {
          this.userInfo.setFirstName(text);
           });

          this.lastNameText()
          .getText()
          .then(text => {
          this.userInfo.setLastName(text);
          });

         this.accountIdText()
        .getText()
        .then(text => {
         this.userInfo.setAccountId(text);
         });
      });   
    }
  }

Answer 2

Because createNewUser users cy commands, the results of these commands are only available using then function. In typescript you need to declare the return type as Chainable<UserInfo> , and instead of returning userInfo you should return cy.wrap(userInfo) . In addition, in the place you're calling createNewUser you should, instead of using the return value directly you should do something like this:

    createNewUser().then(userInfo => { ... })

The reason that in your code you get an empty object, it that anything that is invoked inside a then is performed asynchronously, and therefore the value of the members of userInfo are still not set when the method returns.

Answer 3

Hello you can do somthing like that:

Solution if all your methode are async and return promise:

public async createNewUser(): UserInfo {
   let userInfo =  new UserInfo();
   return  cy.getQuickRegisterUrl().then(url => {
      cy.log(url);
      cy.visit(url);

      // if all this methode are async 
      return this.firstNameText().getText().then((text) => {
        userInfo.setFirstName(text);
        return  this.lastNameText().getText().then((text) => {
          userInfo.setLastName(text);

          return this.accountIdText().getText().then((text) => {
            userInfo.setAccountId(text);

            return Promise.resolve(userInfo);
          });
        });
      });
    });
  }