feat: added the validation test (#1303)

* feat: added the validation test

* fix: address CodeRabbit review - isolate button state via avatar pre-selection and use fireEvent

* fix: format nameValidation test file with prettier

* style: apply black formatting to images.py files

* style: format images.py with black

* test: split name validation into per-component test files under components/__tests__

* style: fix prettier formatting in component test files

* undo settings page test file movement

---------

Co-authored-by: ROHAN PANDEY <95585299+rohan-pandeyy@users.noreply.github.com>

Author: Umang-Khemka

backend/app/routes/images.py

@@ -7,7 +7,6 @@
 from app.database.images import db_toggle_image_favourite_status, db_get_image_by_id
 from app.logging.setup_logging import get_logger
 
-
 # Initialize logger
 logger = get_logger(__name__)
 router = APIRouter()

frontend/src/components/__tests__/AccountSettingsCard.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@/test-utils';
+import userEvent from '@testing-library/user-event';
+import AccountSettingsCard from '@/pages/SettingsPage/components/AccountSettingsCard';
+
+const VALID_30 = 'a'.repeat(30);
+const INVALID_31 = 'a'.repeat(31);
+const ERROR_MSG = 'A single word in your name cannot exceed 30 characters.';
+
+beforeEach(() => localStorage.clear());
+
+describe('Name validation - AccountSettingsCard', () => {
+  const setup = () => {
+    const user = userEvent.setup();
+    render(<AccountSettingsCard />);
+    const input = screen.getByPlaceholderText('Enter your name');
+    return { user, input };
+  };
+
+  test('30-character word is valid - no error shown', async () => {
+    const { user, input } = setup();
+    await user.type(input, VALID_30);
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+
+  test('31-character word shows error and disables Save Changes button', async () => {
+    const { user, input } = setup();
+    await user.type(input, INVALID_31);
+    expect(screen.getByText(ERROR_MSG)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /save changes/i }),
+    ).toBeDisabled();
+  });
+
+  test('multi-space input is handled gracefully - no error', async () => {
+    const { user, input } = setup();
+    await user.type(input, 'John   Doe');
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+
+  test('recovery - valid input after invalid clears error', async () => {
+    const { user, input } = setup();
+    await user.type(input, INVALID_31);
+    expect(screen.getByText(ERROR_MSG)).toBeInTheDocument();
+    await user.clear(input);
+    await user.type(input, 'John');
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+});

frontend/src/components/__tests__/AvatarSelectionStep.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@/test-utils';
+import userEvent from '@testing-library/user-event';
+import { AvatarSelectionStep } from '@/components/OnboardingSteps/AvatarSelectionStep';
+
+const VALID_30 = 'a'.repeat(30);
+const INVALID_31 = 'a'.repeat(31);
+const ERROR_MSG = 'A single word in your name cannot exceed 30 characters.';
+
+beforeEach(() => localStorage.clear());
+
+describe('Name validation - AvatarSelectionStep', () => {
+  const setup = () => {
+    const user = userEvent.setup();
+    render(
+      <AvatarSelectionStep
+        stepIndex={0}
+        totalSteps={4}
+        currentStepDisplayIndex={0}
+      />,
+    );
+    const input = screen.getByPlaceholderText('Enter your name');
+    return { user, input };
+  };
+
+  test('30-character word is valid - no error shown', async () => {
+    const { user, input } = setup();
+    await user.type(input, VALID_30);
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+
+  test('31-character word shows error and disables Next button', async () => {
+    const { user, input } = setup();
+    await user.type(input, INVALID_31);
+    expect(screen.getByText(ERROR_MSG)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
+  });
+
+  test('multi-space input is handled gracefully - no error', async () => {
+    const { user, input } = setup();
+    await user.type(input, 'John   Doe');
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+
+  test('recovery - valid input after invalid clears error', async () => {
+    const { user, input } = setup();
+    await user.type(input, INVALID_31);
+    expect(screen.getByText(ERROR_MSG)).toBeInTheDocument();
+    await user.clear(input);
+    await user.type(input, 'John');
+    expect(screen.queryByText(ERROR_MSG)).not.toBeInTheDocument();
+  });
+});