userActions integration update profile PASS

Author: cfiguer055

SmartClothingApp/__test__/__integration-test__/__main-tab-test__/__main-navigation-test/HomeToProfile.test.js

@@ -162,41 +162,41 @@ describe('Home to Profile Navigation', () => {
   it('Navigates from main Profile Screen to Edit Personal Info Screen', async () => {
     store = configureStore();
 
-        const { getByText, getAllByText } = render(
-            <StoreProvider store={store}>
-            <PaperProvider> 
-                <TestComponent2 />
-            </PaperProvider>
-            </StoreProvider>
-        );
-
-        const editPersonalTextElement = getByText('Edit Profile');
-        const editPersonalView = editPersonalTextElement.parent || editPersonalTextElement;
-
-        await act(() => {
-            fireEvent.press(editPersonalView);
-        });
-
-        const editFirstNameElements = getAllByText('First Name');
-        const editLastNameElements = getAllByText('Last Name');
-
-        await waitFor(() => {
-            expect(editFirstNameElements[0]).toBeTruthy();
-        });
-        await waitFor(() => {
-            expect(editLastNameElements[0]).toBeTruthy();
-        });
+      const { getByText, getAllByText } = render(
+        <StoreProvider store={store}>
+          <PaperProvider> 
+              <TestComponent2 />
+          </PaperProvider>
+        </StoreProvider>
+      );
+
+      const editPersonalTextElement = getByText('Edit Profile');
+      const editPersonalView = editPersonalTextElement.parent || editPersonalTextElement;
+
+      await act(() => {
+        fireEvent.press(editPersonalView);
+      });
+
+      const editFirstNameElements = getAllByText('First Name');
+      const editLastNameElements = getAllByText('Last Name');
+
+      await waitFor(() => {
+        expect(editFirstNameElements[0]).toBeTruthy();
+      });
+      await waitFor(() => {
+        expect(editLastNameElements[0]).toBeTruthy();
+      });
   });
 
   it('Navigates from main Profile Screen to Metrics Data Screen', async () => {
     store = configureStore();
 
     const { getByText, getAllByText } = render(
-        <StoreProvider store={store}>
+      <StoreProvider store={store}>
         <PaperProvider> 
             <TestComponent2 />
         </PaperProvider>
-        </StoreProvider>
+      </StoreProvider>
     );
 
     const editMetricsTextElement = getByText('Edit Profile');

SmartClothingApp/__test__/__integration-test__/userActions.integration.test.js

@@ -15,6 +15,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import App from '../../App'; // Assuming App is the root component
 import AppHeader from '../../src/components/AppHeader';
+import ProfileScreen from '../../src/screens/Profile';
 
 import AppTheme from '../../src/constants/themes'; 
 
@@ -32,6 +33,7 @@ const mockStore = configureMockStore(middlewares);
 jest.mock('../../src/utils/localStorage.js', () => ({
     AsyncStorage: jest.fn(),
     storeUID: jest.fn(),
+    getUID: jest.fn(),
   }));
 
 jest.mock('../../firebaseConfig', () => ({
@@ -43,6 +45,15 @@ jest.mock('../../firebaseConfig', () => ({
   },
 }));
 
+jest.mock('../../firebaseConfig', () => ({
+    auth: {
+        signOut: jest.fn(() => Promise.resolve()),
+        currentUser: {
+            displayName: 'John Doe',
+        },
+    }
+  }));
+
 jest.mock('firebase/auth', () => ({
   createUserWithEmailAndPassword: jest.fn(),
   updateEmail: jest.fn(),
@@ -65,20 +76,7 @@ jest.mock('firebase/firestore', () => ({
     setDoc: jest.fn(),
     doc: jest.fn(() => ({ setDoc: jest.fn() })),
     updateDoc: jest.fn(),
-    getDoc: jest.fn().mockReturnValue({
-      exists: jest.fn().mockReturnValue(true), // Mock 'exists' as a function
-      data: jest.fn().mockReturnValue({
-        height: "6541",
-        weight: "55",
-        age: "666",
-        gender: "male",
-        sports: "running",
-        dob: {
-          seconds: 1627852800, // Example timestamp for July 2, 2021
-          nanoseconds: 0, // Firestore Timestamps include nanoseconds, but it's often okay to mock them as 0 in tests
-        },
-      }), // Mock 'data' as a function
-    }),
+    getDoc: jest.fn(),
   }));
 
 
@@ -104,14 +102,6 @@ jest.mock('victory-native', () => {
     useChartPressState: MockUseChartPressState,
   };
 });
-// jest.mock('../../src/actions/appActions', () => ({
-//   userMetricsDataModalVisible: jest.fn().mockReturnValue({
-//     type: 'USER_METRICS_DATA_MODAL_VISIBLE',
-//     payload: {
-//       visibility: false,
-//       isFromSignUpScreen: false,
-//   }}),
-// }));
 
 // Mocks ViewSleepData 
 jest.mock('d3', () => ({
@@ -138,36 +128,51 @@ jest.mock('@react-navigation/native', () => {
         goBack: jest.fn(),
       }),
       useRoute: () => ({
-        name: 'Previous Screen',
+        //name: 'Previous Screen',
+        params: {
+            previousScreenTitle: 'Home',
+          },
       }),
     };
   });
 
 
 
 
-const initialState = {
-  auth: {
-    uid: '123',
-    displayName: 'John Doe',
-  },
-  user: {
-    profile: {},
-    metrics: {},
-  },
-};
+
+
 
 describe('User Actions Integration Test', () => {
   let store;
 
   beforeEach(() => {
-    store = mockStore(initialState);
+    jest.spyOn(console, 'error').mockImplementation((message) => {
+        if (message.includes('Warning: An update to')) {
+          return;
+        }
+        console.error(message);
+      });
+  
+    jest.useFakeTimers();
+
   });
 
   it('should log out the user', async () => {
+    const initialState = {
+        auth: {
+          uid: '123',
+          displayName: 'John Doe',
+        },
+        user: {
+          profile: {},
+          metrics: {},
+        },
+      };
+    
+    store = mockStore(initialState);
     store.dispatch = jest.fn(store.dispatch);
 
-    const { getByTestId, queryByText, getAllByTestId, getByText, getAllByRole, debug  } = render(
+    const { getByTestId, queryByText, debug  } = render(
         <Provider store={store}>
           <PaperProvider >
             <NavigationContainer>
@@ -179,7 +184,7 @@ describe('User Actions Integration Test', () => {
         </Provider>
     );
 
-    debug(); // Log the rendered output to inspect the component tree
+    // debug(); // Log the rendered output to inspect the component tree
 
     const menuButton = getByTestId("menu-action");
 
@@ -215,6 +220,84 @@ describe('User Actions Integration Test', () => {
     });
   });
 
+
+  it('should update the user profile', async () => {
+    store.dispatch = jest.fn(store.dispatch);
+
+    const initialState = {
+        uuid: null,
+        firstName: null,
+        lastName: null,
+        email: null,
+        authError: null,
+        user: {
+            userMetricsData: {
+                gender: "No Data",
+                dob: new Date(),
+                height: "No Data",
+                weight: "No Data",
+                sports: "No Data",
+            },
+        }
+      };
+    
+    store = mockStore(initialState);
+    store.dispatch = jest.fn(store.dispatch);
+
+    const { getByTestId, queryByText, debug } = render(
+        <Provider store={store}>
+          <PaperProvider >
+            <NavigationContainer>
+                <View>
+                    <ProfileScreen  route={{ params: { previousScreenTitle: 'Home' } }}/>
+                </View>
+            </NavigationContainer>
+          </PaperProvider>
+        </Provider>
+    );
+
+    debug(); 
+
+    const editPersonalButton = getByTestId("edit-personal-button");
+    await act(() => {
+        fireEvent.press(editPersonalButton );
+    });
+
+    await waitFor(() => {
+        expect(getByTestId("personal-modal-content")).not.toBeNull();
+      });
+
+    const firstNameInput = getByTestId("first-name-input");
+    await act(() => {
+      fireEvent.changeText(firstNameInput, 'John');
+    });
+
+    const lastNameInput = getByTestId("last-name-input");
+    await act(() => {
+      fireEvent.changeText(lastNameInput, 'Doe');
+    });
+
+    let savePersonalButton
+    await waitFor(() => {
+        savePersonalButton = getByTestId("save-personal-button");
+    });
+    await act(() => {
+        fireEvent.press(savePersonalButton );
+    });
+
+    //const lastNadfameInput = getByTestId("last-ndfasdfasdame-input");
+
+    await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(expect.any(Function));
+        const actions = store.getActions();
+        expect(actions).toContainEqual({
+          type: 'UPDATE_PROFILE',
+          payload: ['John', 'Doe'],
+        });
+      });
+  });
+
+
 //   it('should update the user profile', async () => {
 //     store.dispatch = jest.fn(store.dispatch);
 

SmartClothingApp/src/components/PersonalModal/PersonalModal.jsx

@@ -67,7 +67,10 @@ const PersonalModal = (props) => {
     <View style={styles.container}>
       <Modal animationType="slide" transparent={true} visible={props.visible}>
         <View style={styles.modalBackground}>
-          <View style={styles.modalContent}>
+          <View 
+          style={styles.modalContent}
+          testID="personal-modal-content"
+          >
             <Text
               style={{ fontSize: 18, fontWeight: "bold", marginBottom: 20 }}
               numberOfLines={1}
@@ -85,6 +88,7 @@ const PersonalModal = (props) => {
                   handleClearErrors();
                 }}
                 error={error.fname.length > 1}
+                testID="first-name-input"
               />
               <HelperText type="error" visible={error.fname.length > 1}>
                 Please enter first name.
@@ -101,6 +105,7 @@ const PersonalModal = (props) => {
                   handleClearErrors();
                 }}
                 error={error.lname.length > 1}
+                testID="last-name-input"
               />
               <HelperText type="error" visible={error.lname.length > 1}>
                 Please enter last name.
@@ -126,6 +131,7 @@ const PersonalModal = (props) => {
                   { backgroundColor: isSubmitting ? "#ccc" : "#007bff" },
                 ]}
                 textColor="white"
+                testID="save-personal-button"
               >
                 Save
               </Button>

SmartClothingApp/src/screens/Profile/index.jsx

@@ -114,6 +114,7 @@ const ProfileScreen = ({ navigation, route }) => {
                 textColor="white"
                 style={{ borderRadius: 10 }}
                 onPress={openPersonalModal}
+                testID="edit-personal-button"
               >
                 EDIT
               </Button>