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,7 +34,9 @@
     "test": "NODE_ENV=test mocha"
   },
   "dependencies": {
+    "dot-prop-immutable": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
+    "pretty-format": "^29.7.0",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/native/src/lib/ElementAssertion.ts

@@ -0,0 +1,89 @@
+import { Assertion, AssertionError } from "@assertive-ts/core";
+import { get } from "dot-prop-immutable";
+import prettyFormat, { plugins } from "pretty-format";
+import { ReactTestInstance } from "react-test-renderer";
+
+const { ReactTestComponent, ReactElement } = plugins;
+
+// Elements that support 'disabled'
+const DISABLE_TYPES = [
+  "Button",
+  "Slider",
+  "Switch",
+  "Text",
+  "TouchableHighlight",
+  "TouchableOpacity",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback",
+  "View",
+  "TextInput",
+  "Pressable",
+];
+
+export class ElementAssertion extends Assertion<ReactTestInstance> {
+  public constructor(actual: ReactTestInstance) {
+    super(actual);
+  }
+
+  public override toString = (): string => {
+    if (this.actual === null) {
+      return "null";
+    }
+
+    return prettyFormat(
+        {
+          // This prop is needed to persuade the prettyFormat that the element
+          // is a ReactTestRendererJSON instance, so it is formatted as JSX.
+          $$typeof: Symbol.for("react.test.json"),
+          props: this.actual.props,
+          type: this.actual.type,
+        },
+        {
+          highlight: true,
+          plugins: [ReactTestComponent, ReactElement],
+          printBasicPrototype: false,
+          printFunctionName: false,
+        },
+    );
+  };
+
+  public toBeDisabled(): this {
+    const error = new AssertionError({
+      actual: this.actual,
+      message: `Expected ${this.toString()} to be disabled`,
+    });
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      message: "Expected the value NOT to be disabled",
+    });
+
+    return this.execute({
+      assertWhen: this.isElementDisabled(this.actual) || this.isAncestorDisabled(this.actual),
+      error,
+      invertedError,
+    });
+  }
+
+  private isElementDisabled(element: ReactTestInstance): boolean {
+    const { type } = element;
+    const elementType = type.toString();
+    if (elementType === "TextInput" && element?.props?.editable === false) {
+      return true;
+    }
+
+    if (!DISABLE_TYPES.includes(elementType)) {
+      return false;
+    }
+
+    return (
+        !!element?.props?.disabled ||
+        get<ReactTestInstance, boolean>(element, "props.accessibilityState.disabled", false) ||
+        get<ReactTestInstance, [string]>(element, "props.accessibilityStates", []).includes("disabled")
+    );
+  }
+
+  private isAncestorDisabled(element: ReactTestInstance): boolean {
+    const parent = element.parent;
+    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,58 @@
+import { render } from "@testing-library/react-native";
+import {
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  TouchableNativeFeedback,
+  View,
+  TextInput,
+  Pressable,
+} from "react-native";
+
+import { ElementAssertion } from "../../src/lib/ElementAssertion";
+
+import assert, { AssertionError } from "assert";
+
+const ALLOWED_COMPONENTS = {
+  Pressable,
+  TextInput,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableWithoutFeedback,
+  View,
+};
+
+describe("[Unit] ElementAssertion.test.ts", () => {
+    describe(".toBeDisabled", () => {
+      context("when the component TextInput is disabled", () => {
+        it("returns the assertion instance", () => {
+          const element = render(
+            <TextInput testID="id" editable={false} />,
+          );
+          const test = new ElementAssertion(element.getByTestId("id"));
+
+          assert.deepStrictEqual(test.toBeDisabled(), test);
+          assert.throws(() => test.not.toBeDisabled(), {
+            message: "Expected the value NOT to be disabled",
+            name: AssertionError.name,
+          });
+        });
+      });
+
+      Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
+        it(`handle disabled prop for element ${name}`, () => {
+          const element = render(
+              // @ts-expect-error JSX element 'Component'
+              <Component disabled={true} testID={name}>
+                <TextInput />
+              </Component>,
+          );
+          const test = new ElementAssertion(element.getByTestId(name));
+          assert.deepStrictEqual(test.toBeDisabled(), test);
+          assert.throws(() => test.not.toBeDisabled(), {
+            message: "Expected the value NOT to be disabled",
+            name: AssertionError.name,
+          });
+        });
+      });
+    });
+  });

yarn.lock

@@ -92,8 +92,10 @@ __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"
+    pretty-format: "npm:^29.7.0"
     react: "npm:^18.2.0"
     react-native: "npm:^0.73.6"
     react-native-testing-mocks: "npm:^1.2.0"
@@ -2958,7 +2960,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 +3990,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"