OverlayFadingBackground - add testID (#938)

Author: M-i-k-e-l

src/components/dialog/OverlayFadingBackground.tsx

@@ -3,12 +3,14 @@ import View from '../view';
 import {Animated} from 'react-native';
 
 interface Props {
+  testID?: string;
   dialogVisibility?: boolean;
   modalVisibility?: boolean;
   overlayBackgroundColor?: string;
 }
 
 const OverlayFadingBackground = ({
+  testID,
   dialogVisibility,
   modalVisibility,
   overlayBackgroundColor
@@ -42,7 +44,7 @@ const OverlayFadingBackground = ({
     };
   }, [overlayBackgroundColor, fadeAnimation]);
 
-  return <View absF animated style={style} pointerEvents="none"/>;
+  return <View testID={testID} absF animated style={style} pointerEvents="none"/>;
 };
 
 OverlayFadingBackground.displayName = 'IGNORE';

src/components/dialog/index.tsx

@@ -218,7 +218,7 @@ class Dialog extends Component<DialogProps, DialogState> {
   // TODO: renderOverlay {_.invoke(this.props, 'renderOverlay')}
   renderDialogContainer = () => {
     const {modalVisibility, dialogVisibility} = this.state;
-    const {useSafeArea, bottom, overlayBackgroundColor} = this.props;
+    const {useSafeArea, bottom, overlayBackgroundColor, testID} = this.props;
     const addBottomSafeArea = Constants.isIphoneX && (useSafeArea && bottom);
     const bottomInsets = Constants.getSafeAreaInsets().bottom - 8; // TODO: should this be here or in the input style?
 
@@ -229,6 +229,7 @@ class Dialog extends Component<DialogProps, DialogState> {
         pointerEvents="box-none"
       >
         <OverlayFadingBackground
+          testID={`${testID}.overlayFadingBackground`}
           modalVisibility={modalVisibility}
           dialogVisibility={dialogVisibility}
           overlayBackgroundColor={overlayBackgroundColor}