TypeError: Cannot read property 'keyPad' of undefined-CodePudding

I am having issue with this undefined error message: TypeError: Cannot read property 'keyPad' of undefined

I'm not sure how to resolve this error. What am I doing incorrect that it's unable to read the property? Error is in the method below

class logout extends BasePage {

  constructor() {
    super();
    this.inputField = Selector(
      '.form-input-field'
    );
  }
        

   async logoutProcess() {
      await t
      .click(this.inputField)
      .expect(this.numberKeypad.keyPad.visible)
      .ok({ timeout: 2000 });
        
        await this.numberKeypad.type('100');
        
        ...
    
      }
    
    }

I have the basePage:

export class BasePage {
  numberKeyPad: NumberKeypadModel;
  constructor() {
    this.numberKeyPad = new NumberKeypadModel();
  }
}

Finally I have the NumberKeypadModel page with the type method I'm trying to call on:

export class NumberKeypadModel {
  keyPad: Selector;
  constructor() {
    this.keyPad = Selector('.keypad').with({ timeout: 500 });
  }

  async type(num: string) {
    for (const char of [...num]) {
      await t.click(
        XPathSelector(
          `//div[@data-testid="keypad"]/button[.='${char}']`
        )
      );
      console.log(char);
    }
  }
}

CodePudding user response：

Capitalization difference:

In your class it's numberKeyPad:

this.numberKeyPad = new NumberKeypadModel();

But then you attempt to access numberKeypad:

.expect(this.numberKeypad.keyPad.visible)