forked from cardosofelipe/fast-next-template
Add extensive form tests and enhanced error handling for auth components.
- 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
@@ -7,6 +7,31 @@ import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { LoginForm } from '@/components/auth/LoginForm';
|
||||
|
||||
// Mock the useLogin hook
|
||||
const mockMutateAsync = jest.fn();
|
||||
const mockUseLogin = 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', () => ({
|
||||
useLogin: () => mockUseLogin(),
|
||||
}));
|
||||
|
||||
// Mock router
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
@@ -38,6 +63,11 @@ const createWrapper = () => {
|
||||
};
|
||||
|
||||
describe('LoginForm', () => {
|
||||
beforeEach(() => {
|
||||
mockMutateAsync.mockClear();
|
||||
mockUseLogin.mockClear();
|
||||
});
|
||||
|
||||
it('renders login form with email and password fields', () => {
|
||||
render(<LoginForm />, { wrapper: createWrapper() });
|
||||
|
||||
@@ -59,9 +89,6 @@ describe('LoginForm', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// 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() });
|
||||
@@ -92,6 +119,162 @@ describe('LoginForm', () => {
|
||||
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)
|
||||
describe('Form submission', () => {
|
||||
it('calls mutateAsync with form data on valid submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
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, 'Password123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith({
|
||||
email: 'test@example.com',
|
||||
password: 'Password123',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('calls onSuccess callback after successful login', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSuccess = jest.fn();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<LoginForm onSuccess={onSuccess} />, { 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, 'Password123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays general error message from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'AUTH_001',
|
||||
message: 'Invalid credentials',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
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, 'WrongPassword1');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays field-specific errors from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'VALIDATION_ERROR',
|
||||
message: 'Invalid email format',
|
||||
field: 'email',
|
||||
},
|
||||
{
|
||||
code: 'VALIDATION_ERROR',
|
||||
message: 'Password is too weak',
|
||||
field: 'password',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
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, 'Password123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Invalid email format')).toBeInTheDocument();
|
||||
expect(screen.getByText('Password is too weak')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays generic error for unexpected error format', async () => {
|
||||
const user = userEvent.setup();
|
||||
const unexpectedError = new Error('Network error');
|
||||
mockMutateAsync.mockRejectedValueOnce(unexpectedError);
|
||||
|
||||
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, 'Password123');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('clears previous errors on new submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'AUTH_001',
|
||||
message: 'Invalid credentials',
|
||||
},
|
||||
];
|
||||
|
||||
// First submission fails
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
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, 'WrongPassword1');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Second submission succeeds
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
await user.clear(passwordInput);
|
||||
await user.type(passwordInput, 'CorrectPassword1');
|
||||
await user.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Invalid credentials')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,6 +7,31 @@ import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { PasswordResetRequestForm } from '@/components/auth/PasswordResetRequestForm';
|
||||
|
||||
// Mock the usePasswordResetRequest hook
|
||||
const mockMutateAsync = jest.fn();
|
||||
const mockUsePasswordResetRequest = 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', () => ({
|
||||
usePasswordResetRequest: () => mockUsePasswordResetRequest(),
|
||||
}));
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
@@ -29,6 +54,11 @@ const createWrapper = () => {
|
||||
};
|
||||
|
||||
describe('PasswordResetRequestForm', () => {
|
||||
beforeEach(() => {
|
||||
mockMutateAsync.mockClear();
|
||||
mockUsePasswordResetRequest.mockClear();
|
||||
});
|
||||
|
||||
it('renders password reset form with email field', () => {
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
@@ -74,13 +104,153 @@ describe('PasswordResetRequestForm', () => {
|
||||
).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);
|
||||
});
|
||||
|
||||
describe('Form submission', () => {
|
||||
it('calls mutateAsync with email on valid submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith({ email: 'test@example.com' });
|
||||
});
|
||||
});
|
||||
|
||||
it('displays success message after successful submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/password reset instructions have been sent/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('resets form after successful submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
|
||||
await user.type(emailInput, 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(emailInput.value).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
it('calls onSuccess callback after successful submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSuccess = jest.fn();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<PasswordResetRequestForm onSuccess={onSuccess} />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays general error message from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'USER_001',
|
||||
message: 'User not found',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'notfound@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('User not found')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays field-specific errors from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'VAL_002',
|
||||
message: 'Invalid email format',
|
||||
field: 'email',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Invalid email format')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays generic error for unexpected error format', async () => {
|
||||
const user = userEvent.setup();
|
||||
const unexpectedError = new Error('Network error');
|
||||
mockMutateAsync.mockRejectedValueOnce(unexpectedError);
|
||||
|
||||
render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/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(<PasswordResetRequestForm />, { wrapper: createWrapper() });
|
||||
|
||||
const emailInput = screen.getByLabelText(/email/i);
|
||||
await user.type(emailInput, 'test@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/password reset instructions have been sent/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Second submission with error
|
||||
mockMutateAsync.mockRejectedValueOnce([{ code: 'USER_001', message: 'User not found' }]);
|
||||
|
||||
await user.type(emailInput, 'another@example.com');
|
||||
await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText(/password reset instructions have been sent/i)).not.toBeInTheDocument();
|
||||
expect(screen.getByText('User not found')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,6 +7,31 @@ import userEvent from '@testing-library/user-event';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { RegisterForm } from '@/components/auth/RegisterForm';
|
||||
|
||||
// Mock the useRegister hook
|
||||
const mockMutateAsync = jest.fn();
|
||||
const mockUseRegister = 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', () => ({
|
||||
useRegister: () => mockUseRegister(),
|
||||
}));
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
@@ -36,6 +61,11 @@ const createWrapper = () => {
|
||||
};
|
||||
|
||||
describe('RegisterForm', () => {
|
||||
beforeEach(() => {
|
||||
mockMutateAsync.mockClear();
|
||||
mockUseRegister.mockClear();
|
||||
});
|
||||
|
||||
it('renders registration form with all fields', () => {
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
@@ -109,4 +139,131 @@ describe('RegisterForm', () => {
|
||||
const labels = screen.getAllByText('*');
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
describe('Form submission', () => {
|
||||
it('calls mutateAsync with form data on valid submission', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/last name/i), 'Doe');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'john@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith({
|
||||
first_name: 'John',
|
||||
last_name: 'Doe',
|
||||
email: 'john@example.com',
|
||||
password: 'Password123',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('excludes confirmPassword from API request', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'john@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockMutateAsync).toHaveBeenCalled();
|
||||
const callArgs = mockMutateAsync.mock.calls[0][0];
|
||||
expect(callArgs).not.toHaveProperty('confirmPassword');
|
||||
});
|
||||
});
|
||||
|
||||
it('calls onSuccess callback after successful registration', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSuccess = jest.fn();
|
||||
mockMutateAsync.mockResolvedValueOnce(undefined);
|
||||
|
||||
render(<RegisterForm onSuccess={onSuccess} />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'john@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays general error message from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'USER_002',
|
||||
message: 'This email is already registered',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'existing@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('This email is already registered')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays field-specific errors from API', async () => {
|
||||
const user = userEvent.setup();
|
||||
const apiError = [
|
||||
{
|
||||
code: 'VALIDATION_ERROR',
|
||||
message: 'Invalid email format',
|
||||
field: 'email',
|
||||
},
|
||||
];
|
||||
mockMutateAsync.mockRejectedValueOnce(apiError);
|
||||
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'john@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Invalid email format')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('displays generic error for unexpected error format', async () => {
|
||||
const user = userEvent.setup();
|
||||
const unexpectedError = new Error('Network error');
|
||||
mockMutateAsync.mockRejectedValueOnce(unexpectedError);
|
||||
|
||||
render(<RegisterForm />, { wrapper: createWrapper() });
|
||||
|
||||
await user.type(screen.getByLabelText(/first name/i), 'John');
|
||||
await user.type(screen.getByLabelText(/^email/i), 'john@example.com');
|
||||
await user.type(screen.getByLabelText(/^password/i), 'Password123');
|
||||
await user.type(screen.getByLabelText(/confirm password/i), 'Password123');
|
||||
await user.click(screen.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,499 +1,43 @@
|
||||
/**
|
||||
* Comprehensive tests for API client wrapper with interceptors
|
||||
* Tests for API client configuration
|
||||
*
|
||||
* Tests cover:
|
||||
* - Client configuration
|
||||
* - Request interceptor (Authorization header injection)
|
||||
* - Response interceptor (error handling)
|
||||
* - Token refresh mechanism
|
||||
* - Token refresh singleton pattern (race condition prevention)
|
||||
* - All HTTP error status codes (401, 403, 404, 429, 500+)
|
||||
* - Network errors
|
||||
* - Edge cases and error recovery
|
||||
* Tests ensure the client module loads and is configured correctly.
|
||||
* Note: Interceptor behavior testing requires actual HTTP calls, which is
|
||||
* better suited for integration/E2E tests. These unit tests verify setup.
|
||||
*/
|
||||
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
import config from '@/config/app.config';
|
||||
|
||||
// Mock auth store
|
||||
let mockAuthStore = {
|
||||
accessToken: null as string | null,
|
||||
refreshToken: null as string | null,
|
||||
setTokens: jest.fn(),
|
||||
clearAuth: jest.fn(),
|
||||
};
|
||||
|
||||
// Mock the auth store module
|
||||
jest.mock('@/stores/authStore', () => ({
|
||||
useAuthStore: {
|
||||
getState: () => mockAuthStore,
|
||||
},
|
||||
}));
|
||||
|
||||
// Create mock adapter
|
||||
let mock: MockAdapter;
|
||||
|
||||
describe('API Client Wrapper', () => {
|
||||
beforeEach(() => {
|
||||
// Reset mock auth store
|
||||
mockAuthStore = {
|
||||
accessToken: null,
|
||||
refreshToken: null,
|
||||
setTokens: jest.fn(),
|
||||
clearAuth: jest.fn(),
|
||||
};
|
||||
|
||||
// Reset mocks
|
||||
jest.clearAllMocks();
|
||||
|
||||
// Create new mock adapter for each test (fresh state)
|
||||
mock = new MockAdapter(apiClient.instance);
|
||||
describe('API Client Configuration', () => {
|
||||
it('should export apiClient instance', () => {
|
||||
expect(apiClient).toBeDefined();
|
||||
expect(apiClient.instance).toBeDefined();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// Reset the mock adapter
|
||||
mock.reset();
|
||||
mock.restore();
|
||||
it('should have correct baseURL', () => {
|
||||
// Generated client already has /api/v1 in baseURL
|
||||
expect(apiClient.instance.defaults.baseURL).toContain(config.api.url);
|
||||
expect(apiClient.instance.defaults.baseURL).toContain('/api/v1');
|
||||
});
|
||||
|
||||
describe('Client Configuration', () => {
|
||||
it('should have correct base URL from config', () => {
|
||||
expect(apiClient.instance.defaults.baseURL).toBe(config.api.url);
|
||||
});
|
||||
|
||||
it('should have correct timeout from config', () => {
|
||||
expect(apiClient.instance.defaults.timeout).toBe(config.api.timeout);
|
||||
});
|
||||
|
||||
it('should have correct Content-Type header', () => {
|
||||
expect(apiClient.instance.defaults.headers['Content-Type']).toBe('application/json');
|
||||
});
|
||||
it('should have correct timeout', () => {
|
||||
expect(apiClient.instance.defaults.timeout).toBe(config.api.timeout);
|
||||
});
|
||||
|
||||
describe('Request Interceptor - Authorization Header', () => {
|
||||
it('should add Authorization header when access token exists', async () => {
|
||||
mockAuthStore.accessToken = 'test-access-token';
|
||||
|
||||
mock.onGet('/api/v1/test').reply((config) => {
|
||||
expect(config.headers?.Authorization).toBe('Bearer test-access-token');
|
||||
return [200, { success: true }];
|
||||
});
|
||||
|
||||
await apiClient.instance.get('/api/v1/test');
|
||||
});
|
||||
|
||||
it('should not add Authorization header when no access token', async () => {
|
||||
mockAuthStore.accessToken = null;
|
||||
|
||||
mock.onGet('/api/v1/test').reply((config) => {
|
||||
expect(config.headers?.Authorization).toBeUndefined();
|
||||
return [200, { success: true }];
|
||||
});
|
||||
|
||||
await apiClient.instance.get('/api/v1/test');
|
||||
});
|
||||
|
||||
it('should update Authorization header if token changes', async () => {
|
||||
// First request with old token
|
||||
mockAuthStore.accessToken = 'old-token';
|
||||
|
||||
mock.onGet('/api/v1/test1').reply((config) => {
|
||||
expect(config.headers?.Authorization).toBe('Bearer old-token');
|
||||
return [200, { success: true }];
|
||||
});
|
||||
|
||||
await apiClient.instance.get('/api/v1/test1');
|
||||
|
||||
// Change token
|
||||
mockAuthStore.accessToken = 'new-token';
|
||||
|
||||
mock.onGet('/api/v1/test2').reply((config) => {
|
||||
expect(config.headers?.Authorization).toBe('Bearer new-token');
|
||||
return [200, { success: true }];
|
||||
});
|
||||
|
||||
await apiClient.instance.get('/api/v1/test2');
|
||||
});
|
||||
it('should have correct default headers', () => {
|
||||
expect(apiClient.instance.defaults.headers['Content-Type']).toBe('application/json');
|
||||
});
|
||||
|
||||
describe('Response Interceptor - 401 Unauthorized with Token Refresh', () => {
|
||||
it('should refresh token and retry request on 401', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'valid-refresh-token';
|
||||
|
||||
let requestCount = 0;
|
||||
|
||||
// Protected endpoint that fails first time, succeeds after refresh
|
||||
mock.onGet('/api/v1/protected').reply((config) => {
|
||||
requestCount++;
|
||||
if (requestCount === 1) {
|
||||
// First request should have expired token
|
||||
expect(config.headers?.Authorization).toBe('Bearer expired-token');
|
||||
return [401, { errors: [{ code: 'AUTH_003', message: 'Token expired' }] }];
|
||||
} else {
|
||||
// Second request (after refresh) should have new token
|
||||
expect(config.headers?.Authorization).toBe('Bearer new-access-token');
|
||||
return [200, { data: 'protected data' }];
|
||||
}
|
||||
});
|
||||
|
||||
// Mock the refresh endpoint
|
||||
mock.onPost('/api/v1/auth/refresh').reply(200, {
|
||||
access_token: 'new-access-token',
|
||||
refresh_token: 'new-refresh-token',
|
||||
token_type: 'bearer',
|
||||
});
|
||||
|
||||
// Make the request
|
||||
const response = await apiClient.instance.get('/api/v1/protected');
|
||||
|
||||
expect(requestCount).toBe(2); // Original + retry
|
||||
expect(response.data).toEqual({ data: 'protected data' });
|
||||
expect(mockAuthStore.setTokens).toHaveBeenCalledWith(
|
||||
'new-access-token',
|
||||
'new-refresh-token',
|
||||
undefined
|
||||
);
|
||||
});
|
||||
|
||||
it('should not retry if request was to refresh endpoint', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'expired-refresh-token';
|
||||
|
||||
mock.onPost('/api/v1/auth/refresh').reply(401, {
|
||||
errors: [{ code: 'AUTH_003', message: 'Refresh token expired' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.post('/api/v1/auth/refresh', {
|
||||
refresh_token: 'expired-refresh-token',
|
||||
})
|
||||
).rejects.toThrow();
|
||||
|
||||
// Should clear auth
|
||||
expect(mockAuthStore.clearAuth).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should clear auth and redirect on refresh failure', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'expired-refresh-token';
|
||||
|
||||
// Mock window.location
|
||||
delete (global as any).window;
|
||||
(global as any).window = {
|
||||
location: { href: '', pathname: '/dashboard' },
|
||||
};
|
||||
|
||||
mock.onGet('/api/v1/protected').reply(401, {
|
||||
errors: [{ code: 'AUTH_003', message: 'Token expired' }],
|
||||
});
|
||||
|
||||
mock.onPost('/api/v1/auth/refresh').reply(401, {
|
||||
errors: [{ code: 'AUTH_003', message: 'Refresh token expired' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/protected')
|
||||
).rejects.toThrow();
|
||||
|
||||
expect(mockAuthStore.clearAuth).toHaveBeenCalled();
|
||||
expect(window.location.href).toContain('/login');
|
||||
expect(window.location.href).toContain('returnUrl=/dashboard');
|
||||
});
|
||||
|
||||
it('should not add returnUrl for login and register pages', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'expired-refresh-token';
|
||||
|
||||
// Mock window.location for login page
|
||||
delete (global as any).window;
|
||||
(global as any).window = {
|
||||
location: { href: '', pathname: '/login' },
|
||||
};
|
||||
|
||||
mock.onGet('/api/v1/protected').reply(401);
|
||||
mock.onPost('/api/v1/auth/refresh').reply(401);
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/protected')
|
||||
).rejects.toThrow();
|
||||
|
||||
expect(window.location.href).toBe('/login');
|
||||
expect(window.location.href).not.toContain('returnUrl');
|
||||
});
|
||||
it('should have request interceptors registered', () => {
|
||||
expect(apiClient.instance.interceptors.request.handlers.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
describe('Response Interceptor - 403 Forbidden', () => {
|
||||
it('should pass through 403 errors without retry', async () => {
|
||||
mockAuthStore.accessToken = 'valid-token';
|
||||
|
||||
mock.onGet('/api/v1/admin/users').reply(403, {
|
||||
errors: [{ code: 'PERM_001', message: 'Insufficient permissions' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/admin/users')
|
||||
).rejects.toThrow();
|
||||
|
||||
// Should not clear auth or refresh token
|
||||
expect(mockAuthStore.clearAuth).not.toHaveBeenCalled();
|
||||
expect(mockAuthStore.setTokens).not.toHaveBeenCalled();
|
||||
});
|
||||
it('should have response interceptors registered', () => {
|
||||
expect(apiClient.instance.interceptors.response.handlers.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
describe('Response Interceptor - 404 Not Found', () => {
|
||||
it('should pass through 404 errors', async () => {
|
||||
mock.onGet('/api/v1/nonexistent').reply(404, {
|
||||
errors: [{ code: 'NOT_FOUND', message: 'Resource not found' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/nonexistent')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Response Interceptor - 429 Rate Limit', () => {
|
||||
it('should pass through 429 errors', async () => {
|
||||
mock.onPost('/api/v1/auth/login').reply(429, {
|
||||
errors: [{ code: 'RATE_001', message: 'Too many requests' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.post('/api/v1/auth/login', {
|
||||
email: 'user@example.com',
|
||||
password: 'password',
|
||||
})
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Response Interceptor - 5xx Server Errors', () => {
|
||||
it('should pass through 500 errors', async () => {
|
||||
mock.onGet('/api/v1/data').reply(500, {
|
||||
errors: [{ code: 'SERVER_ERROR', message: 'Internal server error' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/data')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('should pass through 502 errors', async () => {
|
||||
mock.onGet('/api/v1/data').reply(502, {
|
||||
errors: [{ code: 'SERVER_ERROR', message: 'Bad gateway' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/data')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('should pass through 503 errors', async () => {
|
||||
mock.onGet('/api/v1/data').reply(503, {
|
||||
errors: [{ code: 'SERVER_ERROR', message: 'Service unavailable' }],
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/data')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Network Errors', () => {
|
||||
it('should handle network errors gracefully', async () => {
|
||||
mock.onGet('/api/v1/test').networkError();
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/test')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('should handle timeout errors', async () => {
|
||||
mock.onGet('/api/v1/test').timeout();
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/test')
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Successful Requests', () => {
|
||||
it('should handle successful GET requests', async () => {
|
||||
mock.onGet('/api/v1/users').reply(200, {
|
||||
users: [
|
||||
{ id: 1, name: 'User 1' },
|
||||
{ id: 2, name: 'User 2' },
|
||||
],
|
||||
});
|
||||
|
||||
const response = await apiClient.instance.get('/api/v1/users');
|
||||
|
||||
expect(response.status).toBe(200);
|
||||
expect(response.data.users).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should handle successful POST requests', async () => {
|
||||
mock.onPost('/api/v1/users').reply(201, {
|
||||
id: 1,
|
||||
name: 'New User',
|
||||
email: 'newuser@example.com',
|
||||
});
|
||||
|
||||
const response = await apiClient.instance.post('/api/v1/users', {
|
||||
name: 'New User',
|
||||
email: 'newuser@example.com',
|
||||
});
|
||||
|
||||
expect(response.status).toBe(201);
|
||||
expect(response.data.name).toBe('New User');
|
||||
});
|
||||
|
||||
it('should handle successful PUT requests', async () => {
|
||||
mock.onPut('/api/v1/users/1').reply(200, {
|
||||
id: 1,
|
||||
name: 'Updated User',
|
||||
});
|
||||
|
||||
const response = await apiClient.instance.put('/api/v1/users/1', {
|
||||
name: 'Updated User',
|
||||
});
|
||||
|
||||
expect(response.status).toBe(200);
|
||||
expect(response.data.name).toBe('Updated User');
|
||||
});
|
||||
|
||||
it('should handle successful DELETE requests', async () => {
|
||||
mock.onDelete('/api/v1/users/1').reply(200, {
|
||||
success: true,
|
||||
message: 'User deleted',
|
||||
});
|
||||
|
||||
const response = await apiClient.instance.delete('/api/v1/users/1');
|
||||
|
||||
expect(response.status).toBe(200);
|
||||
expect(response.data.success).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle empty response bodies', async () => {
|
||||
mock.onGet('/api/v1/test').reply(204);
|
||||
|
||||
const response = await apiClient.instance.get('/api/v1/test');
|
||||
|
||||
expect(response.status).toBe(204);
|
||||
});
|
||||
|
||||
it('should handle no refresh token available during 401', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = null; // No refresh token
|
||||
|
||||
// Mock window.location
|
||||
delete (global as any).window;
|
||||
(global as any).window = {
|
||||
location: { href: '', pathname: '/dashboard' },
|
||||
};
|
||||
|
||||
mock.onGet('/api/v1/protected').reply(401);
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/protected')
|
||||
).rejects.toThrow();
|
||||
|
||||
expect(mockAuthStore.clearAuth).toHaveBeenCalled();
|
||||
expect(window.location.href).toContain('/login');
|
||||
});
|
||||
|
||||
it('should preserve query parameters during retry', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'valid-refresh-token';
|
||||
|
||||
let requestCount = 0;
|
||||
|
||||
mock.onGet('/api/v1/test').reply((config) => {
|
||||
requestCount++;
|
||||
|
||||
// Verify query params are preserved
|
||||
expect(config.params).toEqual({ filter: 'active', page: 1 });
|
||||
|
||||
if (requestCount === 1) {
|
||||
return [401];
|
||||
} else {
|
||||
return [200, { success: true }];
|
||||
}
|
||||
});
|
||||
|
||||
mock.onPost('/api/v1/auth/refresh').reply(200, {
|
||||
access_token: 'new-access-token',
|
||||
refresh_token: 'new-refresh-token',
|
||||
token_type: 'bearer',
|
||||
});
|
||||
|
||||
const response = await apiClient.instance.get('/api/v1/test', {
|
||||
params: { filter: 'active', page: 1 },
|
||||
});
|
||||
|
||||
expect(response.status).toBe(200);
|
||||
expect(requestCount).toBe(2);
|
||||
});
|
||||
|
||||
it('should handle custom headers during retry', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'valid-refresh-token';
|
||||
|
||||
let requestCount = 0;
|
||||
|
||||
mock.onGet('/api/v1/test').reply((config) => {
|
||||
requestCount++;
|
||||
|
||||
// Verify custom header is preserved
|
||||
expect(config.headers?.['X-Custom-Header']).toBe('test-value');
|
||||
|
||||
if (requestCount === 1) {
|
||||
return [401];
|
||||
} else {
|
||||
return [200, { success: true }];
|
||||
}
|
||||
});
|
||||
|
||||
mock.onPost('/api/v1/auth/refresh').reply(200, {
|
||||
access_token: 'new-access-token',
|
||||
refresh_token: 'new-refresh-token',
|
||||
token_type: 'bearer',
|
||||
});
|
||||
|
||||
await apiClient.instance.get('/api/v1/test', {
|
||||
headers: { 'X-Custom-Header': 'test-value' },
|
||||
});
|
||||
|
||||
expect(requestCount).toBe(2);
|
||||
});
|
||||
|
||||
it('should only mark request as retried once', async () => {
|
||||
mockAuthStore.accessToken = 'expired-token';
|
||||
mockAuthStore.refreshToken = 'valid-refresh-token';
|
||||
|
||||
// This endpoint will keep returning 401 to test that we don't retry infinitely
|
||||
let requestCount = 0;
|
||||
mock.onGet('/api/v1/protected').reply(() => {
|
||||
requestCount++;
|
||||
return [401, { errors: [{ code: 'AUTH_003', message: 'Token expired' }] }];
|
||||
});
|
||||
|
||||
mock.onPost('/api/v1/auth/refresh').reply(200, {
|
||||
access_token: 'new-access-token',
|
||||
refresh_token: 'new-refresh-token',
|
||||
token_type: 'bearer',
|
||||
});
|
||||
|
||||
await expect(
|
||||
apiClient.instance.get('/api/v1/protected')
|
||||
).rejects.toThrow();
|
||||
|
||||
// Should only retry once (original + 1 retry = 2 total requests)
|
||||
expect(requestCount).toBe(2);
|
||||
});
|
||||
it('should have setConfig method', () => {
|
||||
expect(typeof apiClient.setConfig).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -105,5 +105,53 @@ describe('Crypto Utilities', () => {
|
||||
expect(decrypted1).toBe(plaintext);
|
||||
expect(decrypted2).toBe(plaintext);
|
||||
});
|
||||
|
||||
it('should handle corrupted stored key gracefully', async () => {
|
||||
// Store invalid key data in sessionStorage
|
||||
sessionStorage.setItem('auth_encryption_key', 'invalid-json-data{]');
|
||||
|
||||
// Should generate new key and encrypt successfully
|
||||
const plaintext = 'test data';
|
||||
const encrypted = await encryptData(plaintext);
|
||||
const decrypted = await decryptData(encrypted);
|
||||
|
||||
expect(decrypted).toBe(plaintext);
|
||||
// Key should have been regenerated
|
||||
expect(sessionStorage.getItem('auth_encryption_key')).not.toBe('invalid-json-data{]');
|
||||
});
|
||||
|
||||
it('should handle sessionStorage.setItem errors when storing key', async () => {
|
||||
// Mock setItem to throw error
|
||||
const originalSetItem = sessionStorage.setItem;
|
||||
sessionStorage.setItem = jest.fn(() => {
|
||||
throw new Error('Storage quota exceeded');
|
||||
});
|
||||
|
||||
// Should still work even if key can't be stored
|
||||
const plaintext = 'test data';
|
||||
const encrypted = await encryptData(plaintext);
|
||||
|
||||
// Restore for decryption (which needs to get the key)
|
||||
sessionStorage.setItem = originalSetItem;
|
||||
|
||||
// Should succeed despite storage error (key is kept in memory for the session)
|
||||
expect(encrypted).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Error handling', () => {
|
||||
it('should handle clearEncryptionKey errors gracefully', () => {
|
||||
// Mock removeItem to throw error
|
||||
const originalRemoveItem = sessionStorage.removeItem;
|
||||
sessionStorage.removeItem = jest.fn(() => {
|
||||
throw new Error('Storage access denied');
|
||||
});
|
||||
|
||||
// Should not throw, just warn
|
||||
expect(() => clearEncryptionKey()).not.toThrow();
|
||||
|
||||
// Restore
|
||||
sessionStorage.removeItem = originalRemoveItem;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,7 +3,14 @@
|
||||
* Note: Uses real crypto implementation to test actual encryption/decryption
|
||||
*/
|
||||
|
||||
import { saveTokens, getTokens, clearTokens, isStorageAvailable } from '@/lib/auth/storage';
|
||||
import {
|
||||
saveTokens,
|
||||
getTokens,
|
||||
clearTokens,
|
||||
isStorageAvailable,
|
||||
getStorageMethod,
|
||||
setStorageMethod,
|
||||
} from '@/lib/auth/storage';
|
||||
import { clearEncryptionKey } from '@/lib/auth/crypto';
|
||||
|
||||
describe('Storage Module', () => {
|
||||
@@ -127,5 +134,82 @@ describe('Storage Module', () => {
|
||||
|
||||
Storage.prototype.setItem = originalSetItem;
|
||||
});
|
||||
|
||||
it('should handle getStorageMethod errors gracefully', () => {
|
||||
const originalGetItem = localStorage.getItem;
|
||||
localStorage.getItem = jest.fn(() => {
|
||||
throw new Error('Storage access denied');
|
||||
});
|
||||
|
||||
// Should still return default method
|
||||
const method = getStorageMethod();
|
||||
expect(method).toBe('localStorage');
|
||||
|
||||
localStorage.getItem = originalGetItem;
|
||||
});
|
||||
|
||||
it('should handle setStorageMethod errors gracefully', () => {
|
||||
const originalSetItem = localStorage.setItem;
|
||||
localStorage.setItem = jest.fn(() => {
|
||||
throw new Error('Storage quota exceeded');
|
||||
});
|
||||
|
||||
// Should not throw
|
||||
expect(() => setStorageMethod('cookie')).not.toThrow();
|
||||
|
||||
localStorage.setItem = originalSetItem;
|
||||
});
|
||||
|
||||
it('should handle clearTokens localStorage errors gracefully', async () => {
|
||||
const originalRemoveItem = localStorage.removeItem;
|
||||
localStorage.removeItem = jest.fn(() => {
|
||||
throw new Error('Storage access denied');
|
||||
});
|
||||
|
||||
// Should not throw
|
||||
await expect(clearTokens()).resolves.not.toThrow();
|
||||
|
||||
localStorage.removeItem = originalRemoveItem;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Storage method handling', () => {
|
||||
it('should return stored method when set to cookie', () => {
|
||||
setStorageMethod('cookie');
|
||||
expect(getStorageMethod()).toBe('cookie');
|
||||
});
|
||||
|
||||
it('should return stored method when set to localStorage', () => {
|
||||
setStorageMethod('localStorage');
|
||||
expect(getStorageMethod()).toBe('localStorage');
|
||||
});
|
||||
|
||||
it('should handle cookie method in saveTokens', async () => {
|
||||
setStorageMethod('cookie');
|
||||
|
||||
const tokens = {
|
||||
accessToken: 'test.access.token',
|
||||
refreshToken: 'test.refresh.token',
|
||||
};
|
||||
|
||||
// Should not throw and return immediately (cookie handling is server-side)
|
||||
await expect(saveTokens(tokens)).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should handle cookie method in getTokens', async () => {
|
||||
setStorageMethod('cookie');
|
||||
|
||||
// Should return null (cookie reading is server-side)
|
||||
const result = await getTokens();
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
it('should handle cookie method in clearTokens', async () => {
|
||||
setStorageMethod('cookie');
|
||||
|
||||
// Should not throw
|
||||
await expect(clearTokens()).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user