ElementAssertion.ts

import { Assertion, AssertionError } from "@assertive-ts/core";
import { get } from "dot-prop-immutable";
import { Children } from "react";
import { ReactTestInstance } from "react-test-renderer";

import { instanceToString } from "./helpers/helpers";

export class ElementAssertion extends Assertion<ReactTestInstance> {
  public constructor(actual: ReactTestInstance) {
    super(actual);
  }

  public override toString = (): string => {
    return instanceToString(this.actual);
  };

  /**
   * Check if the component is disabled or has been disabled by an ancestor.
   *
   * @example
   * ```
   * expect(component).toBeDisabled();
   * ```
   *
   * @returns the assertion instance
   */
  public toBeDisabled(): this {
    const error = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} to be disabled.`,
    });
    const invertedError = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} NOT to be disabled.`,
    });

    return this.execute({
      assertWhen: this.isElementDisabled(this.actual) || this.isAncestorDisabled(this.actual),
      error,
      invertedError,
    });
  }

  /**
   * Check if the component is enabled and has not been disabled by an ancestor.
   *
   * @example
   * ```
   * expect(component).toBeEnabled();
   * ```
   * @returns the assertion instance
   */
  public toBeEnabled(): this {
    const error = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} to be enabled.`,
    });
    const invertedError = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} NOT to be enabled.`,
    });

    return this.execute({
      assertWhen: !this.isElementDisabled(this.actual) && !this.isAncestorDisabled(this.actual),
      error,
      invertedError,
    });
  }

  /**
   * Check if the element is empty.
   *
   * @example
   * ```
   * expect(element).toBeEmpty();
   * ```
   *
   * @returns the assertion instance
   */
  public toBeEmpty(): this {
    const error = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} to be empty.`,
    });
    const invertedError = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} NOT to be empty.`,
    });

    return this.execute({
      assertWhen: Children.count(this.actual.props.children) === 0,
      error,
      invertedError,
    });
  }

  /**
   * Check if the element is visible and has not been hidden by an ancestor.
   *
   * @example
   * ```
   * expect(element).toBeVisible();
   * ```
   *
   * @returns the assertion instance
   */
  public toBeVisible(): this {
    const error = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} to be visible.`,
    });
    const invertedError = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} NOT to be visible.`,
    });

    return this.execute({
      assertWhen: this.isElementVisible(this.actual) && this.isAncestorVisible(this.actual),
      error,
      invertedError,
    });
  }

  /**
   * Check if an element is contained within another element.
   *
   * @example
   * ```
   * expect(parent).toContainElement(child);
   * ```
   *
   * @param element - The element to check for.
   * @returns the assertion instance
   */
  public toContainElement(element: ReactTestInstance): this {
    const error = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} to contain element ${instanceToString(element)}.`,
    });
    const invertedError = new AssertionError({
      actual: this.actual,
      message: `Expected element ${this.toString()} NOT to contain element ${instanceToString(element)}.`,
    });

    return this.execute({
      assertWhen: this.isElementContained(this.actual, element),
      error,
      invertedError,
    });
  }

  private isElementContained(parentElement: ReactTestInstance, childElement: ReactTestInstance): boolean {
    if (parentElement === null || childElement === null) {
      return false;
    }

    return (
        parentElement.findAll(
            node =>
                node.type === childElement.type && node.props === childElement.props,
        ).length > 0
    );
  }

  private isElementDisabled(element: ReactTestInstance): boolean {
    const { type } = element;
    const elementType = type.toString();
    if (elementType === "TextInput" && element?.props?.editable === false) {
      return true;
    }

    return (
        get(element, "props.aria-disabled")
        || get(element, "props.disabled", false)
        || get(element, "props.accessibilityState.disabled", false)
        || get<ReactTestInstance, string[]>(element, "props.accessibilityStates", []).includes("disabled")
    );
  }

  private isAncestorDisabled(element: ReactTestInstance): boolean {
    const { parent } = element;
    return parent !== null && (this.isElementDisabled(element) || this.isAncestorDisabled(parent));
  }

  private isElementVisible(element: ReactTestInstance): boolean {
    const { type } = element;

    if (type.toString() === "Modal") {
      return Boolean(element.props?.visible);
    }

    return (
      get(element, "props.style.display") !== "none"
      && get(element, "props.style.opacity") !== 0
      && get(element, "props.accessibilityElementsHidden") !== true
      && get(element, "props.importantForAccessibility") !== "no-hide-descendants"
    );
  }

  private isAncestorVisible(element: ReactTestInstance): boolean {
    const { parent } = element;
    return parent === null || (this.isElementVisible(parent) && this.isAncestorVisible(parent));
  }
}