From 64a4b3fb114f67e54dde5d83158e04997f5b7cf6 Mon Sep 17 00:00:00 2001 From: Felipe Cardoso Date: Sun, 2 Nov 2025 23:23:49 +0100 Subject: [PATCH] Improve login form validation and enhance e2e test reliability - Update `LoginForm` to use `onBlur` mode and `onChange` revalidation for better UX. - Enhance e2e tests to verify field interactivity, ensure visibility of submit button, and improve error validation reliability across browsers. --- frontend/e2e/auth-login.spec.ts | 20 ++++++++++++++------ frontend/src/components/auth/LoginForm.tsx | 2 ++ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/frontend/e2e/auth-login.spec.ts b/frontend/e2e/auth-login.spec.ts index b73695b..ea68c24 100644 --- a/frontend/e2e/auth-login.spec.ts +++ b/frontend/e2e/auth-login.spec.ts @@ -21,18 +21,26 @@ test.describe('Login Flow', () => { }); test('should show validation errors for empty form', async ({ page }) => { - // Wait for React hydration to complete - await page.waitForLoadState('networkidle'); - - // Interact with email field to ensure form is interactive + // Ensure the dynamically loaded form is mounted and interactive const emailInput = page.locator('input[name="email"]'); + const passwordInput = page.locator('input[name="password"]'); + const submitButton = page.locator('button[type="submit"]'); + + await expect(emailInput).toBeVisible({ timeout: 10000 }); + await expect(passwordInput).toBeVisible({ timeout: 10000 }); + await expect(submitButton).toBeVisible({ timeout: 10000 }); + await expect(submitButton).toBeEnabled({ timeout: 10000 }); + + // Touch fields to mimic user interaction await emailInput.focus(); await emailInput.blur(); + await passwordInput.focus(); + await passwordInput.blur(); // Submit empty form - await page.locator('button[type="submit"]').click(); + await submitButton.click(); - // Wait for validation errors - Firefox may be slower + // Wait for validation errors - allow extra time for slower browsers await expect(page.locator('#email-error')).toBeVisible({ timeout: 10000 }); await expect(page.locator('#password-error')).toBeVisible({ timeout: 10000 }); diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx index 128abb8..7bcd8dc 100644 --- a/frontend/src/components/auth/LoginForm.tsx +++ b/frontend/src/components/auth/LoginForm.tsx @@ -82,6 +82,8 @@ export function LoginForm({ const form = useForm({ resolver: zodResolver(loginSchema), + mode: 'onBlur', + reValidateMode: 'onChange', defaultValues: { email: '', password: '',