cardosofelipe/fast-next-template
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add extensive form tests and enhanced error handling for auth components.

Browse Source 
- Introduced comprehensive tests for `RegisterForm`, `PasswordResetRequestForm`, and `PasswordResetConfirmForm` covering successful submissions, validation errors, and API error handling.
- Refactored forms to handle unexpected errors gracefully and improve test coverage for edge cases.
- Updated `crypto` and `storage` modules with robust error handling for storage issues and encryption key management.
- Removed unused `axios-mock-adapter` dependency for cleaner dependency management.
This commit is contained in:
Felipe Cardoso
2025-11-01 05:24:26 +01:00
parent 035e6af446
commit ee938ce6a6
15 changed files with 934 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
View File

@@ -7,6 +7,31 @@ import userEvent from '@testing-library/user-event';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { PasswordResetConfirmForm } from '@/components/auth/PasswordResetConfirmForm';
// Mock the usePasswordResetConfirm hook
const mockMutateAsync = jest.fn();
const mockUsePasswordResetConfirm = jest.fn(() => ({
mutateAsync: mockMutateAsync,
mutate: jest.fn(),
isPending: false,
isError: false,
isSuccess: false,
isIdle: true,
error: null,
data: undefined,
status: 'idle' as const,
variables: undefined,
reset: jest.fn(),
context: undefined,
failureCount: 0,
failureReason: null,
isPaused: false,
submittedAt: 0,
}));
jest.mock('@/lib/api/hooks/useAuth', () => ({
usePasswordResetConfirm: () => mockUsePasswordResetConfirm(),
}));
jest.mock('next/navigation', () => ({
useRouter: () => ({
push: jest.fn(),
@@ -31,6 +56,11 @@ const createWrapper = () => {
describe('PasswordResetConfirmForm', () => {
const mockToken = 'test-reset-token-123';
beforeEach(() => {
mockMutateAsync.mockClear();
mockUsePasswordResetConfirm.mockClear();
});
it('renders password reset confirm form with all fields', () => {
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
@@ -135,9 +165,6 @@ describe('PasswordResetConfirmForm', () => {
).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(),
@@ -156,4 +183,198 @@ describe('PasswordResetConfirmForm', () => {
const hiddenInput = container.querySelector('input[type="hidden"]');
expect(hiddenInput).toHaveValue(mockToken);
});
describe('Form submission', () => {
it('calls mutateAsync with token and new_password on valid submission', async () => {
const user = userEvent.setup();
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(mockMutateAsync).toHaveBeenCalledWith({
token: mockToken,
new_password: 'NewPassword123',
});
});
});
it('does not include confirm_password in API request', async () => {
const user = userEvent.setup();
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(mockMutateAsync).toHaveBeenCalled();
const callArgs = mockMutateAsync.mock.calls[0][0];
expect(callArgs).not.toHaveProperty('confirm_password');
});
});
it('displays success message after successful submission', async () => {
const user = userEvent.setup();
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.getByText(/your password has been successfully reset/i)).toBeInTheDocument();
});
});
it('resets form after successful submission', async () => {
const user = userEvent.setup();
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
const passwordInput = screen.getByLabelText(/new password/i) as HTMLInputElement;
const confirmInput = screen.getByLabelText(/confirm password/i) as HTMLInputElement;
await user.type(passwordInput, 'NewPassword123');
await user.type(confirmInput, 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(passwordInput.value).toBe('');
expect(confirmInput.value).toBe('');
});
});
it('calls onSuccess callback after successful submission', async () => {
const user = userEvent.setup();
const onSuccess = jest.fn();
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} onSuccess={onSuccess} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(onSuccess).toHaveBeenCalled();
});
});
it('displays general error message from API', async () => {
const user = userEvent.setup();
const apiError = [
{
code: 'AUTH_003',
message: 'Invalid or expired token',
},
];
mockMutateAsync.mockRejectedValueOnce(apiError);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.getByText('Invalid or expired token')).toBeInTheDocument();
});
});
it('displays field-specific errors from API', async () => {
const user = userEvent.setup();
const apiError = [
{
code: 'VAL_003',
message: 'Password does not meet requirements',
field: 'new_password',
},
];
mockMutateAsync.mockRejectedValueOnce(apiError);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.getByText('Password does not meet requirements')).toBeInTheDocument();
});
});
it('displays generic error for unexpected error format', async () => {
const user = userEvent.setup();
const unexpectedError = new Error('Network error');
mockMutateAsync.mockRejectedValueOnce(unexpectedError);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
});
});
it('clears success message on new submission', async () => {
const user = userEvent.setup();
// First submission succeeds
mockMutateAsync.mockResolvedValueOnce(undefined);
render(<PasswordResetConfirmForm token={mockToken} />, {
wrapper: createWrapper(),
});
await user.type(screen.getByLabelText(/new password/i), 'NewPassword123');
await user.type(screen.getByLabelText(/confirm password/i), 'NewPassword123');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.getByText(/your password has been successfully reset/i)).toBeInTheDocument();
});
// Second submission with error
mockMutateAsync.mockRejectedValueOnce([
{ code: 'AUTH_003', message: 'Invalid or expired token' },
]);
await user.type(screen.getByLabelText(/new password/i), 'AnotherPassword456');
await user.type(screen.getByLabelText(/confirm password/i), 'AnotherPassword456');
await user.click(screen.getByRole('button', { name: /reset password/i }));
await waitFor(() => {
expect(screen.queryByText(/your password has been successfully reset/i)).not.toBeInTheDocument();
expect(screen.getByText('Invalid or expired token')).toBeInTheDocument();
});
});
});
});