feat: implement change password functionality - [CU-869arhppx] (#70)

Author: Exo1i

src/__tests__/accountInformation/AccountInformationScreen.test.tsx

@@ -81,15 +81,20 @@ describe('AccountInformationScreen', () => {
     expect(mockNavigation.goBack).toHaveBeenCalledTimes(1);
 
     fireEvent.press(getByTestId('username-row'));
-    expect(mockNavigation.navigate).toHaveBeenCalledWith('ChangeUsername', {
-      currentUsername: 'testuser',
+    expect(mockNavigation.navigate).toHaveBeenCalledWith('AccountInformation', {
+      screen: 'ChangeUsername',
+      params: { currentUsername: 'testuser' },
     });
 
     fireEvent.press(getByTestId('email-row'));
-    expect(mockNavigation.navigate).toHaveBeenCalledWith('ChangeEmail', {
-      currentEmail: 'test@example.com',
+    expect(mockNavigation.navigate).toHaveBeenCalledWith('AccountInformation', {
+      screen: 'ChangeEmail',
+      params: { currentEmail: 'test@example.com' },
     });
 
+    fireEvent.press(getByTestId('password-row'));
+    expect(mockNavigation.navigate).toHaveBeenCalledWith('ChangePassword');
+
     fireEvent.press(getByTestId('logout-button'));
 
     await waitFor(() => expect(mockClearActiveSession).toHaveBeenCalledTimes(1));

src/__tests__/accountInformation/ChangePasswordScreen.test.tsx

@@ -0,0 +1,351 @@
+import { ReactNode } from 'react';
+
+import { NavigationContainer } from '@react-navigation/native';
+import { fireEvent, render, waitFor, within } from '@testing-library/react-native';
+
+import { ApiException } from '@/libs/api';
+import ChangePasswordScreen from '@/screens/accountInformation/ChangePasswordScreen';
+import { changePassword } from '@/services/settings';
+
+jest.mock('@/services/settings', () => ({ changePassword: jest.fn() }));
+
+const mockNavigation = { navigate: jest.fn(), goBack: jest.fn() };
+jest.mock('@react-navigation/native', () => ({
+  NavigationContainer: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  useNavigation: () => mockNavigation,
+}));
+
+jest.mock('@/hooks/useTheme', () => ({ useTheme: () => ({ theme: 'light' as const }) }));
+jest.mock('@expo/vector-icons', () => ({ Ionicons: () => null }));
+jest.mock('@react-navigation/elements', () => ({
+  useHeaderHeight: () => 50,
+}));
+
+const originalConsoleError = console.error;
+beforeAll(() => {
+  console.error = jest.fn();
+});
+afterAll(() => {
+  console.error = originalConsoleError;
+});
+
+describe('ChangePasswordScreen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderScreen = () =>
+    render(
+      <NavigationContainer>
+        <ChangePasswordScreen />
+      </NavigationContainer>
+    );
+
+  it('renders with correct initial state and navigation', () => {
+    const { getByText, getByTestId } = renderScreen();
+
+    // Check that the description is rendered
+    expect(getByText(/Your password must be at least 10 characters long/)).toBeTruthy();
+    // Check that the change password button is disabled initially
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Test navigation buttons
+    fireEvent.press(getByTestId('cancel-button'));
+    expect(mockNavigation.goBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('validates password requirements and shows appropriate errors', async () => {
+    const { getByTestId } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    // Initially button should be disabled
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Fill current password
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Fill new password (too short)
+    fireEvent.changeText(newPasswordInput, 'short');
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Fill valid new password
+    fireEvent.changeText(newPasswordInput, 'validpassword123');
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Fill confirm password (doesn't match)
+    fireEvent.changeText(confirmPasswordInput, 'differentpassword');
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    // Fill matching confirm password
+    fireEvent.changeText(confirmPasswordInput, 'validpassword123');
+    await waitFor(() => {
+      expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(false);
+    });
+  });
+
+  it('handles successful password change', async () => {
+    const { getByTestId, queryByText } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    (changePassword as jest.Mock).mockResolvedValueOnce({
+      success: true,
+      message: 'Password changed successfully.',
+    });
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      expect(changePassword).toHaveBeenCalledWith({
+        currentPassword: 'currentpass',
+        newPassword: 'newpassword123',
+      });
+    });
+
+    // Check success message appears
+    expect(queryByText('Password changed successfully.')).toBeTruthy();
+
+    // Check form is cleared
+    expect(currentPasswordInput.props.value).toBe('');
+    expect(newPasswordInput.props.value).toBe('');
+    expect(confirmPasswordInput.props.value).toBe('');
+  });
+
+  it('handles successful password change with default message', async () => {
+    const { getByTestId, queryByText } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    (changePassword as jest.Mock).mockResolvedValueOnce({
+      success: true,
+    });
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      expect(queryByText('Password changed successfully.')).toBeTruthy();
+    });
+  });
+
+  it('handles failure with custom message', async () => {
+    const { getByTestId, queryByText } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    const apiError = new ApiException(
+      422,
+      {
+        success: false,
+        error: {
+          code: 'VALIDATION_ERROR',
+          message: 'Current password is incorrect',
+          errors: [
+            {
+              field: 'currentPassword',
+              code: 'INVALID_PASSWORD',
+              message: 'Current password is incorrect',
+            },
+          ],
+        },
+      },
+      'Current password is incorrect'
+    );
+
+    (changePassword as jest.Mock).mockRejectedValueOnce(apiError);
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      // Should show field error on current password input through helper text
+      const helperText = queryByText('Current password is incorrect');
+      expect(helperText).toBeTruthy();
+    });
+  });
+
+  it('handles failure without message', async () => {
+    const { getByTestId } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    const apiError = {
+      status: 500,
+      body: {
+        success: false,
+        error: {
+          code: 'INTERNAL_ERROR',
+          message: 'Failed to change password',
+        },
+      },
+    };
+
+    (changePassword as jest.Mock).mockRejectedValueOnce(apiError);
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      // Button should be enabled again after error
+      expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(false);
+    });
+  });
+
+  it('handles exception during API call', async () => {
+    const { getByTestId, queryByText } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    (changePassword as jest.Mock).mockRejectedValueOnce(new Error('Network error'));
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      expect(queryByText('Network error')).toBeTruthy();
+    });
+  });
+
+  it('handles generic exception', async () => {
+    const { getByTestId } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    (changePassword as jest.Mock).mockRejectedValueOnce(new Error('Network error'));
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      // Button should be enabled again after error (toast will show the error)
+      expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(false);
+    });
+  });
+
+  it('shows loading state during API call', async () => {
+    const { getByTestId } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    (changePassword as jest.Mock).mockImplementation(
+      () => new Promise((resolve) => setTimeout(() => resolve({ success: true }), 100))
+    );
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    // Check loading state
+    expect(within(getByTestId('change-password-button')).getByText('Changing...')).toBeTruthy();
+    expect(getByTestId('change-password-button').props.accessibilityState.disabled).toBe(true);
+
+    await waitFor(() => {
+      expect(changePassword).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('clears previous messages when starting new request', async () => {
+    const { getByTestId, queryByText } = renderScreen();
+
+    const currentPasswordInput = getByTestId('current-password-input');
+    const newPasswordInput = getByTestId('new-password-input');
+    const confirmPasswordInput = getByTestId('confirm-password-input');
+
+    // First, set up a validation error state that will show on the UI
+    fireEvent.changeText(currentPasswordInput, 'currentpass');
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+    fireEvent.changeText(confirmPasswordInput, 'newpassword123');
+
+    const apiError = new ApiException(
+      422,
+      {
+        success: false,
+        error: {
+          code: 'VALIDATION_ERROR',
+          message: 'Current password is incorrect',
+          errors: [
+            {
+              field: 'currentPassword',
+              code: 'INVALID_PASSWORD',
+              message: 'Current password is incorrect',
+            },
+          ],
+        },
+      },
+      'Current password is incorrect'
+    );
+
+    (changePassword as jest.Mock).mockRejectedValueOnce(apiError);
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      expect(queryByText('Current password is incorrect')).toBeTruthy();
+    });
+
+    // Now try again - error should be cleared
+    (changePassword as jest.Mock).mockResolvedValueOnce({
+      success: true,
+      message: 'Success!',
+    });
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    await waitFor(() => {
+      expect(queryByText('Success!')).toBeTruthy();
+      expect(queryByText('Current password is incorrect')).toBeFalsy();
+    });
+  });
+
+  it('does not submit when form is invalid', () => {
+    const { getByTestId } = renderScreen();
+
+    const newPasswordInput = getByTestId('new-password-input');
+
+    // Only fill new password, leave others empty
+    fireEvent.changeText(newPasswordInput, 'newpassword123');
+
+    fireEvent.press(getByTestId('change-password-button'));
+
+    expect(changePassword).not.toHaveBeenCalled();
+  });
+});