src/page_objects/web/general/header.panel.js

import BasePage from "../../base.page.js";

/** 
 * HeaderPanel 
 * @extends BasePage
 */
class HeaderPanel extends BasePage {
  /**
   * @param {args} args Args from controller
   */
  constructor(args) {
    super(args);
  }

  // PAGE ELEMENTS
  /* eslint-disable require-jsdoc */
  header() {
    return this.element(
      "div[class^=components-Header-Header__headerContainer]"
    );
  }

  availabilityDropdown() {
    return this.element("div#availability");
  }

  settings() {
    return this.element("li=Settings");
  }

  myProfile() {
    return this.element("li=My Profile");
  }

  availableOption() {
    return this.element("li=Available");
  }

  dndOption() {
    return this.element("li=Do Not Disturb");
  }

  signOutLink() {
    return this.element("a=Sign Out");
  }

  clientStatus() {
    return this.element("div[class^=components-Header-AvailabilityDropdown]");
  }
  /* eslint-enable require-jsdoc */

  // PAGE FUNCTIONS

  /** 
   * Logout of web app 
   */
  async logout() {
    await this.availabilityDropdown().click();
    await this.signOutLink().click();
  }

  /** 
   * Open modal of my profile
   */
  async goToMyProfile() {
    await this.availabilityDropdown().click();
    await this.myProfile().click();
  }

  /** 
   * Open modal of settings
   */
  async goToSettings() {
    await this.availabilityDropdown().click();
    await this.settings().click();
  }

  /**
   * Wait for header to be visible
   */
  async waitForHeader() {
    await this.header().waitForVisible();
  }
}

export default HeaderPanel;