test(edit-profile): add form submission tests

Author: HelanaNady

src/__tests__/profile/edit_profile.test.tsx

@@ -11,6 +11,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { formatBirthDate } from '@/components/utils/profile';
 import { mockUsers } from '@/mocks/data/userMock';
 import EditProfileScreen from '@/screens/profile/EditProfileScreen';
+import { updateUserProfile } from '@/services/user';
 import { useUserStore } from '@/stores/userStore';
 
 jest.mock('@/hooks/useTheme', () => ({
@@ -23,13 +24,15 @@ jest.mock('@react-navigation/elements', () => ({
 
 const mockSetOptions = jest.fn();
 
+const mockGoBack = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   const actual = jest.requireActual('@react-navigation/native');
   return {
     ...actual,
     useNavigation: () => ({
       navigate: jest.fn(),
-      goBack: jest.fn(),
+      goBack: mockGoBack,
       setOptions: mockSetOptions,
     }),
   };
@@ -319,4 +322,62 @@ describe('EditProfileScreen (adjusted)', () => {
       expect(ImagePicker.launchImageLibraryAsync).toHaveBeenCalled();
     });
   });
+
+  it('calls handleFormSubmit when header button is pressed', async () => {
+    (updateUserProfile as jest.Mock).mockResolvedValueOnce({});
+
+    const { getByTestId } = render(
+      <NavigationContainer>
+        <QueryClientProvider client={mockQueryClient}>
+          <EditProfileScreen />
+        </QueryClientProvider>
+      </NavigationContainer>
+    );
+
+    // change something
+    fireEvent.changeText(getByTestId('edit-bio-input'), 'New Bio');
+
+    // Extract the headerRight Button from setOptions
+    expect(mockSetOptions).toHaveBeenCalled();
+    const headerOptions = mockSetOptions.mock.calls[0][0];
+    const headerRightButton = headerOptions.headerRight();
+
+    await act(async () => {
+      headerRightButton.props.onPress();
+    });
+    await act(async () => {
+      expect(mockGoBack).toHaveBeenCalled();
+    });
+  });
+
+  it('does not call handleFormSubmit when header button is pressed and form is invalid', async () => {
+    (updateUserProfile as jest.Mock).mockResolvedValueOnce({});
+
+    const { getByTestId } = render(
+      <NavigationContainer>
+        <QueryClientProvider client={mockQueryClient}>
+          <EditProfileScreen />
+        </QueryClientProvider>
+      </NavigationContainer>
+    );
+
+    // Set invalid website
+    await act(async () => {
+      fireEvent.changeText(getByTestId('edit-website-input'), 'invalid-url');
+    });
+
+    // Extract the latest headerRight button
+    const headerOptions = mockSetOptions.mock.calls[mockSetOptions.mock.calls.length - 1][0];
+    const headerRightButton = headerOptions.headerRight();
+
+    // The button should be disabled due to invalid form
+    expect(headerRightButton.props.disabled).toBe(true);
+
+    // Try pressing it (won't call handleFormSubmit because disabled)
+    await act(async () => {
+      headerRightButton.props.onPress();
+    });
+
+    expect(mockGoBack).not.toHaveBeenCalled();
+  });
 });

src/screens/profile/EditProfileScreen.tsx

@@ -195,6 +195,8 @@ const EditProfileScreen = () => {
   }, [websiteError, birthDateError, error]);
 
   const handleFormSubmit = useCallback(async () => {
+    if (isError) return;
+
     try {
       // clear any previous errors
       setError(null);
@@ -248,6 +250,7 @@ const EditProfileScreen = () => {
     bannerUrl,
     formDataChanged,
     queryClient,
+    isError,
   ]);
 
   useEffect(() => {