signup flow - trouble with modal scroll

Author: cfiguer055

SmartClothingApp/App.js

@@ -20,10 +20,10 @@ import {
 import SplashScreen from "react-native-splash-screen";
 
 
+// For Testing purposes only
+import { LogBox } from "react-native";
 // Ignore all log notifications if it's in the test environment
-if (__DEV__ && process.env.NODE_ENV === 'test') {
-  LogBox.ignoreAllLogs();
-}
+LogBox.ignoreAllLogs();
 
 
 const store = configureStore();

SmartClothingApp/e2e/SignUpFlow.test.js

@@ -0,0 +1,102 @@
+
+
+
+function delay(time) {
+  return new Promise(resolve => setTimeout(resolve, time));
+}
+
+
+describe('Sign-up flow', () => {
+  beforeAll(async () => {
+    await device.launchApp({
+      newInstance: true,
+      launchArgs: { isDetoxTest: true }
+    });
+  });
+
+  it('should allow a user to sign up and delete the account after', async () => {
+    
+    await new Promise(resolve => setTimeout(resolve, 10000));
+
+    // Wait for the sign-up link to be visible
+    await waitFor(element(by.id('signup-link'))).toBeVisible().withTimeout(10000);
+
+    // Introduce a delay (e.g., 2000 milliseconds)
+    await new Promise(resolve => setTimeout(resolve, 10000));
+    await element(by.id('signup-link')).tap();
+
+    await waitFor(element(by.id('signup-fname-input'))).toBeVisible().withTimeout(5000);
+    await element(by.id('signup-fname-input')).typeText('TestFirstName');
+
+    await waitFor(element(by.id('signup-lname-input')))
+      .toBeVisible()
+      .whileElement(by.id('scrollViewId'))
+      .scroll(400, 'down');
+    await element(by.id('signup-lname-input')).typeText('TestLastName');
+
+    await waitFor(element(by.id('signup-email-input'))).toBeVisible().withTimeout(5000);
+    // const testEmail = `test${new Date().getTime()}@example.com`; // Dynamic email to avoid conflicts
+    await element(by.id('signup-email-input')).typeText('[email protected]');
+    //await element(by.id('signup-email-input')).typeText(`test${Date.now()}@example.com`);
+
+    await waitFor(element(by.id('signup-password-input'))).toBeVisible().withTimeout(5000);
+    await element(by.id('signup-password-input')).typeText('password123');
+
+    await waitFor(element(by.id('signup-repassword-input'))).toBeVisible().withTimeout(5000);
+    await element(by.id('signup-repassword-input')).typeText('password123');
+
+    if (device.getPlatform() === 'android') {
+      await device.pressBack(); // to close the keyboard
+    }
+
+    // Accepting terms and conditions
+    await element(by.id('signup-terms-checkbox')).tap();
+    //await element(by.id('signup-terms-checkbox')).tap();
+
+    // Use the delay function before scrolling
+    await delay(30000); // Waits for 50 seconds
+
+    await waitFor(element(by.id('signup-terms-modal')))
+      .toBeVisible()
+      .whileElement(by.id('scrollViewModal'))
+      .scrollTo('bottom');
+      //.scroll(400, 'down');
+    //await element(by.id('signup-terms-modal-checkbox')).tap();
+    await element(by.id('signup-terms-checkbox')).tap();
+
+    //  await waitFor(element(by.id('signup-terms-modal'))).toBeVisible().withTimeout(5000);
+
+    await element(by.id('close-modal-button')).tap();
+
+
+
+    // Attempt to scroll a significant distance down
+    //await element(by.id('scrollViewModal')).scroll(200, 'down');
+
+    // await waitFor(element(by.id('signup-terms-modal-checkbox')))
+    //   .toBeVisible()
+    //   .whileElement(by.id('scrollViewModal'))
+    //   .scroll(400, 'down');
+
+    //await element(by.id('signup-terms-modal-checkbox')).tap();
+
+    await waitFor(element(by.id('signup-submit-button'))).toBeVisible().withTimeout(5000);
+    await element(by.id('signup-submit-button')).tap();
+
+    // Assuming you navigate to a "success" screen after sign up
+    await waitFor(element(by.id('signup-success-message'))).toBeVisible().withTimeout(10000);
+
+    // Here, you should add validation that the sign-up was successful
+    // For example, checking for a welcome message or successful navigation
+
+    // **Teardown - Deleting the test account**
+    // This step assumes you have a mechanism to trigger account deletion via an API or direct backend call
+    // The implementation of this would be specific to your backend and not provided here
+  }, 300000);
+
+  afterAll(async () => {
+    // Cleanup: delete the account if your test created one.
+    // This is pseudocode and would need to be adapted to your application's context.
+    // await deleteTestAccount(testEmail, 'password123');
+  });
+});

SmartClothingApp/src/components/ToSModal/ToSModal.jsx

@@ -20,10 +20,11 @@ const ToSModal = (props) => {
       transparent={true}
       visible={props.visible}
       onRequestClose={props.toggleModalVisibility}
+      testID="signup-terms-modal"
     >
       <View style={styles.centeredView}>
         <View style={styles.modalView}>
-          <ScrollView>
+          <ScrollView testID="scrollViewModal">
             <Text style={styles.modalTextTitle}>
               Smart Textile Clothing Devices App - Terms of Use
             </Text>
@@ -189,6 +190,7 @@ const ToSModal = (props) => {
                   onPress={() => {
                     props.setIsTermsAccepted(!props.isTermsAccepted);
                   }}
+                  testID="signup-terms-modal-checkbox"
                 />
                 <Text style={styles.modalText}>{"I Agree"}</Text>
               </View>

SmartClothingApp/src/screens/SigninScreen/index.jsx

@@ -177,7 +177,7 @@ const SigninScreen = ({ navigation }) => {
         </Button>
       </View>
       {/* <GoogleButton /> */}
-      <Button mode="text" onPress={() => navigation.navigate("SignUp")}>
+      <Button mode="text" onPress={() => navigation.navigate("SignUp")} testID="signup-link">
         Don't have an account? Sign Up
       </Button>
     </ScrollView>

SmartClothingApp/src/screens/SignupScreen/index.jsx

@@ -150,7 +150,7 @@ const SignupScreen = ({ navigation }) => {
   };
 
   return (
-    <ScrollView>
+    <ScrollView testID="scrollViewId">
       <HeroSection />
       <View style={styles.content}>
         <ToSModal
@@ -160,6 +160,7 @@ const SignupScreen = ({ navigation }) => {
           closeModal={() => closeModal("modal1")}
           onRequestClose={toggleModalVisibility}
           toggleModalVisibility={toggleModalVisibility}
+          testID="signup-terms-modal"
         ></ToSModal>
         <Text
           variant="headlineMedium"
@@ -183,6 +184,7 @@ const SignupScreen = ({ navigation }) => {
               handleClearErrors();
             }}
             error={error.fname.length > 0}
+            testID="signup-fname-input"
           />
           <HelperText type="error" visible={error.fname.length > 0}>
             {error.fname}
@@ -198,6 +200,7 @@ const SignupScreen = ({ navigation }) => {
               handleClearErrors();
             }}
             error={error.lname.length > 0}
+            testID="signup-lname-input"
           />
           <HelperText type="error" visible={error.lname.length > 0}>
             {error.lname}
@@ -213,6 +216,7 @@ const SignupScreen = ({ navigation }) => {
               handleClearErrors();
             }}
             error={error.email.length > 0}
+            testID="signup-email-input"
           />
           <HelperText type="error" visible={error.email.length > 0}>
             {error.email}
@@ -232,6 +236,7 @@ const SignupScreen = ({ navigation }) => {
               error.password.length > 0 || user.password != user.repassword
             }
             style={styles.textInput}
+            testID="signup-password-input"
           />
           <Icon
             name={lockStatusPassword === "locked" ? "lock" : "unlock-alt"}
@@ -256,6 +261,7 @@ const SignupScreen = ({ navigation }) => {
             }}
             error={user.password != user.repassword}
             style={styles.textInput}
+            testID="signup-repassword-input"
           />
           <Icon
             name={lockStatusRepassword === "locked" ? "lock" : "unlock-alt"}
@@ -275,6 +281,7 @@ const SignupScreen = ({ navigation }) => {
             onPress={() => {
               handleAgreement();
             }}
+            testID="signup-terms-checkbox"
           />
         <Text style={error.accepted?.length > 0 ? styles.errorText : null}>
           {error.accepted?.length > 0 ? error.accepted : "User Agreement"}
@@ -307,7 +314,7 @@ const SignupScreen = ({ navigation }) => {
         </View>
         {/* <GoogleButton /> */}
         <View style={{ marginVertical: verticalScale(10) }}>
-          <Button mode="text" onPress={() => navigation.navigate("SignIn")}>
+          <Button mode="text" onPress={() => navigation.navigate("SignIn")} testID="signup-submit-button">
             Already have an account? Sign in.
           </Button>
         </View>