Add password reset functionality with form components, pages, and tests
- Implemented `PasswordResetRequestForm` and `PasswordResetConfirmForm` components with email and password validation, strength indicators, and error handling. - Added dedicated pages for requesting and confirming password resets, integrated with React Query hooks and Next.js API routes. - Included tests for validation rules, UI states, and token handling to ensure proper functionality and coverage. - Updated ESLint and configuration files for new components and pages. - Enhanced `IMPLEMENTATION_PLAN.md` with updated task details and documentation for password reset workflows.
This commit is contained in:
Felipe Cardoso
97
frontend/tests/components/auth/LoginForm.test.tsx
Normal file
97
frontend/tests/components/auth/LoginForm.test.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* Tests for LoginForm component
|
||||
*/
|
||||
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { LoginForm } from '@/components/auth/LoginForm';
|
||||
|
||||
// Mock router
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock auth store
|
||||
jest.mock('@/stores/authStore', () => ({
|
||||
useAuthStore: () => ({
|
||||
isAuthenticated: false,
|
||||
setAuth: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('LoginForm', () => {
|
||||
it('renders login form with email and password fields', () => {
|
||||
render(<LoginForm />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows validation errors for empty fields', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<LoginForm />, { wrapper: createWrapper() });
|
||||
|
||||
const submitButton = screen.getByRole('button', { name: /sign in/i });
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/email is required/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/password is required/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Note: Email validation is primarily handled by HTML5 type="email" attribute
|
||||
// Zod provides additional validation layer
|
||||
|
||||
it('shows password requirements validation', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<LoginForm />, { wrapper: createWrapper() });
|
||||
|
||||
const emailInput = screen.getByLabelText(/email/i);
|
||||
const passwordInput = screen.getByLabelText(/password/i);
|
||||
const submitButton = screen.getByRole('button', { name: /sign in/i });
|
||||
|
||||
await user.type(emailInput, 'test@example.com');
|
||||
await user.type(passwordInput, 'short');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/password must be at least 8 characters/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows register link when enabled', () => {
|
||||
render(<LoginForm showRegisterLink />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/don't have an account/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /sign up/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows password reset link when enabled', () => {
|
||||
render(<LoginForm showPasswordResetLink />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByRole('link', { name: /forgot password/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Note: Async submission tests require API mocking with MSW
|
||||
// Will be added in Phase 9 (Testing Infrastructure)
|
||||
});
|
||||
159
frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
Normal file
159
frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Tests for PasswordResetConfirmForm component
|
||||
*/
|
||||
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { PasswordResetConfirmForm } from '@/components/auth/PasswordResetConfirmForm';
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('PasswordResetConfirmForm', () => {
|
||||
const mockToken = 'test-reset-token-123';
|
||||
|
||||
it('renders password reset confirm form with all fields', () => {
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByLabelText(/new password/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('button', { name: /reset password/i })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows validation errors for required fields', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const submitButton = screen.getByRole('button', { name: /reset password/i });
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/new password is required/i)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/please confirm your password/i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows password strength indicators', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const passwordInput = screen.getByLabelText(/new password/i);
|
||||
await user.type(passwordInput, 'a');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/at least 8 characters/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/contains a number/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/contains an uppercase letter/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('validates password meets requirements', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const passwordInput = screen.getByLabelText(/new password/i);
|
||||
const submitButton = screen.getByRole('button', { name: /reset password/i });
|
||||
|
||||
await user.type(passwordInput, 'short');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText(/password must be at least 8 characters/i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('validates password confirmation matches', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const passwordInput = screen.getByLabelText(/new password/i);
|
||||
const confirmInput = screen.getByLabelText(/confirm password/i);
|
||||
const submitButton = screen.getByRole('button', { name: /reset password/i });
|
||||
|
||||
await user.type(passwordInput, 'Password123');
|
||||
await user.type(confirmInput, 'Different123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows instructions text', () => {
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.getByText(/enter your new password below/i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows login link when enabled', () => {
|
||||
render(<PasswordResetConfirmForm token={mockToken} showLoginLink />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/remember your password/i)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('link', { name: /back to login/i })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Note: Async submission tests require API mocking with MSW
|
||||
// Will be added in Phase 9 (Testing Infrastructure)
|
||||
|
||||
it('marks required fields with asterisk', () => {
|
||||
render(<PasswordResetConfirmForm token={mockToken} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const labels = screen.getAllByText('*');
|
||||
expect(labels.length).toBeGreaterThanOrEqual(2); // At least 2 required fields
|
||||
});
|
||||
|
||||
it('uses provided token in form', () => {
|
||||
const { container } = render(
|
||||
<PasswordResetConfirmForm token={mockToken} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const hiddenInput = container.querySelector('input[type="hidden"]');
|
||||
expect(hiddenInput).toHaveValue(mockToken);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* Tests for PasswordResetRequestForm component
|
||||
*/
|
||||
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { PasswordResetRequestForm } from '@/components/auth/PasswordResetRequestForm';
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('PasswordResetRequestForm', () => {
|
||||
it('renders password reset form with email field', () => {
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('button', { name: /send reset instructions/i })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows validation error for empty email', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
const submitButton = screen.getByRole('button', {
|
||||
name: /send reset instructions/i,
|
||||
});
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/email is required/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Note: Email validation is primarily handled by HTML5 type="email" attribute
|
||||
// Zod provides additional validation layer
|
||||
|
||||
it('shows instructions text', () => {
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
expect(
|
||||
screen.getByText(/enter your email address and we'll send you instructions/i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows login link when enabled', () => {
|
||||
render(<PasswordResetRequestForm showLoginLink />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/remember your password/i)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('link', { name: /back to login/i })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Note: Async submission tests require API mocking with MSW
|
||||
// Will be added in Phase 9 (Testing Infrastructure)
|
||||
|
||||
it('marks email field as required with asterisk', () => {
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
const labels = screen.getAllByText('*');
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
112
frontend/tests/components/auth/RegisterForm.test.tsx
Normal file
112
frontend/tests/components/auth/RegisterForm.test.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Tests for RegisterForm component
|
||||
*/
|
||||
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { RegisterForm } from '@/components/auth/RegisterForm';
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/stores/authStore', () => ({
|
||||
useAuthStore: () => ({
|
||||
isAuthenticated: false,
|
||||
setAuth: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('RegisterForm', () => {
|
||||
it('renders registration form with all fields', () => {
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/last name/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/^email/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/^password/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /create account/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows validation errors for required fields', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
const submitButton = screen.getByRole('button', { name: /create account/i });
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/first name is required/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/email is required/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/password is required/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows password strength indicators', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
const passwordInput = screen.getByLabelText(/^password/i);
|
||||
await user.type(passwordInput, 'a');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/at least 8 characters/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/contains a number/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/contains an uppercase letter/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('validates password confirmation matches', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
const firstNameInput = screen.getByLabelText(/first name/i);
|
||||
const emailInput = screen.getByLabelText(/^email/i);
|
||||
const passwordInput = screen.getByLabelText(/^password/i);
|
||||
const confirmInput = screen.getByLabelText(/confirm password/i);
|
||||
const submitButton = screen.getByRole('button', { name: /create account/i });
|
||||
|
||||
await user.type(firstNameInput, 'Test');
|
||||
await user.type(emailInput, 'test@example.com');
|
||||
await user.type(passwordInput, 'Password123');
|
||||
await user.type(confirmInput, 'Different123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows login link when enabled', () => {
|
||||
render(<RegisterForm showLoginLink />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/already have an account/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /sign in/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('marks first name and email as required with asterisk', () => {
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
const labels = screen.getAllByText('*');
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user