Refactor and add tests, modify isDisable function, add example annotation

Author: suany0805

packages/native/src/lib/ElementAssertion.ts

@@ -5,21 +5,6 @@ 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);
@@ -47,6 +32,17 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     );
   };
 
+   /**
+    * Check if the component is diabled.
+    *
+    * @example
+    * ```
+    * expect(component).toBeDisabled();
+    * ```
+    *
+    * @returns the assertion instance
+    */
+
   public toBeDisabled(): this {
     const error = new AssertionError({
       actual: this.actual,
@@ -71,19 +67,16 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
       return true;
     }
 
-    if (!DISABLE_TYPES.includes(elementType)) {
-      return false;
-    }
-
     return (
-        !!element?.props?.disabled ||
-        get<ReactTestInstance, boolean>(element, "props.accessibilityState.disabled", false) ||
+      !! 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.parent;
+    const { parent } = element;
     return parent !== null && (this.isElementDisabled(element) || this.isAncestorDisabled(parent));
   }
 }

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

@@ -1,58 +1,67 @@
-import { render } from "@testing-library/react-native";
+import { AssertionError, expect } from "@assertive-ts/core";
+import { render, screen } 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,
-          });
-        });
+      it("returns the assertion instance when the component TextInput is not editable", () => {
+        const element = render(
+          <TextInput testID="id" editable={false} />,
+        );
+        const test = new ElementAssertion(element.getByTestId("id"));
+
+        expect(test.toBeDisabled()).toBe(test);
+        expect(() => test.not.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected the value NOT to be disabled");
+      });
+
+      it("checks aria-disabled prop for parent and child element", () => {
+        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();
+        expect(() => parent.not.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected the value NOT to be disabled");
+        expect(() => child.not.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected the value NOT to be disabled");
+
       });
 
-      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}>
+      it("checks aria-disabled prop for child element", () => {
+        const element = render(
+            <View testID="parentId">
+              <View aria-disabled={true} testID="childId">
                 <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,
-          });
-        });
+              </View>
+            </View>,
+        );
+
+        const parent = new ElementAssertion(element.getByTestId("parentId"));
+        const child = new ElementAssertion(element.getByTestId("childId"));
+
+        expect(child.toBeDisabled()).toBeTruthy();
+        expect(parent.not.toBeDisabled()).toBeTruthy();
+        expect(() => child.not.toBeDisabled())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected the value NOT to be disabled");
+
       });
     });
   });