feat: toBeVisible matcher (#1465)

* feat: add toBeVisible matcher

* test(toBeVisible): improve snapshot matching

* chore: detect Modal as host component

* chore: fix tests to host component names

* refactor: merge accessibility related code with existing utils

* chore: add comments

* refactor: tweak unit test

* chore: fix test

* refactor: tweaks

---------

Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: thiagobrez

src/__tests__/config.test.ts

@@ -35,12 +35,13 @@ test('resetToDefaults() resets config to defaults', () => {
 
 test('resetToDefaults() resets internal config to defaults', () => {
   configureInternal({
-    hostComponentNames: { text: 'A', textInput: 'A', switch: 'A' },
+    hostComponentNames: { text: 'A', textInput: 'A', switch: 'A', modal: 'A' },
   });
   expect(getConfig().hostComponentNames).toEqual({
     text: 'A',
     textInput: 'A',
     switch: 'A',
+    modal: 'A',
   });
 
   resetToDefaults();

src/__tests__/host-component-names.test.tsx

@@ -21,13 +21,15 @@ describe('getHostComponentNames', () => {
         text: 'banana',
         textInput: 'banana',
         switch: 'banana',
+        modal: 'banana',
       },
     });
 
     expect(getHostComponentNames()).toEqual({
       text: 'banana',
       textInput: 'banana',
       switch: 'banana',
+      modal: 'banana',
     });
   });
 
@@ -40,6 +42,7 @@ describe('getHostComponentNames', () => {
       text: 'Text',
       textInput: 'TextInput',
       switch: 'RCTSwitch',
+      modal: 'Modal',
     });
     expect(getConfig().hostComponentNames).toBe(hostComponentNames);
   });
@@ -68,6 +71,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
       text: 'Text',
       textInput: 'TextInput',
       switch: 'RCTSwitch',
+      modal: 'Modal',
     });
   });
 
@@ -77,6 +81,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
         text: 'banana',
         textInput: 'banana',
         switch: 'banana',
+        modal: 'banana',
       },
     });
 
@@ -86,6 +91,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
       text: 'banana',
       textInput: 'banana',
       switch: 'banana',
+      modal: 'banana',
     });
   });
 

src/config.ts

@@ -24,6 +24,7 @@ export type HostComponentNames = {
   text: string;
   textInput: string;
   switch: string;
+  modal: string;
 };
 
 export type InternalConfig = Config & {

src/helpers/__tests__/accessiblity.test.tsx

@@ -41,6 +41,32 @@ describe('isHiddenFromAccessibility', () => {
     expect(isHiddenFromAccessibility(null)).toBe(true);
   });
 
+  test('detects elements with aria-hidden prop', () => {
+    const view = render(<View testID="subject" aria-hidden />);
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects nested elements with aria-hidden prop', () => {
+    const view = render(
+      <View aria-hidden>
+        <View testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
   test('detects elements with accessibilityElementsHidden prop', () => {
     const view = render(<View testID="subject" accessibilityElementsHidden />);
     expect(

src/helpers/accessiblity.ts

@@ -62,6 +62,10 @@ function isSubtreeInaccessible(element: ReactTestInstance): boolean {
     return false;
   }
 
+  if (element.props['aria-hidden']) {
+    return true;
+  }
+
   // iOS: accessibilityElementsHidden
   // See: https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios
   if (element.props.accessibilityElementsHidden) {

src/helpers/host-component-names.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactTestInstance } from 'react-test-renderer';
-import { Switch, Text, TextInput, View } from 'react-native';
+import { Modal, Switch, Text, TextInput, View } from 'react-native';
 import { configureInternal, getConfig, HostComponentNames } from '../config';
 import { renderWithAct } from '../render-act';
 import { HostTestInstance } from './component-tree';
@@ -35,13 +35,15 @@ function detectHostComponentNames(): HostComponentNames {
         <Text testID="text">Hello</Text>
         <TextInput testID="textInput" />
         <Switch testID="switch" />
+        <Modal testID="modal" />
       </View>
     );
 
     return {
       text: getByTestId(renderer.root, 'text').type as string,
       textInput: getByTestId(renderer.root, 'textInput').type as string,
       switch: getByTestId(renderer.root, 'switch').type as string,
+      modal: getByTestId(renderer.root, 'modal').type as string,
     };
   } catch (error) {
     const errorMessage =
@@ -86,3 +88,13 @@ export function isHostTextInput(
 ): element is HostTestInstance {
   return element?.type === getHostComponentNames().textInput;
 }
+
+/**
+ * Checks if the given element is a host Modal.
+ * @param element The element to check.
+ */
+export function isHostModal(
+  element?: ReactTestInstance | null
+): element is HostTestInstance {
+  return element?.type === getHostComponentNames().modal;
+}