feat(native): Add toBeVisible (#145)

Co-authored-by: Carolina López <lopenchii@gmail.com>
Co-authored-by: Jose Luis Leon <joseluis5000l@gmail.com>
Co-authored-by: Carolina Lopez <calopez@twilio.com>

Author: 3 people

packages/native/src/lib/ElementAssertion.ts

@@ -42,7 +42,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
    * ```
@@ -94,6 +94,33 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
   }
 
+  /**
+   * 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,
+    });
+  }
+
   private isElementDisabled(element: ReactTestInstance): boolean {
     const { type } = element;
     const elementType = type.toString();
@@ -113,4 +140,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;
+
+    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));
+  }
 }

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

@@ -1,13 +1,36 @@
 import { AssertionError, expect } from "@assertive-ts/core";
-import { render } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
+import { useState, useCallback, ReactElement } from "react";
 import {
   View,
   TextInput,
   Text,
+  Modal,
+  Button,
 } from "react-native";
 
 import { ElementAssertion } from "../../src/lib/ElementAssertion";
 
+function SimpleToggleText(): ReactElement {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleToggle = useCallback((): void => {
+    setIsVisible(prev => !prev);
+  }, []);
+
+  return (
+    <View>
+      <Text style={{ display: isVisible ? "flex" : "none" }}>
+        {"Toggle me!"}
+      </Text>
+      <Button
+        title="Toggle Text"
+        onPress={handleToggle}
+      />
+    </View>
+  );
+}
+
 describe("[Unit] ElementAssertion.test.ts", () => {
   describe(".toBeDisabled", () => {
     context("when the element is TextInput", () => {
@@ -160,4 +183,132 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       });
     });
   });
+
+  describe (".toBeVisible", () => {
+    context("when the modal is visible", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+          <Modal testID="id" visible={true} />,
+        );
+        const test = new ElementAssertion(getByTestId("id"));
+
+        expect(test.toBeVisible()).toBe(test);
+        expect(() => test.not.toBeVisible())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected element <Modal ... /> NOT to be visible.");
+      });
+    });
+
+    context("when the element contains 'display' property", () => {
+      context("and display = none", () => {
+        it("throws an error", () => {
+          const { getByText, getByRole } = render(
+            <SimpleToggleText />,
+          );
+          const textElement = new ElementAssertion(getByText("Toggle me!"));
+
+          expect(textElement.toBeVisible()).toBeEqual(textElement);
+
+          const toggleButton = getByRole("button", { name: "Toggle Text" });
+          fireEvent.press(toggleButton);
+
+          expect(textElement.not.toBeVisible()).toBeEqual(textElement);
+        });
+      });
+
+      context("and display = flex", () => {
+        it("returns the assertion instance", () => {
+          const { getByTestId } = render(
+            <View testID="id" style={{ display: "flex" }} />,
+          );
+          const test = new ElementAssertion(getByTestId("id"));
+
+          expect(test.toBeVisible()).toBe(test);
+          expect(() => test.not.toBeVisible())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected element <View ... /> NOT to be visible.");
+        });
+      });
+    });
+
+    context("when the element contains 'accessibilityElementsHidden' property", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+          <View testID="id" accessibilityElementsHidden={false} />,
+        );
+        const test = new ElementAssertion(getByTestId("id"));
+
+        expect(test.toBeVisible()).toBe(test);
+        expect(() => test.not.toBeVisible())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected element <View ... /> NOT to be visible.");
+      });
+    });
+
+    context("when the element contains 'importantForAccessibility' property", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+          <View testID="id" importantForAccessibility={"yes"} />,
+        );
+        const test = new ElementAssertion(getByTestId("id"));
+
+        expect(test.toBeVisible()).toBe(test);
+        expect(() => test.not.toBeVisible())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected element <View ... /> NOT to be visible.");
+      });
+    });
+
+    context("when the parent element contains 'opacity' property", () => {
+      context("and parent opacity = 0", () => {
+        const { getByTestId } = render(
+          <View testID="parentId" style={{ opacity: 0 }} >
+            <View testID="childId" style={{ opacity: 1 }} />
+          </View>,
+        );
+
+        const parent = new ElementAssertion(getByTestId("parentId"));
+        const child = new ElementAssertion(getByTestId("childId"));
+
+        it("returns assertion instance for NOT visible elements", () => {
+          expect(parent.not.toBeVisible()).toBeEqual(parent);
+          expect(child.not.toBeVisible()).toBeEqual(child);
+        });
+
+        it("throws an error for visible elements", () => {
+          expect(() => parent.toBeVisible())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected element <View ... /> to be visible.");
+          expect(() => child.toBeVisible())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected element <View ... /> to be visible.");
+        });
+      });
+
+      context("and child opacity = 0", () => {
+        const { getByTestId } = render(
+          <View testID="parentId" style={{ opacity: 1 }} >
+            <View testID="childId" style={{ opacity: 0 }} />
+          </View>,
+        );
+
+        const parent = new ElementAssertion(getByTestId("parentId"));
+        const child = new ElementAssertion(getByTestId("childId"));
+
+        it("returns assertion instance for visible parent and NOT visible child", () => {
+          expect(parent.toBeVisible()).toBeEqual(parent);
+          expect(child.not.toBeVisible()).toBeEqual(child);
+        });
+
+        it("throws an error for NOT visible parent and visible child", () => {
+          expect(() => parent.not.toBeVisible())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected element <View ... /> NOT to be visible.");
+          expect(() => child.toBeVisible())
+            .toThrowError(AssertionError)
+            .toHaveMessage("Expected element <View ... /> to be visible.");
+        });
+      });
+    });
+  });
 });