test: add automated tests for per-word name validation in onboarding and settings

[coderabbitai]

Summary

This issue tracks the follow-up work to add automated unit tests for the per-word name-length validation logic introduced in #1286.

Background

PR #1286 added a 30-character-per-word limit to the name input fields in:

• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx
• frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx

Tests were deferred to keep that PR focused on the core navbar layout fix.

Acceptance criteria

The following test cases must be covered for both AvatarSelectionStep and AccountSettingsCard:

• Boundary – 30 characters (valid): A single word of exactly 30 characters should pass validation; no error message is shown and the submit/Next button remains enabled.
• Boundary – 31 characters (invalid): A single word of 31 characters should trigger the error message "A single word in your name cannot exceed 30 characters." and disable the submit/Next button.
• Multi-space input: Multiple consecutive spaces between words should be handled gracefully; only non-empty words are validated.
• Recovery: After entering an invalid name, changing the input to a valid name should clear the error and re-enable the submit/Next button.

Related

• PR: feat: add long word validation for name input in onboarding and settings #1286
• Review comment: feat: add long word validation for name input in onboarding and settings #1286 (comment)

/cc @rohan-pandeyy

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[Umang-Khemka]

Hi, I opened PR #1286 which introduced the per-word name validation logic. I'd like to work on this follow-up issue to add the automated tests.

Here's my planned approach:

Test file: frontend/src/components/__tests__/nameValidation.test.tsx

Test cases for both AvatarSelectionStep and AccountSettingsCard:

• Boundary 30 characters (valid): A single word of exactly 30 characters passes validation, no error shown
• Boundary 31 characters (invalid): A single word of 31 characters triggers the error message and disables the submit/Next button
• Multi-space input: Multiple consecutive spaces between words are handled gracefully, no false errors
• Recovery: After entering an invalid name, changing to a valid name clears the error and re-enables the submit/Next button

Total: 8 new test cases (4 per component) covering all acceptance criteria mentioned in the issue.

Please assign this issue to me. Thanks!

[rohan-pandeyy]

Thanks for showing interest, @Umang-Khemka.

Please wait a little while. One of the frontend test suites (PR #1056) is currently awaiting merge. Once it’s merged, I’ll assign the issue to you.

[Umang-Khemka]

Ok

[rohan-pandeyy]

Hi @Umang-Khemka, the frontend test suites (PR #1056) has been merged in, are you still willing to work on this issue?

[Umang-Khemka]

Yes I can

[rohan-pandeyy]

Please go ahead