Add comprehensive tests for authentication, settings, and password reset pages

- Introduced smoke tests for Login, Register, Password Reset, Password Reset Confirm, and Settings pages.
- Enhanced test coverage for all dynamic imports using mocks and added Jest exclusions for non-testable Next.js files.
- Added component-specific test files for better structure and maintainability.
- Improved test isolation by mocking navigation, providers, and rendering contexts.
This commit is contained in:
2025-11-02 17:33:57 +01:00
parent 77594e478d
commit fded54e61a
23 changed files with 599 additions and 2 deletions

View File

@@ -0,0 +1,37 @@
/**
* Tests for Login Page
* Smoke tests to verify page structure and component rendering
*/
import { render, screen } from '@testing-library/react';
import LoginPage from '@/app/(auth)/login/page';
// Mock dynamic import
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (importFn: () => Promise<any>, options?: any) => {
const Component = () => <div data-testid="login-form">Mocked LoginForm</div>;
Component.displayName = 'LoginForm';
return Component;
},
}));
describe('LoginPage', () => {
it('renders without crashing', () => {
render(<LoginPage />);
expect(screen.getByText('Sign in to your account')).toBeInTheDocument();
});
it('renders heading and description', () => {
render(<LoginPage />);
expect(screen.getByRole('heading', { name: /sign in to your account/i })).toBeInTheDocument();
expect(screen.getByText(/access your dashboard and manage your account/i)).toBeInTheDocument();
});
it('renders LoginForm component', () => {
render(<LoginPage />);
expect(screen.getByTestId('login-form')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,164 @@
/**
* Tests for Password Reset Confirm Content Component
* Verifies token validation and form rendering
*/
import { render, screen, act } from '@testing-library/react';
import { useSearchParams, useRouter } from 'next/navigation';
import PasswordResetConfirmContent from '@/app/(auth)/password-reset/confirm/PasswordResetConfirmContent';
// Mock Next.js navigation
jest.mock('next/navigation', () => ({
useSearchParams: jest.fn(),
useRouter: jest.fn(),
default: jest.fn(),
}));
// Mock Next.js Link
jest.mock('next/link', () => ({
__esModule: true,
default: ({ children, href }: { children: React.ReactNode; href: string }) => (
<a href={href}>{children}</a>
),
}));
// Mock dynamic import
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (importFn: () => Promise<any>, options?: any) => {
const Component = ({ onSuccess }: { onSuccess?: () => void }) => (
<div data-testid="password-reset-confirm-form">
<button onClick={onSuccess}>Submit</button>
</div>
);
Component.displayName = 'PasswordResetConfirmForm';
return Component;
},
}));
// Mock Alert component
jest.mock('@/components/ui/alert', () => ({
Alert: ({ children }: { children: React.ReactNode }) => (
<div data-testid="alert">{children}</div>
),
}));
describe('PasswordResetConfirmContent', () => {
let mockPush: jest.Mock;
beforeEach(() => {
jest.clearAllMocks();
jest.useFakeTimers();
mockPush = jest.fn();
(useRouter as jest.Mock).mockReturnValue({
push: mockPush,
});
});
afterEach(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
});
describe('With valid token', () => {
beforeEach(() => {
(useSearchParams as jest.Mock).mockReturnValue({
get: jest.fn((key: string) => (key === 'token' ? 'valid-token-123' : null)),
});
});
it('renders without crashing', () => {
render(<PasswordResetConfirmContent />);
expect(screen.getByText('Set new password')).toBeInTheDocument();
});
it('renders heading and description', () => {
render(<PasswordResetConfirmContent />);
expect(screen.getByRole('heading', { name: /set new password/i })).toBeInTheDocument();
expect(screen.getByText(/choose a strong password/i)).toBeInTheDocument();
});
it('renders PasswordResetConfirmForm with token', () => {
render(<PasswordResetConfirmContent />);
expect(screen.getByTestId('password-reset-confirm-form')).toBeInTheDocument();
});
it('redirects to login after successful password reset', () => {
render(<PasswordResetConfirmContent />);
const submitButton = screen.getByRole('button', { name: /submit/i });
// Trigger success handler
act(() => {
submitButton.click();
});
// Fast-forward time by 3 seconds
act(() => {
jest.advanceTimersByTime(3000);
});
expect(mockPush).toHaveBeenCalledWith('/login');
});
it('cleans up timeout on unmount', () => {
const { unmount } = render(<PasswordResetConfirmContent />);
const submitButton = screen.getByRole('button', { name: /submit/i });
// Trigger success handler
act(() => {
submitButton.click();
});
// Unmount before timeout fires
unmount();
// Fast-forward time
act(() => {
jest.advanceTimersByTime(3000);
});
// Should not redirect because component was unmounted
expect(mockPush).not.toHaveBeenCalled();
});
});
describe('Without token', () => {
beforeEach(() => {
(useSearchParams as jest.Mock).mockReturnValue({
get: jest.fn(() => null),
});
});
it('shows invalid reset link error', () => {
render(<PasswordResetConfirmContent />);
expect(screen.getByRole('heading', { name: /invalid reset link/i })).toBeInTheDocument();
expect(screen.getByTestId('alert')).toBeInTheDocument();
});
it('shows error message', () => {
render(<PasswordResetConfirmContent />);
expect(screen.getByText(/this password reset link is invalid or has expired/i)).toBeInTheDocument();
});
it('shows link to request new reset', () => {
render(<PasswordResetConfirmContent />);
const link = screen.getByRole('link', { name: /request new reset link/i });
expect(link).toBeInTheDocument();
expect(link).toHaveAttribute('href', '/password-reset');
});
it('does not render form when token is missing', () => {
render(<PasswordResetConfirmContent />);
expect(screen.queryByTestId('password-reset-confirm-form')).not.toBeInTheDocument();
});
});
});

View File

@@ -0,0 +1,26 @@
/**
* Tests for Password Reset Confirm Page
* Verifies Suspense wrapper and fallback
*/
import { render, screen } from '@testing-library/react';
import PasswordResetConfirmPage from '@/app/(auth)/password-reset/confirm/page';
// Mock the content component
jest.mock('@/app/(auth)/password-reset/confirm/PasswordResetConfirmContent', () => ({
__esModule: true,
default: () => <div data-testid="password-reset-confirm-content">Content</div>,
}));
describe('PasswordResetConfirmPage', () => {
it('renders without crashing', () => {
render(<PasswordResetConfirmPage />);
expect(screen.getByTestId('password-reset-confirm-content')).toBeInTheDocument();
});
it('wraps content in Suspense boundary', () => {
render(<PasswordResetConfirmPage />);
// Content should render successfully (not fallback)
expect(screen.getByTestId('password-reset-confirm-content')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,37 @@
/**
* Tests for Password Reset Page
* Smoke tests to verify page structure and component rendering
*/
import { render, screen } from '@testing-library/react';
import PasswordResetPage from '@/app/(auth)/password-reset/page';
// Mock dynamic import
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (importFn: () => Promise<any>, options?: any) => {
const Component = () => <div data-testid="password-reset-form">Mocked PasswordResetRequestForm</div>;
Component.displayName = 'PasswordResetRequestForm';
return Component;
},
}));
describe('PasswordResetPage', () => {
it('renders without crashing', () => {
render(<PasswordResetPage />);
expect(screen.getByText('Reset your password')).toBeInTheDocument();
});
it('renders heading and description', () => {
render(<PasswordResetPage />);
expect(screen.getByRole('heading', { name: /reset your password/i })).toBeInTheDocument();
expect(screen.getByText(/we'll send you an email with instructions/i)).toBeInTheDocument();
});
it('renders PasswordResetRequestForm component', () => {
render(<PasswordResetPage />);
expect(screen.getByTestId('password-reset-form')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,37 @@
/**
* Tests for Register Page
* Smoke tests to verify page structure and component rendering
*/
import { render, screen } from '@testing-library/react';
import RegisterPage from '@/app/(auth)/register/page';
// Mock dynamic import
jest.mock('next/dynamic', () => ({
__esModule: true,
default: (importFn: () => Promise<any>, options?: any) => {
const Component = () => <div data-testid="register-form">Mocked RegisterForm</div>;
Component.displayName = 'RegisterForm';
return Component;
},
}));
describe('RegisterPage', () => {
it('renders without crashing', () => {
render(<RegisterPage />);
expect(screen.getByText('Create your account')).toBeInTheDocument();
});
it('renders heading and description', () => {
render(<RegisterPage />);
expect(screen.getByRole('heading', { name: /create your account/i })).toBeInTheDocument();
expect(screen.getByText(/get started with your free account today/i)).toBeInTheDocument();
});
it('renders RegisterForm component', () => {
render(<RegisterPage />);
expect(screen.getByTestId('register-form')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,25 @@
/**
* Tests for Settings Index Page
* Verifies redirect behavior
*/
import { redirect } from 'next/navigation';
import SettingsPage from '@/app/(authenticated)/settings/page';
// Mock Next.js navigation - redirect throws to interrupt execution
jest.mock('next/navigation', () => ({
redirect: jest.fn(() => {
throw new Error('NEXT_REDIRECT');
}),
}));
describe('SettingsPage', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('redirects to /settings/profile', () => {
expect(() => SettingsPage()).toThrow('NEXT_REDIRECT');
expect(redirect).toHaveBeenCalledWith('/settings/profile');
});
});

View File

@@ -0,0 +1,26 @@
/**
* Tests for Password Settings Page
* Smoke tests for placeholder page
*/
import { render, screen } from '@testing-library/react';
import PasswordSettingsPage from '@/app/(authenticated)/settings/password/page';
describe('PasswordSettingsPage', () => {
it('renders without crashing', () => {
render(<PasswordSettingsPage />);
expect(screen.getByText('Password Settings')).toBeInTheDocument();
});
it('renders heading', () => {
render(<PasswordSettingsPage />);
expect(screen.getByRole('heading', { name: /password settings/i })).toBeInTheDocument();
});
it('shows placeholder text', () => {
render(<PasswordSettingsPage />);
expect(screen.getByText(/change your password/i)).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,26 @@
/**
* Tests for Preferences Page
* Smoke tests for placeholder page
*/
import { render, screen } from '@testing-library/react';
import PreferencesPage from '@/app/(authenticated)/settings/preferences/page';
describe('PreferencesPage', () => {
it('renders without crashing', () => {
render(<PreferencesPage />);
expect(screen.getByText('Preferences')).toBeInTheDocument();
});
it('renders heading', () => {
render(<PreferencesPage />);
expect(screen.getByRole('heading', { name: /^preferences$/i })).toBeInTheDocument();
});
it('shows placeholder text', () => {
render(<PreferencesPage />);
expect(screen.getByText(/configure your preferences/i)).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,26 @@
/**
* Tests for Profile Settings Page
* Smoke tests for placeholder page
*/
import { render, screen } from '@testing-library/react';
import ProfileSettingsPage from '@/app/(authenticated)/settings/profile/page';
describe('ProfileSettingsPage', () => {
it('renders without crashing', () => {
render(<ProfileSettingsPage />);
expect(screen.getByText('Profile Settings')).toBeInTheDocument();
});
it('renders heading', () => {
render(<ProfileSettingsPage />);
expect(screen.getByRole('heading', { name: /profile settings/i })).toBeInTheDocument();
});
it('shows placeholder text', () => {
render(<ProfileSettingsPage />);
expect(screen.getByText(/manage your profile information/i)).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,26 @@
/**
* Tests for Sessions Page
* Smoke tests for placeholder page
*/
import { render, screen } from '@testing-library/react';
import SessionsPage from '@/app/(authenticated)/settings/sessions/page';
describe('SessionsPage', () => {
it('renders without crashing', () => {
render(<SessionsPage />);
expect(screen.getByText('Active Sessions')).toBeInTheDocument();
});
it('renders heading', () => {
render(<SessionsPage />);
expect(screen.getByRole('heading', { name: /active sessions/i })).toBeInTheDocument();
});
it('shows placeholder text', () => {
render(<SessionsPage />);
expect(screen.getByText(/manage your active sessions/i)).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,70 @@
/**
* Tests for Home Page
* Smoke tests for static content
*/
import { render, screen } from '@testing-library/react';
import Home from '@/app/page';
// Mock Next.js Image component
jest.mock('next/image', () => ({
__esModule: true,
default: (props: any) => {
// eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
return <img {...props} />;
},
}));
describe('HomePage', () => {
it('renders without crashing', () => {
render(<Home />);
expect(screen.getByText(/get started by editing/i)).toBeInTheDocument();
});
it('renders Next.js logo', () => {
render(<Home />);
const logo = screen.getByAltText('Next.js logo');
expect(logo).toBeInTheDocument();
expect(logo).toHaveAttribute('src', '/next.svg');
});
it('renders Vercel logo', () => {
render(<Home />);
const logo = screen.getByAltText('Vercel logomark');
expect(logo).toBeInTheDocument();
expect(logo).toHaveAttribute('src', '/vercel.svg');
});
it('has correct external links', () => {
render(<Home />);
const deployLink = screen.getByRole('link', { name: /deploy now/i });
expect(deployLink).toHaveAttribute('href', expect.stringContaining('vercel.com'));
expect(deployLink).toHaveAttribute('target', '_blank');
expect(deployLink).toHaveAttribute('rel', 'noopener noreferrer');
const docsLink = screen.getByRole('link', { name: /read our docs/i });
expect(docsLink).toHaveAttribute('href', expect.stringContaining('nextjs.org/docs'));
expect(docsLink).toHaveAttribute('target', '_blank');
});
it('renders footer links', () => {
render(<Home />);
expect(screen.getByRole('link', { name: /learn/i })).toBeInTheDocument();
expect(screen.getByRole('link', { name: /examples/i })).toBeInTheDocument();
expect(screen.getByRole('link', { name: /go to nextjs\.org/i })).toBeInTheDocument();
});
it('has accessible image alt texts', () => {
render(<Home />);
expect(screen.getByAltText('Next.js logo')).toBeInTheDocument();
expect(screen.getByAltText('Vercel logomark')).toBeInTheDocument();
expect(screen.getByAltText('File icon')).toBeInTheDocument();
expect(screen.getByAltText('Window icon')).toBeInTheDocument();
expect(screen.getByAltText('Globe icon')).toBeInTheDocument();
});
});

View File

@@ -0,0 +1,79 @@
/**
* Tests for Providers Component
* Verifies React Query and Theme providers are configured correctly
*/
import { render, screen } from '@testing-library/react';
import { Providers } from '@/app/providers';
// Mock components
jest.mock('@/components/theme', () => ({
ThemeProvider: ({ children }: { children: React.ReactNode }) => (
<div data-testid="theme-provider">{children}</div>
),
}));
jest.mock('@/components/auth', () => ({
AuthInitializer: () => <div data-testid="auth-initializer" />,
}));
// Mock TanStack Query
jest.mock('@tanstack/react-query', () => ({
QueryClient: jest.fn().mockImplementation(() => ({})),
QueryClientProvider: ({ children }: { children: React.ReactNode }) => (
<div data-testid="query-provider">{children}</div>
),
}));
describe('Providers', () => {
it('renders without crashing', () => {
render(
<Providers>
<div>Test Content</div>
</Providers>
);
expect(screen.getByText('Test Content')).toBeInTheDocument();
});
it('wraps children with ThemeProvider', () => {
render(
<Providers>
<div>Test Content</div>
</Providers>
);
expect(screen.getByTestId('theme-provider')).toBeInTheDocument();
});
it('wraps children with QueryClientProvider', () => {
render(
<Providers>
<div>Test Content</div>
</Providers>
);
expect(screen.getByTestId('query-provider')).toBeInTheDocument();
});
it('renders AuthInitializer', () => {
render(
<Providers>
<div>Test Content</div>
</Providers>
);
expect(screen.getByTestId('auth-initializer')).toBeInTheDocument();
});
it('renders children', () => {
render(
<Providers>
<div data-testid="test-child">Child Component</div>
</Providers>
);
expect(screen.getByTestId('test-child')).toBeInTheDocument();
expect(screen.getByText('Child Component')).toBeInTheDocument();
});
});