passbolt-styleguide/src/react-extension/components/ResourceComment/AddResourceComment/AddResourceComment.test.page.object.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

/**
 * Passbolt ~ Open source password manager for teams
 * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
 *
 * Licensed under GNU Affero General Public License version 3 of the or any later version.
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
 * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
 * @link          https://www.passbolt.com Passbolt(tm)
 * @since         2.11.0
 */

import { fireEvent, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

/**
 * Page object for the AddResourceComment component
 */
export default class AddResourceCommentPageObject {
  /**
   * Default constructor
   * @param container The container which includes the AddComment Component
   */
  constructor(container) {
    this._container = container;
    this.user = userEvent.setup();
  }

  /**
   * Returns the form element
   */
  get form() {
    return this._container.querySelector("form.comment");
  }

  /**
   * Returns the textarea element
   */
  get textarea() {
    return this.form.querySelector("textarea");
  }

  /**
   * Returns the button to save
   */
  get saveButton() {
    return this.form.querySelector(".button.comment-submit");
  }

  /**
   * Returns the button to cancel
   */
  get cancelButton() {
    return this.form.querySelector(".cancel");
  }

  /**
   * Returns the error message element
   */
  get errorMessage() {
    return this.form.querySelector(".error-message");
  }

  /**
   * Returns true if the page object exists in the container
   */
  exists() {
    return this.form !== null;
  }

  /**
   * Returns true if the focus is on the textarea
   */
  hasFocus() {
    return this.textarea === document.activeElement;
  }

  /**
   * Returns true if the Too Long Comment message is displayed
   */
  isTooLong() {
    return this.errorMessage.textContent === "A comment must be less than 256 characters";
  }

  /**
   * Returns true if the Is Empty Comment message is displayed
   */
  isEmpty() {
    return this.errorMessage.textContent === "A comment is required.";
  }

  /**
   * Returns true if the Technical Error message is displayed
   * @param message The technical error message
   */
  hasTechnicalError(message) {
    return this.errorMessage.textContent === message;
  }

  /**
   * Returns true if the the component is in a disable state
   */
  isDisabled() {
    return (
      this.exists() &&
      this.textarea.hasAttribute("disabled") &&
      this.saveButton.hasAttribute("disabled") &&
      this.cancelButton.hasAttribute("disabled")
    );
  }
  /**
   * Write a text in the comment area
   * @param {string} content
   */
  async write(text) {
    this.textarea.focus();
    fireEvent.change(this.textarea, { target: { textContent: text } });
    await waitFor(() => {});
  }

  /**
   * Save the new comment
   * @param inProgressFn Function to call while saving
   * @returns {Promise<void>}
   */

  async save(inProgressFn) {
    await this.user.click(this.saveButton);
    await waitFor(inProgressFn || (() => {}));
  }

  /**
   * Cancels the add operation
   */
  async cancel() {
    await this.user.click(this.cancelButton);
  }

  /**
   * Press the escape key
   */
  async escape() {
    this.textarea.focus();
    await userEvent.keyboard("{Escape}");
  }
}