src/page_objects/web/chat/chat.page.js

import BasePage from "../../base.page.js";
import NavPanel from "../general/nav.panel.js";

/** 
 * ChatPage
 * @extends BasePage
 */
class ChatPage extends BasePage {
  /**
   * @param {args} args Args from controller
   */
  constructor(args) {
    super(args);
    this.navPanel = new NavPanel(args);
  }

  // PAGE ELEMENTS
  /* eslint-disable require-jsdoc, max-len */
  chatWindowHeader() {
    return this.element(
      "div[class^=components-Chat-ChatConversationHeader__chatWindowHeaderTitle]"
    );
  }

  chatMessageField() {
    return this.element("textarea#chatMessageField");
  }

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

  newChatButton() {
    return this.element(
      "button[class^=components-Chat-ChatList__chatListHeaderButton]"
    );
  }

  chatContactSearchBar() {
    return this.element("input#chatContactSearch");
  }

  messageDivs() {
    return this.elements(
      `div[class^=components-Chat-ChatMessageGroup__messageItem]`
    );
  }

  contactsListItems(contactName) {
    return this.element(`li#chatContactListItem=${contactName}`);
  }

  contactSearchResult(contactName) {
    return this.element(
      `//div[contains(@class, 'components-Contacts-ContactListItem__overflowContainer') and contains(string(), '${contactName}')]`
    );
  }
  /* eslint-enable require-jsdoc, max-len */

  // PAGE FUNCTIONS

  /**
   * Visits this page
   */
  async visit() {
    await this.navPanel.chat().click();
  }

  /** 
   * Start a new chat with contact
   * @param {String} name Name of contact to start chat with
   */
  async startNewChatWithContact(name) {
    await this.newChatButton().click();
    await this.chatContactSearchBar().setValue(name);
    await this.contactSearchResult(name).click();
  }

  /** 
   * Get the first element in collection of elements
   * @returns {Array} Array of message objects 
   * @example
   * { 
   *   from: 'User 2', 
   *   timestamp: '12:20 PM', 
   *   message: 'hey, did you see the game?' 
   * }
   */
  async getChatMessages() {
    await this.pause(2000);

    const msgDivs = await this.messageDivs().all();
    return Promise.all(
      msgDivs.map(async div => {
        const innerDivs = await div.elements("div");
        const messageLabelDiv = await innerDivs.first();

        const fromElement = await messageLabelDiv.element(
          "span[class^=components-Chat-ChatMessageGroup__from]"
        );
        const timestampElement = await messageLabelDiv.element(
          "span[class^=components-Chat-ChatMessageGroup__timeStamp]"
        );
        const messageContentElement = await innerDivs.last();

        const from = await fromElement.getText();
        const timestamp = await timestampElement.getText();
        const messageContent = await messageContentElement.getText();

        return {
          from: from,
          timestamp: timestamp,
          message: messageContent
        };
      })
    );
  }

  /**
   * Send chat message on current chat page
   * @param {String} message Text of message to send
   */
  async sendChatMessage(message) {
    await this.chatMessageField().setValue(message);
    await this.keys("Enter");
  }

  /**
   * Clicks contact with provided name
   * @param {String} name Name of contact
   */
  async clickContact(name) {
    try {
      await this.contactsListItems(name).click();
    } catch (err) {
      throw new Error(`Could not click contact named '${name}' (${err})`);
    }
  }
}

export default ChatPage;