feat(native): Add toBeDisabled

.gitignore

@@ -17,5 +17,8 @@ node_modules/
 # VSCode
 .vscode/
 
+# idea
+.idea/
+
 # Packages
 *.tgz

package.json

@@ -35,5 +35,8 @@
     "eslint-plugin-sonarjs": "^0.24.0",
     "turbo": "^1.12.4",
     "typescript": "^5.4.2"
+  },
+  "dependencies": {
+    "@testing-library/react-native": "^12.8.1"
   }
 }

packages/native/package.json

@@ -34,6 +34,7 @@
     "test": "NODE_ENV=test mocha"
   },
   "dependencies": {
+    "dot-prop-immutable": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
     "tslib": "^2.6.2"
   },

packages/native/src/lib/ElementAssertion.ts

@@ -0,0 +1,78 @@
+import { Assertion, AssertionError } from "@assertive-ts/core";
+import { get } from "dot-prop-immutable";
+import { ReactTestInstance } from "react-test-renderer";
+
+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()} testID="${this.actual.props.testID}"... />`;
+  };
+
+   /**
+    * Check if the component is disabled.
+    *
+    * @example
+    * ```
+    * expect(component.toBeDisabled()).toBeTruthy();
+    * ```
+    *
+    * @returns the assertion instance
+    */
+
+  public toBeDisabled(): this {
+    const error = new AssertionError({
+      actual: this.actual,
+      message: `Received element ${this.toString()} is enabled.`,
+    });
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      message: `Received element ${this.toString()} is disabled.`,
+    });
+
+    return this.execute({
+      assertWhen: this.isElementDisabled(this.actual) || this.isAncestorDisabled(this.actual),
+      error,
+      invertedError,
+    });
+  }
+
+  /**
+   * Check if the component is enabled.
+   *
+   * @example
+   * ```
+   * expect(component.toBeEnabled()).toBeTruthy();
+   * ```
+   * @returns the assertion instance
+   */
+  public toBeEnabled(): this {
+    return this.not.toBeDisabled();
+  }
+
+  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));
+  }
+}

packages/native/src/main.ts

@@ -0,0 +1,32 @@
+import { Plugin } from "@assertive-ts/core";
+import { ReactTestInstance } from "react-test-renderer";
+
+import { ElementAssertion } from "./lib/ElementAssertion";
+
+declare module "@assertive-ts/core" {
+
+    export interface Expect {
+      // eslint-disable-next-line @typescript-eslint/prefer-function-type
+      (actual: ReactTestInstance): ElementAssertion;
+    }
+}
+
+const ElementPlugin: Plugin<ReactTestInstance, ElementAssertion> = {
+    Assertion: ElementAssertion,
+    insertAt: "top",
+    predicate: (actual): actual is ReactTestInstance =>
+        typeof actual === "object"
+        && actual !== null
+        && "instance" in actual
+        && typeof actual.instance === "object"
+        && "type" in actual
+        && typeof actual.type === "object"
+        && "props" in actual
+        && typeof actual.props === "object"
+        && "parent" in actual
+        && typeof actual.parent === "object"
+        && "children" in actual
+        && typeof actual.children === "object",
+};
+
+export const NativePlugin = [ElementPlugin];

packages/native/test/lib/ElementAssertion.test.tsx

@@ -0,0 +1,94 @@
+import { AssertionError, expect } from "@assertive-ts/core";
+import { render } from "@testing-library/react-native";
+import {
+  View,
+  TextInput,
+} from "react-native";
+
+import { ElementAssertion } from "../../src/lib/ElementAssertion";
+
+describe("[Unit] ElementAssertion.test.ts", () => {
+  describe(".toBeDisabled", () => {
+    context("when the element is TextInput", () => {
+      it("returns the assertion instance when is not editable", () => {
+        const element = render(
+            <TextInput testID="id" editable={false} />,
+        );
+        const test = new ElementAssertion(element.getByTestId("id"));
+        expect(test.toBeDisabled()).toBe(test);
+      });
+      it("throws an error when it is editable", () => {
+        const reactElement = render(<TextInput editable={true} testID="id" />);
+        const test = new ElementAssertion(reactElement.getByTestId("id"));
+
+        expect(() => test.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage('Received element <TextInput testID="id"... /> is enabled.');
+      });
+    });
+
+    context("when the parent has property aria-disabled", () => {
+      it("returns disable for parent and child element when aria-disabled=true", () => {
+        const element = render(
+            <View aria-disabled={true} testID="parentId">
+              <View testID="childId">
+                <TextInput />
+              </View>
+            </View>,
+        );
+
+        const parent = new ElementAssertion(element.getByTestId("parentId"));
+        const child = new ElementAssertion(element.getByTestId("childId"));
+        expect(parent.toBeDisabled()).toBeTruthy();
+        expect(child.toBeDisabled()).toBeTruthy();
+      });
+      it("throws an error when aria-disabled=false", () => {
+        const element = render(
+            <View aria-disabled={false} testID="parentId">
+              <View testID="childId">
+                <TextInput />
+              </View>
+            </View>,
+        );
+
+        const parent = new ElementAssertion(element.getByTestId("parentId"));
+        const child = new ElementAssertion(element.getByTestId("childId"));
+
+        expect(parent.toBeEnabled()).toBeTruthy();
+        expect(() => parent.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage('Received element <View testID="parentId"... /> is enabled.');
+        expect(() => child.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage('Received element <View testID="childId"... /> is enabled.');
+      });
+    });
+
+    context("when the child has property aria-disabled", () => {
+      const element = render(
+          <View testID="parentId">
+            <View aria-disabled={true} testID="childId">
+              <TextInput />
+            </View>
+          </View>,
+      );
+
+      const parent = new ElementAssertion(element.getByTestId("parentId"));
+      const child = new ElementAssertion(element.getByTestId("childId"));
+
+      it("returns disable for child element when aria-disabled=true", () => {
+        expect(child.toBeDisabled()).toBeTruthy();
+        expect(() => child.toBeEnabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Received element <View testID=\"childId\"... /> is disabled.");
+      });
+      it("returns enable for parent with disabled child", () => {
+        expect(parent.toBeEnabled()).toBeTruthy();
+        expect(() => parent.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Received element <View testID=\"parentId\"... /> is enabled.");
+
+      });
+    });
+  });
+});

yarn.lock

@@ -92,6 +92,7 @@ __metadata:
     "@types/react": "npm:^18.2.70"
     "@types/react-test-renderer": "npm:^18.0.7"
     "@types/sinon": "npm:^17.0.3"
+    dot-prop-immutable: "npm:^2.1.1"
     fast-deep-equal: "npm:^3.1.3"
     mocha: "npm:^10.3.0"
     react: "npm:^18.2.0"
@@ -2958,7 +2959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^12.4.4":
+"@testing-library/react-native@npm:^12.4.4, @testing-library/react-native@npm:^12.8.1":
   version: 12.8.1
   resolution: "@testing-library/react-native@npm:12.8.1"
   dependencies:
@@ -3988,6 +3989,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "assertive-ts@workspace:."
   dependencies:
+    "@testing-library/react-native": "npm:^12.8.1"
     "@typescript-eslint/eslint-plugin": "npm:^7.3.0"
     "@typescript-eslint/parser": "npm:^7.3.0"
     eslint: "npm:^8.57.0"