feat(native): Add toHaveProp

packages/native/src/lib/ElementAssertion.ts

@@ -2,17 +2,15 @@ import { Assertion, AssertionError } from "@assertive-ts/core";
 import { get } from "dot-prop-immutable";
 import { ReactTestInstance } from "react-test-renderer";
 
+import { instanceToString, isEmpty } from "./helpers/helpers";
+
 export class ElementAssertion extends Assertion<ReactTestInstance> {
   public constructor(actual: ReactTestInstance) {
     super(actual);
   }
 
   public override toString = (): string => {
-    if (this.actual === null) {
-      return "null";
-    }
-
-    return `<${this.actual.type.toString()} ... />`;
+    return instanceToString(this.actual);
   };
 
   /**
@@ -32,7 +30,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
     const invertedError = new AssertionError({
       actual: this.actual,
-      message: `Expected element ${this.toString()} to NOT be disabled.`,
+      message: `Expected element ${this.toString()} NOT to be disabled.`,
     });
 
     return this.execute({
@@ -43,7 +41,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
   }
 
   /**
-   * Check if the component is enabled.
+   * Check if the component is enabled and has not been disabled by an ancestor.
    *
    * @example
    * ```
@@ -58,7 +56,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
     const invertedError = new AssertionError({
       actual: this.actual,
-      message: `Expected element ${this.toString()} to NOT be enabled.`,
+      message: `Expected element ${this.toString()} NOT to be enabled.`,
     });
 
     return this.execute({
@@ -68,6 +66,140 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
   }
 
+  /**
+   * 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: isEmpty(this.actual.children),
+      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.isAncestorNotVisible(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)}.`,
+    });
+
+    const 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
+      );
+    };
+
+    return this.execute({
+      assertWhen: isElementContained(this.actual, element),
+      error,
+      invertedError,
+    });
+  }
+
+  /**
+   * Check if the element has a specific property or a specific property value.
+   *
+   * @example
+   * ```
+   * expect(element).toHaveProp("propName");
+   * expect(element).toHaveProp("propName", "propValue");
+   * ```
+   *
+   * @param propName - The name of the prop to check for.
+   * @param value - The value of the prop to check for.
+   * @returns the assertion instance
+   */
+  public toHaveProp(propName: string, value?: unknown): this {
+    const propValue: unknown = get(this.actual, `props.${propName}`, undefined);
+    const hasProp = propValue !== undefined;
+    const isPropEqual = value === undefined || propValue === value;
+
+    const errorMessage = value === undefined
+      ? `Expected element ${this.toString()} to have prop '${propName}'.`
+      : `Expected element ${this.toString()} to have prop '${propName}' with value '${String(value)}'.`;
+
+    const invertedErrorMessage = value === undefined
+      ? `Expected element ${this.toString()} NOT to have prop '${propName}'.`
+      : `Expected element ${this.toString()} NOT to have prop '${propName}' with value '${String(value)}'.`;
+
+    const error = new AssertionError({ actual: this.actual, message: errorMessage });
+    const invertedError = new AssertionError({ actual: this.actual, message: invertedErrorMessage });
+
+    return this.execute({
+      assertWhen: hasProp && isPropEqual,
+      error,
+      invertedError,
+    });
+  }
+
   private isElementDisabled(element: ReactTestInstance): boolean {
     const { type } = element;
     const elementType = type.toString();
@@ -87,4 +219,24 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     const { parent } = element;
     return parent !== null && (this.isElementDisabled(element) || this.isAncestorDisabled(parent));
   }
+
+  private isElementVisible(element: ReactTestInstance): boolean {
+    const { type } = element;
+    const elementType = type.toString();
+    if (elementType === "Modal" && !element?.props?.visible === true) {
+      return false;
+    }
+
+    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 isAncestorNotVisible(element: ReactTestInstance): boolean {
+    const { parent } = element;
+    return parent !== null && (!this.isElementVisible(element) || this.isAncestorNotVisible(parent));
+  }
 }

packages/native/src/lib/helpers/helpers.ts

@@ -0,0 +1,33 @@
+import { ReactTestInstance } from "react-test-renderer";
+
+/**
+ * Checks if a value is empty.
+ *
+ * @param value - The value to check.
+ * @returns `true` if the value is empty, `false` otherwise.
+ */
+export function isEmpty(value: unknown): boolean {
+  if (!value) {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+
+  return false;
+}
+
+/**
+ * Converts a ReactTestInstance to a string representation.
+ *
+ * @param instance - The ReactTestInstance to convert.
+ * @returns A string representation of the instance.
+ */
+export function instanceToString(instance: ReactTestInstance | null): string {
+  if (instance === null) {
+    return "null";
+  }
+
+  return `<${instance.type.toString()} ... />`;
+}