@quiltt/react-native 3.6.2 → 3.6.4

package/dist/index.js

@@ -3,104 +3,17 @@ export * from '@quiltt/core';
 import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
 export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
-import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
+import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-const ErrorReporterConfig = {
-    honeybadger_api_key: 'undefined'
-};
-
 // Generated by genversion.
-const version = '3.6.2';
-
-// Quick hack to send error to Honeybadger to debug why the connector is not routable
-const notifier = {
-    name: 'Quiltt React Native SDK Reporter',
-    url: 'https://www.quiltt.dev/guides/connector/react-native',
-    version: version
-};
-class ErrorReporter {
-    constructor(platform){
-        this.noticeUrl = 'https://api.honeybadger.io/v1/notices';
-        this.apiKey = ErrorReporterConfig.honeybadger_api_key;
-        this.clientName = 'react-native-sdk';
-        this.clientVersion = version;
-        this.platform = platform;
-        this.logger = console;
-        this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`;
-    }
-    async send(error, context) {
-        const headers = {
-            'X-API-Key': this.apiKey,
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`
-        };
-        const payload = await this.buildPayload(error, context);
-        const method = 'POST';
-        const body = JSON.stringify(payload);
-        const mode = 'cors';
-        fetch(this.noticeUrl, {
-            headers,
-            method,
-            body,
-            mode
-        }).then((response)=>{
-            if (response.status !== 201) {
-                this.logger.warn(`Error report failed: unknown response from server. code=${response.status}`);
-                return;
-            }
-            return response.json();
-        }).then((data)=>{
-            if (data) {
-                this.logger.info(`Error report sent ⚡ https://app.honeybadger.io/notice/${data?.id}`);
-            }
-        });
-    }
-    async buildPayload(error, localContext = {}) {
-        const notice = error;
-        notice.stack = generateStackTrace();
-        notice.backtrace = makeBacktrace(notice.stack);
-        return {
-            notifier,
-            error: {
-                class: notice.name,
-                message: notice.message,
-                backtrace: notice.backtrace,
-                // fingerprint: this.calculateFingerprint(notice),
-                tags: notice.tags || [],
-                causes: getCauses(notice, this.logger)
-            },
-            request: {
-                url: notice.url,
-                component: notice.component,
-                action: notice.action,
-                context: localContext || {},
-                cgi_data: {},
-                params: {},
-                session: {}
-            },
-            server: {
-                project_root: notice.projectRoot,
-                environment_name: this.userAgent,
-                revision: version,
-                hostname: this.platform,
-                time: new Date().toUTCString()
-            },
-            details: notice.details || {}
-        };
-    }
-}
+const version = '3.6.4';
 
-const getErrorMessage = (responseStatus, error)=>{
-    if (error) return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`;
-    return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
-};
-
-const AndroidSafeAreaView = ({ children })=>/*#__PURE__*/ jsx(SafeAreaView, {
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
+        testID: testId,
         style: styles$1.AndroidSafeArea,
         children: children
     });
@@ -112,7 +25,8 @@ const styles$1 = StyleSheet.create({
     }
 });
 
-const ErrorScreen = ({ error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
         children: /*#__PURE__*/ jsxs(View, {
             style: [
                 styles.container,
@@ -195,7 +109,8 @@ const styles = StyleSheet.create({
     }
 });
 
-const LoadingScreen = ()=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
         children: /*#__PURE__*/ jsx(View, {
             style: {
                 flex: 1,
@@ -203,15 +118,152 @@ const LoadingScreen = ()=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
                 alignItems: 'center'
             },
             children: /*#__PURE__*/ jsx(ActivityIndicator, {
+                testID: "activity-indicator",
                 size: "large",
-                color: "#0000ff"
+                color: "#5928A3"
             })
         })
     });
 
+const ErrorReporterConfig = {
+    honeybadger_api_key: 'undefined'
+};
+
+// Quick hack to send error to Honeybadger to debug why the connector is not routable
+const notifier = {
+    name: 'Quiltt React Native SDK Reporter',
+    url: 'https://www.quiltt.dev/guides/connector/react-native',
+    version: version
+};
+class ErrorReporter {
+    constructor(platform){
+        this.noticeUrl = 'https://api.honeybadger.io/v1/notices';
+        this.apiKey = ErrorReporterConfig.honeybadger_api_key;
+        this.clientName = 'react-native-sdk';
+        this.clientVersion = version;
+        this.platform = platform;
+        this.logger = console;
+        this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`;
+    }
+    async send(error, context) {
+        const headers = {
+            'X-API-Key': this.apiKey,
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`
+        };
+        const payload = await this.buildPayload(error, context);
+        const method = 'POST';
+        const body = JSON.stringify(payload);
+        const mode = 'cors';
+        fetch(this.noticeUrl, {
+            headers,
+            method,
+            body,
+            mode
+        }).then((response)=>{
+            if (response.status !== 201) {
+                this.logger.warn(`Error report failed: unknown response from server. code=${response.status}`);
+                return;
+            }
+            return response.json();
+        }).then((data)=>{
+            if (data) {
+                this.logger.info(`Error report sent ⚡ https://app.honeybadger.io/notice/${data?.id}`);
+            }
+        });
+    }
+    async buildPayload(error, localContext = {}) {
+        const notice = error;
+        notice.stack = generateStackTrace();
+        notice.backtrace = makeBacktrace(notice.stack);
+        return {
+            notifier,
+            error: {
+                class: notice.name,
+                message: notice.message,
+                backtrace: notice.backtrace,
+                // fingerprint: this.calculateFingerprint(notice),
+                tags: notice.tags || [],
+                causes: getCauses(notice, this.logger)
+            },
+            request: {
+                url: notice.url,
+                component: notice.component,
+                action: notice.action,
+                context: localContext || {},
+                cgi_data: {},
+                params: {},
+                session: {}
+            },
+            server: {
+                project_root: notice.projectRoot,
+                environment_name: this.userAgent,
+                revision: version,
+                hostname: this.platform,
+                time: new Date().toUTCString()
+            },
+            details: notice.details || {}
+        };
+    }
+}
+
+const getErrorMessage = (responseStatus, error)=>{
+    if (error) return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`;
+    return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
+};
+
 const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
-const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
+const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
+    let responseStatus;
+    let error;
+    let errorOccurred = false;
+    try {
+        const response = await fetch(connectorUrl);
+        if (!response.ok) {
+            console.error(`The URL ${connectorUrl} is not routable.`);
+            responseStatus = response.status;
+            errorOccurred = true;
+        } else {
+            console.log(`The URL ${connectorUrl} is routable.`);
+            return {
+                checked: true
+            };
+        }
+    } catch (e) {
+        error = e;
+        console.error(`An error occurred while checking the connector URL: ${error}`);
+        errorOccurred = true;
+    }
+    if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
+        const delay = 50 * Math.pow(2, retryCount);
+        await new Promise((resolve)=>setTimeout(resolve, delay));
+        console.log(`Retrying... Attempt number ${retryCount + 1}`);
+        return checkConnectorUrl(connectorUrl, retryCount + 1);
+    }
+    const errorMessage = getErrorMessage(responseStatus, error);
+    const errorToSend = error || new Error(errorMessage);
+    const context = {
+        connectorUrl,
+        responseStatus
+    };
+    if (responseStatus !== 404) await errorReporter.send(errorToSend, context);
+    return {
+        checked: true,
+        error: errorMessage
+    };
+};
+
+const handleOAuthUrl = (oauthUrl)=>{
+    if (oauthUrl.protocol !== 'https:') {
+        console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
+        return;
+    }
+    Linking.openURL(oauthUrl.href);
+};
+
+const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = useRef(null);
     const { session } = useQuilttSession();
     const encodedOAuthRedirectUrl = useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
@@ -230,59 +282,15 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
     const [preFlightCheck, setPreFlightCheck] = useState({
         checked: false
     });
-    const checkConnectorUrl = useCallback(async (retryCount = 0)=>{
-        let responseStatus;
-        let error;
-        let errorOccurred = false;
-        try {
-            const response = await fetch(connectorUrl);
-            if (!response.ok) {
-                console.error(`The URL ${connectorUrl} is not routable.`);
-                responseStatus = response.status;
-                errorOccurred = true;
-            } else {
-                console.log(`The URL ${connectorUrl} is routable.`);
-                return {
-                    checked: true
-                };
-            }
-        } catch (e) {
-            error = e;
-            console.error(`An error occurred while checking the connector URL: ${error}`);
-            errorOccurred = true;
-        }
-        // Retry logic in case of error or response not OK
-        if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
-            const delay = 50 * Math.pow(2, retryCount) // Exponential back-off
-            ;
-            await new Promise((resolve)=>setTimeout(resolve, delay)) // delay with exponential back-off for each retry
-            ;
-            console.log(`Retrying... Attempt number ${retryCount + 1}`);
-            return checkConnectorUrl(retryCount + 1);
-        }
-        const errorMessage = getErrorMessage(responseStatus, error);
-        const errorToSend = error || new Error(errorMessage);
-        const context = {
-            connectorUrl,
-            responseStatus
-        };
-        if (responseStatus !== 404) errorReporter.send(errorToSend, context);
-        return {
-            checked: true,
-            error: errorMessage
-        };
-    }, [
-        connectorUrl
-    ]);
     useEffect(()=>{
         if (preFlightCheck.checked) return;
         const fetchDataAndSetState = async ()=>{
-            const connectorUrlStatus = await checkConnectorUrl();
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
             setPreFlightCheck(connectorUrlStatus);
         };
         fetchDataAndSetState();
     }, [
-        checkConnectorUrl,
+        connectorUrl,
         preFlightCheck
     ]);
     const initInjectedJavaScript = useCallback(()=>{
@@ -312,7 +320,7 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
     ]);
     // allowedListUrl & shouldRender ensure we are only rendering Quiltt, MX and Plaid content in Webview
     // For other urls, we assume those are bank urls, which needs to be handle in external browser.
-    // @todo Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
+    // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
     const allowedListUrl = useMemo(()=>[
             'quiltt.app',
             'quiltt.dev',
@@ -334,13 +342,6 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         const script = 'localStorage.clear();';
         webViewRef.current?.injectJavaScript(script);
     };
-    const handleOAuthUrl = useCallback((oauthUrl)=>{
-        if (oauthUrl.protocol !== 'https:') {
-            console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
-            return;
-        }
-        Linking.openURL(oauthUrl.href);
-    }, []);
     const handleQuilttEvent = useCallback((url)=>{
         url.searchParams.delete('source');
         url.searchParams.append('connectorId', connectorId);
@@ -381,7 +382,6 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         }
     }, [
         connectorId,
-        handleOAuthUrl,
         initInjectedJavaScript,
         onEvent,
         onExit,
@@ -402,22 +402,26 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         handleOAuthUrl(url);
         return false;
     }, [
-        handleOAuthUrl,
         handleQuilttEvent,
         isQuilttEvent,
         shouldRender
     ]);
-    if (!preFlightCheck.checked) return /*#__PURE__*/ jsx(LoadingScreen, {});
+    if (!preFlightCheck.checked) return /*#__PURE__*/ jsx(LoadingScreen, {
+        testId: "loading-screen"
+    });
     if (preFlightCheck.error) return /*#__PURE__*/ jsx(ErrorScreen, {
+        testId: "error-screen",
         error: preFlightCheck.error,
         cta: ()=>onExitError?.({
                 connectorId
             })
     });
     return /*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
         children: /*#__PURE__*/ jsx(WebView, {
+            testID: "webview",
             ref: webViewRef,
-            // Plaid keep sending window.location = 'about:srcdoc' and causes some noise in RN
+            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
             // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
             originWhitelist: [
                 '*'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "description": "React Native components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -11,13 +11,14 @@
   "license": "MIT",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+    "import": {
+      "default": "./dist/index.js"
+    },
+    "require": {
+      "default": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**",
@@ -26,14 +27,14 @@
   ],
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
-    "@quiltt/core": "3.6.2",
-    "@quiltt/react": "3.6.2"
+    "@quiltt/core": "3.6.4",
+    "@quiltt/react": "3.6.4"
   },
   "devDependencies": {
     "@apollo/client": "3.9.9",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@types/base-64": "0.1.0",
-    "@types/node": "20.12.2",
+    "@types/node": "20.12.7",
     "@types/react": "18.2.73",
     "@types/react-native": "0.72.5",
     "@typescript-eslint/eslint-plugin": "5.60.1",

package/src/components/AndroidSafeAreaView.tsx

@@ -2,8 +2,14 @@ import { PropsWithChildren } from 'react'
 
 import { SafeAreaView, StyleSheet, Platform, StatusBar } from 'react-native'
 
-export const AndroidSafeAreaView = ({ children }: PropsWithChildren) => (
-  <SafeAreaView style={styles.AndroidSafeArea}>{children}</SafeAreaView>
+type AndroidSafeAreaViewProps = PropsWithChildren & {
+  testId?: string
+}
+
+export const AndroidSafeAreaView = ({ testId, children }: AndroidSafeAreaViewProps) => (
+  <SafeAreaView testID={testId} style={styles.AndroidSafeArea}>
+    {children}
+  </SafeAreaView>
 )
 
 const styles = StyleSheet.create({

package/src/components/ErrorScreen.tsx

@@ -2,13 +2,14 @@ import { View, Text, Pressable, StyleSheet } from 'react-native'
 
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 
-type ErrorScreenProp = {
+type ErrorScreenProps = {
+  testId?: string
   error: string
   cta: () => void
 }
 
-export const ErrorScreen = ({ error, cta }: ErrorScreenProp) => (
-  <AndroidSafeAreaView>
+export const ErrorScreen = ({ testId, error, cta }: ErrorScreenProps) => (
+  <AndroidSafeAreaView testId={testId}>
     <View style={[styles.container, styles.padding]}>
       <View style={{ flex: 1, justifyContent: 'center' }}>
         <View

package/src/components/LoadingScreen.tsx

@@ -2,10 +2,14 @@ import { ActivityIndicator, View } from 'react-native'
 
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 
-export const LoadingScreen = () => (
-  <AndroidSafeAreaView>
+type LoadingScreenProps = {
+  testId?: string
+}
+
+export const LoadingScreen = ({ testId }: LoadingScreenProps) => (
+  <AndroidSafeAreaView testId={testId}>
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator testID="activity-indicator" size="large" color="#5928A3" />
     </View>
   </AndroidSafeAreaView>
 )

package/src/components/QuilttConnector.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { Linking, Platform } from 'react-native'
 // React Native's URL implementation is incomplete
 // https://github.com/facebook/react-native/issues/16434
 import { URL } from 'react-native-url-polyfill'
@@ -14,29 +13,23 @@ import {
   useQuilttSession,
 } from '@quiltt/react'
 
-import { ErrorReporter, getErrorMessage } from '../utils'
-import { version } from '../version'
+import { version } from '@/version'
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
-
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
+import { checkConnectorUrl, handleOAuthUrl } from '@/utils'
+import type { PreFlightCheck } from '@/utils'
 
 type QuilttConnectorProps = {
+  testId?: string
   connectorId: string
   connectionId?: string
   institution?: string
   oauthRedirectUrl: string
 } & ConnectorSDKCallbacks
 
-type PreFlightCheck = {
-  checked: boolean
-  error?: string
-}
-
-const PREFLIGHT_RETRY_COUNT = 3
-
 const QuilttConnector = ({
+  testId,
   connectorId,
   connectionId,
   institution,
@@ -63,52 +56,14 @@ const QuilttConnector = ({
   }, [connectorId, encodedOAuthRedirectUrl])
   const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
 
-  const checkConnectorUrl = useCallback(
-    async (retryCount = 0): Promise<PreFlightCheck> => {
-      let responseStatus
-      let error
-      let errorOccurred = false
-      try {
-        const response = await fetch(connectorUrl)
-        if (!response.ok) {
-          console.error(`The URL ${connectorUrl} is not routable.`)
-          responseStatus = response.status
-          errorOccurred = true
-        } else {
-          console.log(`The URL ${connectorUrl} is routable.`)
-          return { checked: true }
-        }
-      } catch (e) {
-        error = e
-        console.error(`An error occurred while checking the connector URL: ${error}`)
-        errorOccurred = true
-      }
-
-      // Retry logic in case of error or response not OK
-      if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
-        const delay = 50 * Math.pow(2, retryCount) // Exponential back-off
-        await new Promise((resolve) => setTimeout(resolve, delay)) // delay with exponential back-off for each retry
-        console.log(`Retrying... Attempt number ${retryCount + 1}`)
-        return checkConnectorUrl(retryCount + 1)
-      }
-
-      const errorMessage = getErrorMessage(responseStatus, error as Error)
-      const errorToSend = (error as Error) || new Error(errorMessage)
-      const context = { connectorUrl, responseStatus }
-      if (responseStatus !== 404) errorReporter.send(errorToSend, context)
-      return { checked: true, error: errorMessage }
-    },
-    [connectorUrl]
-  )
-
   useEffect(() => {
     if (preFlightCheck.checked) return
     const fetchDataAndSetState = async () => {
-      const connectorUrlStatus = await checkConnectorUrl()
+      const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
       setPreFlightCheck(connectorUrlStatus)
     }
     fetchDataAndSetState()
-  }, [checkConnectorUrl, preFlightCheck])
+  }, [connectorUrl, preFlightCheck])
 
   const initInjectedJavaScript = useCallback(() => {
     const script = `\
@@ -133,7 +88,7 @@ const QuilttConnector = ({
 
   // allowedListUrl & shouldRender ensure we are only rendering Quiltt, MX and Plaid content in Webview
   // For other urls, we assume those are bank urls, which needs to be handle in external browser.
-  // @todo Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
+  // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
   const allowedListUrl = useMemo(
     () => [
       'quiltt.app',
@@ -162,14 +117,6 @@ const QuilttConnector = ({
     webViewRef.current?.injectJavaScript(script)
   }
 
-  const handleOAuthUrl = useCallback((oauthUrl: URL) => {
-    if (oauthUrl.protocol !== 'https:') {
-      console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`)
-      return
-    }
-    Linking.openURL(oauthUrl.href)
-  }, [])
-
   const handleQuilttEvent = useCallback(
     (url: URL) => {
       url.searchParams.delete('source')
@@ -202,7 +149,7 @@ const QuilttConnector = ({
           onExitSuccess?.(metadata)
           break
         case 'Authenticate':
-          // @todo handle Authenticate
+          // TODO: handle Authenticate
           break
         case 'OauthRequested':
           handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
@@ -214,7 +161,6 @@ const QuilttConnector = ({
     },
     [
       connectorId,
-      handleOAuthUrl,
       initInjectedJavaScript,
       onEvent,
       onExit,
@@ -239,18 +185,25 @@ const QuilttConnector = ({
       handleOAuthUrl(url)
       return false
     },
-    [handleOAuthUrl, handleQuilttEvent, isQuilttEvent, shouldRender]
+    [handleQuilttEvent, isQuilttEvent, shouldRender]
   )
 
-  if (!preFlightCheck.checked) return <LoadingScreen />
+  if (!preFlightCheck.checked) return <LoadingScreen testId="loading-screen" />
   if (preFlightCheck.error)
-    return <ErrorScreen error={preFlightCheck.error} cta={() => onExitError?.({ connectorId })} />
+    return (
+      <ErrorScreen
+        testId="error-screen"
+        error={preFlightCheck.error}
+        cta={() => onExitError?.({ connectorId })}
+      />
+    )
 
   return (
-    <AndroidSafeAreaView>
+    <AndroidSafeAreaView testId={testId}>
       <WebView
+        testID="webview"
         ref={webViewRef}
-        // Plaid keep sending window.location = 'about:srcdoc' and causes some noise in RN
+        // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
         // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
         originWhitelist={['*']}
         source={{ uri: connectorUrl }}