fix: add missing RN e2e util (#4881)

aws-amplify · Jan 4, 2024 · e023840 · e023840
1 parent cef5b5a
commit e023840
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 50 deletions.
diff --git a/examples/react-native/ios/Podfile.lock b/examples/react-native/ios/Podfile.lock
@@ -545,6 +545,6 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: b90b71f45b8b97be43bc4284e71a6af48ac9f547
   Yoga: e71803b4c1fff832ccf9b92541e00f9b873119b9
 
-PODFILE CHECKSUM: 5ae40a144d827c45a671b6fb037d2765de522eff
+PODFILE CHECKSUM: 86255707601fa0f502375c1c40775dbd535ed624
 
 COCOAPODS: 1.12.1
diff --git a/examples/react-native/ios/ReactNative.xcodeproj/project.pbxproj b/examples/react-native/ios/ReactNative.xcodeproj/project.pbxproj
@@ -599,11 +599,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -672,11 +668,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

diff --git a/examples/react-native/src/App/App.tsx b/examples/react-native/src/App/App.tsx
@@ -5,9 +5,9 @@ import { LaunchArguments } from 'react-native-launch-arguments';
 
 import { EXAMPLE_APP_NAME } from '@env';
 
-// .env file or launch argument passed from Detox
+// prefer launch argument passed from Detox, then local .env file
 const getExampleAppName = () =>
-  EXAMPLE_APP_NAME ?? LaunchArguments.value().EXAMPLE_APP_NAME;
+  LaunchArguments.value().EXAMPLE_APP_NAME ?? EXAMPLE_APP_NAME;
 
 /**
  * `Authenticator` Example and Demo Apps

diff --git a/examples/react-native/src/ui/components/authenticator/sign-in-with-email/Example.tsx b/examples/react-native/src/ui/components/authenticator/sign-in-with-email/Example.tsx
@@ -1,52 +1,61 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Authenticator } from '@aws-amplify/ui-react-native';
+import {
+  Authenticator,
+  AuthenticatorProps,
+} from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 
 import { SignOutButton } from '../SignOutButton';
 import awsconfig from './aws-exports';
 Amplify.configure(awsconfig);
 
-const components = {
-  Header() {
-    return <Text>Enter Information:</Text>;
-  },
-  Footer() {
-    return <Text>Footer Information</Text>;
+function Header() {
+  return <Text>Enter Information:</Text>;
+}
+function Footer() {
+  return <Text>Footer Information</Text>;
+}
+
+const components: AuthenticatorProps['components'] = {
+  SignIn: ({ fields, ...props }) => {
+    const [username, password] = fields;
+    return (
+      <Authenticator.SignIn
+        {...props}
+        fields={[
+          { ...username, placeholder: 'Enter your cool email' },
+          password,
+        ]}
+      />
+    );
   },
+  VerifyUser: (props) => (
+    <Authenticator.VerifyUser {...props} Header={Header} Footer={Footer} />
+  ),
+  ConfirmVerifyUser: (props) => (
+    <Authenticator.ConfirmVerifyUser
+      {...props}
+      fields={[
+        {
+          type: 'default',
+          name: 'confirmation_code',
+          label: 'New Label',
+          placeholder: 'Enter your Confirmation Code:',
+          required: false,
+        },
+      ]}
+      Header={Header}
+      Footer={Footer}
+    />
+  ),
 };
 
 function App() {
   return (
     <Authenticator.Provider>
-      <Authenticator
-        components={{
-          VerifyUser: (props) => (
-            <Authenticator.VerifyUser
-              {...props}
-              Header={components.Header}
-              Footer={components.Footer}
-            />
-          ),
-          ConfirmVerifyUser: (props) => (
-            <Authenticator.ConfirmVerifyUser
-              {...props}
-              fields={[
-                {
-                  type: 'default',
-                  name: 'confirmation_code',
-                  label: 'New Label',
-                  placeholder: 'Enter your Confirmation Code:',
-                  required: false,
-                },
-              ]}
-              Header={components.Header}
-              Footer={components.Footer}
-            />
-          ),
-        }}
-      >
+      <Authenticator components={components}>
         <View style={style.container}>
           <SignOutButton />
         </View>

diff --git a/packages/e2e/README.md b/packages/e2e/README.md
@@ -20,7 +20,7 @@ To run existing tests on `react-native` framework, first navigate to the React N
 
 Sign up and reset password flows are mocked by overriding the `Auth` endpoint when calling `Amplify.configure` to point to a local express mock server running on port 9091. The `precucumber` and `postcucumber` scripts in the `package.json` file take care of starting and terminating the mock server.
 
-**iOS**
+## iOS
 
 If not previously installed locally, install `applesimutils`:
 
@@ -36,15 +36,15 @@ brew install applesimutils
 1. Run `yarn e2e detox:build:ios:debug`
 1. Run `yarn e2e detox:e2e:ios:debug`
 
-**Android**
+## Android
 
 1. Navigate to the _root_ of your local clone of [aws-amplify/amplify-ui](https://github.com/aws-amplify/amplify-ui)
 1. Run `yarn setup`
 1. Run `yarn react-native-example android`
 1. Run `yarn e2e detox:build:android:debug`
 1. Run `yarn e2e detox:e2e:android:debug`
 
-Troubleshooting
+**Troubleshooting**
 
 If the emulator fails to connect to Metro server, run:
 

diff --git a/packages/e2e/detox/integration/common/shared.ts b/packages/e2e/detox/integration/common/shared.ts
@@ -92,6 +92,10 @@ Then(
   }
 );
 
+Then('I see placeholder {string}', async (placeholder: string) => {
+  await expect(element(by.text(placeholder))).toExist();
+});
+
 Then(
   'I see {string} as a {string} field',
   async (label: string, type: string) => {