= {}): Rental => ({
+ id: 'rental-1',
+ itemId: 'item-1',
+ renterId: 'renter-1',
+ ownerId: 'user-1',
+ status: 'completed',
+ startDateTime: new Date().toISOString(),
+ endDateTime: new Date().toISOString(),
+ totalAmount: '100.00',
+ item: { id: 'item-1', name: 'Test Item' },
+ ...overrides,
+});
+
+const renderWithRouter = (ui: React.ReactElement) => {
+ return render({ui});
+};
+
+describe('Profile Page', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseAuth.mockReturnValue({
+ user: mockUser,
+ updateUser: vi.fn(),
+ logout: vi.fn(),
+ });
+ mockUserAPI.getProfile.mockResolvedValue({ data: createMockProfile() });
+ mockUserAPI.getAvailability.mockResolvedValue({
+ data: {
+ generalAvailableAfter: '09:00',
+ generalAvailableBefore: '17:00',
+ specifyTimesPerDay: false,
+ weeklyTimes: {},
+ },
+ });
+ mockItemAPI.getItems.mockResolvedValue({ data: [] });
+ mockRentalAPI.getListings.mockResolvedValue({ data: [] });
+ mockRentalAPI.getRentals.mockResolvedValue({ data: [] });
+ mockAddressAPI.getAddresses.mockResolvedValue({ data: [] });
+ mockConditionCheckAPI.getBatchConditionChecks.mockResolvedValue({ data: [] });
+ });
+
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe('Loading State', () => {
+ it('shows loading spinner while fetching profile', () => {
+ mockUserAPI.getProfile.mockImplementation(() => new Promise(() => {}));
+
+ renderWithRouter();
+
+ expect(screen.getByRole('status')).toBeInTheDocument();
+ });
+ });
+
+ describe('Error Handling', () => {
+ it('displays error message on profile fetch failure', async () => {
+ mockUserAPI.getProfile.mockRejectedValue({
+ response: { data: { message: 'Failed to fetch profile' } },
+ });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByRole('alert')).toHaveTextContent('Failed to fetch profile');
+ });
+ });
+ });
+
+ describe('Profile Display', () => {
+ it('loads and displays profile data', async () => {
+ const profile = createMockProfile({ firstName: 'John', lastName: 'Doe' });
+ mockUserAPI.getProfile.mockResolvedValue({ data: profile });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+ });
+
+ it('displays user avatar', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('avatar')).toBeInTheDocument();
+ });
+ });
+
+ it('displays user statistics', async () => {
+ const items = [{ id: 'item-1', ownerId: 'user-1', name: 'Camera' }];
+ mockItemAPI.getItems.mockResolvedValue({ data: { items } });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText(/Items Listed/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Tab Navigation', () => {
+ it('displays all profile tabs', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ // Use getAllByRole to find tab buttons specifically
+ const buttons = screen.getAllByRole('button');
+ const tabTexts = buttons.map(b => b.textContent?.trim());
+ expect(tabTexts).toContain('Overview');
+ expect(tabTexts).toContain('Owner Settings');
+ expect(tabTexts).toContain('Notification Preferences');
+ expect(tabTexts).toContain('Rental History');
+ expect(tabTexts).toContain('Security');
+ });
+ });
+
+ it('switches tabs on click', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ const buttons = screen.getAllByRole('button');
+ const securityTab = buttons.find(b => b.textContent?.includes('Security'));
+ expect(securityTab).toBeInTheDocument();
+ });
+
+ const buttons = screen.getAllByRole('button');
+ const securityTab = buttons.find(b => b.textContent?.includes('Security'));
+ fireEvent.click(securityTab!);
+
+ await waitFor(() => {
+ // Look for the heading specifically
+ expect(screen.getByRole('heading', { name: /Change Password/i })).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Profile Editing', () => {
+ // Helper to show personal info section (it's hidden by default)
+ const showPersonalInfo = async (container: HTMLElement) => {
+ await waitFor(() => {
+ expect(screen.getByText('Personal Information')).toBeInTheDocument();
+ });
+ // Click the eye icon button to show personal info
+ const eyeButton = container.querySelector('.bi-eye-slash')?.closest('button');
+ expect(eyeButton).toBeInTheDocument();
+ fireEvent.click(eyeButton!);
+ };
+
+ it('toggles edit mode when Edit Information is clicked', async () => {
+ const { container } = renderWithRouter();
+
+ await showPersonalInfo(container);
+
+ await waitFor(() => {
+ expect(screen.getByText('Edit Information')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Edit Information'));
+
+ await waitFor(() => {
+ expect(screen.getByText('Cancel')).toBeInTheDocument();
+ });
+ });
+
+ it('saves profile changes via API', async () => {
+ mockUserAPI.updateProfile.mockResolvedValue({
+ data: createMockProfile({ firstName: 'Updated' }),
+ });
+
+ const { container } = renderWithRouter();
+
+ await showPersonalInfo(container);
+
+ await waitFor(() => {
+ expect(screen.getByText('Edit Information')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Edit Information'));
+
+ await waitFor(() => {
+ expect(screen.getByLabelText('First Name')).toBeInTheDocument();
+ });
+
+ const firstNameInput = screen.getByLabelText('First Name');
+ fireEvent.change(firstNameInput, { target: { value: 'Updated' } });
+
+ fireEvent.click(screen.getByText('Save Changes'));
+
+ await waitFor(() => {
+ expect(mockUserAPI.updateProfile).toHaveBeenCalled();
+ });
+ });
+
+ it('cancels edit and resets form', async () => {
+ const profile = createMockProfile({ firstName: 'Original' });
+ mockUserAPI.getProfile.mockResolvedValue({ data: profile });
+
+ const { container } = renderWithRouter();
+
+ await showPersonalInfo(container);
+
+ await waitFor(() => {
+ expect(screen.getByText('Edit Information')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Edit Information'));
+
+ await waitFor(() => {
+ expect(screen.getByLabelText('First Name')).toBeInTheDocument();
+ });
+
+ const firstNameInput = screen.getByLabelText('First Name');
+ fireEvent.change(firstNameInput, { target: { value: 'Changed' } });
+
+ fireEvent.click(screen.getByText('Cancel'));
+
+ // Should reset to original and exit edit mode
+ await waitFor(() => {
+ expect(screen.getByText('Edit Information')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Profile Image Upload', () => {
+ it('allows profile image upload', async () => {
+ const { container } = renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Personal Information')).toBeInTheDocument();
+ });
+ // Click the eye icon button to show personal info
+ const eyeButton = container.querySelector('.bi-eye-slash')?.closest('button');
+ fireEvent.click(eyeButton!);
+
+ await waitFor(() => {
+ expect(screen.getByText('Edit Information')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Edit Information'));
+
+ await waitFor(() => {
+ // Should show image upload button in edit mode
+ expect(screen.getByText(/Change/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Address Management', () => {
+ // Helper to show personal info section (hidden by default for privacy)
+ const showPersonalInfoSection = async (container: HTMLElement) => {
+ await waitFor(() => {
+ expect(screen.getByText('Personal Information')).toBeInTheDocument();
+ });
+ // Click the eye icon button to show personal info
+ const eyeButton = container.querySelector('.bi-eye-slash')?.closest('button');
+ expect(eyeButton).toBeInTheDocument();
+ fireEvent.click(eyeButton!);
+ };
+
+ it('lists saved addresses', async () => {
+ const addresses = [createMockAddress({ address1: '123 Main St' })];
+ mockAddressAPI.getAddresses.mockResolvedValue({ data: addresses });
+
+ const { container } = renderWithRouter();
+
+ // Addresses are in Overview but hidden in Personal Info section
+ await showPersonalInfoSection(container);
+
+ await waitFor(
+ () => {
+ expect(screen.getByText(/123 Main St/)).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+ });
+
+ it('shows add address button', async () => {
+ const { container } = renderWithRouter();
+
+ // Addresses are in Overview but hidden in Personal Info section
+ await showPersonalInfoSection(container);
+
+ await waitFor(
+ () => {
+ expect(screen.getByText('Add New Address')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+ });
+
+ it('opens add address form', async () => {
+ const { container } = renderWithRouter();
+
+ // Addresses are in Overview but hidden in Personal Info section
+ await showPersonalInfoSection(container);
+
+ await waitFor(
+ () => {
+ expect(screen.getByText('Add New Address')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+
+ fireEvent.click(screen.getByText('Add New Address'));
+
+ await waitFor(
+ () => {
+ expect(screen.getByText('Save Address')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+ });
+ });
+
+ describe('Availability Settings', () => {
+ it('displays availability settings in Owner Settings tab', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Owner Settings')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Owner Settings'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('availability-settings')).toBeInTheDocument();
+ });
+ });
+
+ it('saves availability preferences', async () => {
+ mockUserAPI.updateAvailability.mockResolvedValue({ data: {} });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Owner Settings')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Owner Settings'));
+
+ await waitFor(
+ () => {
+ expect(screen.getByTestId('availability-settings')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+
+ // Use getAllByText since there may be multiple matching elements
+ const saveButtons = screen.getAllByText('Save Availability');
+ fireEvent.click(saveButtons[0]);
+
+ // The mock component doesn't actually call the API, but in real usage it would
+ });
+ });
+
+ describe('Notification Preferences', () => {
+ it('displays notification settings', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Notification Preferences')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Notification Preferences'));
+
+ await waitFor(() => {
+ expect(screen.getByText(/Item Request Notification/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Security Tab', () => {
+ it('displays password change form', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Security')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Security'));
+
+ await waitFor(
+ () => {
+ // Use heading role to be specific about which "Change Password" we want
+ expect(screen.getByRole('heading', { name: /Change Password/i })).toBeInTheDocument();
+ expect(screen.getByLabelText(/Current Password/i)).toBeInTheDocument();
+ // Use exact label match to avoid matching multiple elements
+ expect(screen.getByLabelText('New Password')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+ });
+
+ it('shows two-factor management section', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Security')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Security'));
+
+ await waitFor(
+ () => {
+ expect(screen.getByTestId('two-factor-management')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+ });
+
+ it('validates password requirements', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Security')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Security'));
+
+ await waitFor(
+ () => {
+ // Use exact label match to avoid matching "Confirm New Password"
+ expect(screen.getByLabelText('New Password')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+
+ const newPasswordInput = screen.getByLabelText('New Password');
+ fireEvent.change(newPasswordInput, { target: { value: 'weak' } });
+
+ await waitFor(() => {
+ expect(screen.getByTestId('password-strength')).toHaveTextContent('Weak');
+ });
+ });
+
+ it('shows strong when password meets requirements', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Security')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Security'));
+
+ await waitFor(
+ () => {
+ // Use exact label match to avoid matching "Confirm New Password"
+ expect(screen.getByLabelText('New Password')).toBeInTheDocument();
+ },
+ { timeout: 3000 }
+ );
+
+ const newPasswordInput = screen.getByLabelText('New Password');
+ fireEvent.change(newPasswordInput, { target: { value: 'StrongPassword123!' } });
+
+ await waitFor(() => {
+ expect(screen.getByTestId('password-strength')).toHaveTextContent('Strong');
+ });
+ });
+ });
+
+ describe('Rental History', () => {
+ it('displays rental history tab', async () => {
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Rental History')).toBeInTheDocument();
+ });
+ });
+
+ it('shows past rentals', async () => {
+ const rentals = [
+ createMockRental({
+ status: 'completed',
+ item: { id: 'item-1', name: 'Camera' },
+ }),
+ ];
+ mockRentalAPI.getRentals.mockResolvedValue({ data: rentals });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Rental History')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Rental History'));
+
+ await waitFor(() => {
+ expect(screen.getByText('Camera')).toBeInTheDocument();
+ });
+ });
+
+ it('shows empty state when no rental history', async () => {
+ mockRentalAPI.getRentals.mockResolvedValue({ data: [] });
+ mockRentalAPI.getListings.mockResolvedValue({ data: [] });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Rental History')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Rental History'));
+
+ await waitFor(() => {
+ expect(screen.getByText(/No rental history/i)).toBeInTheDocument();
+ });
+ });
+ });
+});
diff --git a/frontend/src/__tests__/pages/PublicProfile.test.tsx b/frontend/src/__tests__/pages/PublicProfile.test.tsx
new file mode 100644
index 0000000..978831c
--- /dev/null
+++ b/frontend/src/__tests__/pages/PublicProfile.test.tsx
@@ -0,0 +1,558 @@
+/**
+ * PublicProfile Page Tests
+ *
+ * Tests for the PublicProfile page that displays
+ * a user's public profile information and items.
+ */
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { MemoryRouter, Routes, Route } from 'react-router';
+import PublicProfile from '../../pages/PublicProfile';
+import { User, Item } from '../../types';
+
+// Mock the API
+vi.mock('../../services/api', () => ({
+ userAPI: {
+ getPublicProfile: vi.fn(),
+ adminBanUser: vi.fn(),
+ adminUnbanUser: vi.fn(),
+ },
+ itemAPI: {
+ getItems: vi.fn(),
+ },
+}));
+
+// Mock upload service
+vi.mock('../../services/uploadService', () => ({
+ getImageUrl: vi.fn((filename: string) => `https://cdn.example.com/${filename}`),
+}));
+
+// Mock components
+vi.mock('../../components/ChatWindow', () => ({
+ default: function MockChatWindow({
+ show,
+ onClose,
+ recipient,
+ }: {
+ show: boolean;
+ onClose: () => void;
+ recipient: User;
+ }) {
+ if (!show) return null;
+ return (
+
+ Chat with {recipient.firstName}
+
+
+ );
+ },
+}));
+
+vi.mock('../../components/Avatar', () => ({
+ default: function MockAvatar({ user }: { user: User }) {
+ return (
+ {user?.firstName?.[0] || '?'}
+ );
+ },
+}));
+
+vi.mock('../../components/BanUserModal', () => ({
+ default: function MockBanUserModal({
+ show,
+ onHide,
+ user,
+ onBanComplete,
+ }: {
+ show: boolean;
+ onHide: () => void;
+ user: User;
+ onBanComplete: (user: User) => void;
+ }) {
+ if (!show) return null;
+ return (
+
+ Ban {user.firstName}
+
+
+
+ );
+ },
+}));
+
+vi.mock('../../components/ConfirmationModal', () => ({
+ default: function MockConfirmationModal({
+ show,
+ onClose,
+ onConfirm,
+ title,
+ confirmText,
+ }: {
+ show: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+ title: string;
+ message: string;
+ confirmText: string;
+ cancelText: string;
+ confirmButtonClass?: string;
+ loading?: boolean;
+ }) {
+ if (!show) return null;
+ return (
+
+ {title}
+
+
+
+ );
+ },
+}));
+
+// Mock auth context
+const mockCurrentUser: User = {
+ id: 'current-user',
+ firstName: 'Current',
+ lastName: 'User',
+ email: 'current@example.com',
+ isVerified: true,
+ role: 'user',
+};
+
+const mockUseAuth = vi.fn();
+vi.mock('../../contexts/AuthContext', () => ({
+ useAuth: () => mockUseAuth(),
+}));
+
+import { userAPI, itemAPI } from '../../services/api';
+
+const mockUserAPI = userAPI as jest.Mocked;
+const mockItemAPI = itemAPI as jest.Mocked;
+
+// Helper to create mock user
+const createMockUser = (overrides: Partial = {}): User => ({
+ id: 'profile-user',
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'john@example.com',
+ isVerified: true,
+ role: 'user',
+ isBanned: false,
+ ...overrides,
+});
+
+// Helper to create mock item
+const createMockItem = (overrides: Partial- = {}): Item => ({
+ id: 'item-1',
+ name: 'Test Item',
+ description: 'Test description',
+ pricePerDay: 25,
+ pricePerWeek: 150,
+ ownerId: 'profile-user',
+ city: 'Test City',
+ state: 'CA',
+ imageFilenames: ['test-image.jpg'],
+ availableQuantity: 1,
+ isActive: true,
+ ...overrides,
+});
+
+// Helper to render with router
+const renderWithRouter = (userId = 'profile-user') => {
+ return render(
+
+
+ } />
+
+
+ );
+};
+
+describe('PublicProfile Page', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseAuth.mockReturnValue({ user: mockCurrentUser });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+ mockItemAPI.getItems.mockResolvedValue({ data: [] });
+ });
+
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe('Loading State', () => {
+ it('shows loading spinner while fetching', () => {
+ mockUserAPI.getPublicProfile.mockImplementation(() => new Promise(() => {}));
+
+ renderWithRouter();
+
+ expect(screen.getByRole('status')).toBeInTheDocument();
+ });
+ });
+
+ describe('Error Handling', () => {
+ it('displays error message on fetch failure', async () => {
+ mockUserAPI.getPublicProfile.mockRejectedValue({
+ response: { data: { message: 'User not found' } },
+ });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByRole('alert')).toHaveTextContent('User not found');
+ });
+ });
+
+ it('shows generic error when no message provided', async () => {
+ mockUserAPI.getPublicProfile.mockRejectedValue({
+ response: { data: {} },
+ });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByRole('alert')).toHaveTextContent(
+ 'Failed to fetch user profile'
+ );
+ });
+ });
+ });
+
+ describe('Profile Display', () => {
+ it('loads and displays user profile data', async () => {
+ const user = createMockUser({ firstName: 'Jane', lastName: 'Smith' });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: user });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+ });
+ });
+
+ it('displays user avatar', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('avatar')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('User Items', () => {
+ it('displays items owned by user', async () => {
+ const profileUser = createMockUser({ id: 'profile-user' });
+ const items = [
+ createMockItem({ id: 'item-1', name: 'Camera', ownerId: 'profile-user' }),
+ createMockItem({ id: 'item-2', name: 'Tripod', ownerId: 'profile-user' }),
+ ];
+
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: profileUser });
+ mockItemAPI.getItems.mockResolvedValue({ data: { items } });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Camera')).toBeInTheDocument();
+ expect(screen.getByText('Tripod')).toBeInTheDocument();
+ });
+ });
+
+ it('shows empty state when no items', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+ mockItemAPI.getItems.mockResolvedValue({ data: [] });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('No items listed yet.')).toBeInTheDocument();
+ });
+ });
+
+ it('shows item count in header', async () => {
+ const items = [
+ createMockItem({ ownerId: 'profile-user' }),
+ createMockItem({ id: 'item-2', ownerId: 'profile-user' }),
+ ];
+
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+ mockItemAPI.getItems.mockResolvedValue({ data: { items } });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Items Listed (2)')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Message Button', () => {
+ it('shows message button for authenticated users', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Message')).toBeInTheDocument();
+ });
+ });
+
+ it('opens ChatWindow when message button is clicked', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Message')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Message'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('chat-window')).toBeInTheDocument();
+ });
+ });
+
+ it('hides message button for banned users', async () => {
+ const bannedUser = createMockUser({ isBanned: true });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Message')).not.toBeInTheDocument();
+ });
+
+ it('hides message button when viewing own profile', async () => {
+ const ownProfile = createMockUser({
+ id: 'current-user',
+ firstName: 'Current',
+ lastName: 'User',
+ });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: ownProfile });
+
+ renderWithRouter('current-user');
+
+ await waitFor(() => {
+ expect(screen.getByText('Current User')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Message')).not.toBeInTheDocument();
+ });
+
+ it('hides message button for unauthenticated users', async () => {
+ mockUseAuth.mockReturnValue({ user: null });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Message')).not.toBeInTheDocument();
+ });
+ });
+
+ describe('Admin Ban Controls', () => {
+ const adminUser: User = { ...mockCurrentUser, role: 'admin' };
+
+ beforeEach(() => {
+ mockUseAuth.mockReturnValue({ user: adminUser });
+ });
+
+ it('shows ban button for admins', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Ban User')).toBeInTheDocument();
+ });
+ });
+
+ it('shows unban button for banned users', async () => {
+ const bannedUser = createMockUser({ isBanned: true });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Unban User')).toBeInTheDocument();
+ });
+ });
+
+ it('shows banned badge for admins viewing banned users', async () => {
+ const bannedUser = createMockUser({ isBanned: true });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Banned')).toBeInTheDocument();
+ });
+ });
+
+ it('shows ban reason for admins', async () => {
+ const bannedUser = createMockUser({
+ isBanned: true,
+ banReason: 'Violated terms of service',
+ });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Violated terms of service')).toBeInTheDocument();
+ });
+ });
+
+ it('cannot ban other admins', async () => {
+ const adminProfile = createMockUser({ role: 'admin' });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: adminProfile });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Ban User')).not.toBeInTheDocument();
+ });
+
+ it('cannot ban self', async () => {
+ const ownProfile = createMockUser({ id: 'current-user' });
+ mockUseAuth.mockReturnValue({ user: { ...ownProfile, role: 'admin' } });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: ownProfile });
+
+ renderWithRouter('current-user');
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Ban User')).not.toBeInTheDocument();
+ });
+
+ it('opens ban modal when ban button clicked', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Ban User')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Ban User'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('ban-modal')).toBeInTheDocument();
+ });
+ });
+
+ it('updates user state after ban completes', async () => {
+ const profileUser = createMockUser();
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: profileUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Ban User')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Ban User'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('ban-modal')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByTestId('confirm-ban'));
+
+ await waitFor(() => {
+ expect(screen.getByText('Unban User')).toBeInTheDocument();
+ });
+ });
+
+ it('calls adminUnbanUser when unban confirmed', async () => {
+ const bannedUser = createMockUser({ isBanned: true });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+ mockUserAPI.adminUnbanUser.mockResolvedValue({
+ data: { user: { ...bannedUser, isBanned: false } },
+ });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Unban User')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByText('Unban User'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('confirmation-modal')).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByTestId('confirm-action'));
+
+ await waitFor(() => {
+ expect(mockUserAPI.adminUnbanUser).toHaveBeenCalledWith(bannedUser.id);
+ });
+ });
+ });
+
+ describe('Non-Admin Users', () => {
+ it('does not show ban controls for non-admins', async () => {
+ mockUseAuth.mockReturnValue({ user: mockCurrentUser });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Ban User')).not.toBeInTheDocument();
+ });
+
+ it('does not show ban status for non-admins', async () => {
+ mockUseAuth.mockReturnValue({ user: mockCurrentUser });
+ const bannedUser = createMockUser({ isBanned: true });
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: bannedUser });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByText('Banned')).not.toBeInTheDocument();
+ });
+ });
+
+ describe('Back Button', () => {
+ it('shows back button', async () => {
+ mockUserAPI.getPublicProfile.mockResolvedValue({ data: createMockUser() });
+
+ renderWithRouter();
+
+ await waitFor(() => {
+ expect(screen.getByText('Back')).toBeInTheDocument();
+ });
+ });
+ });
+});
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 2141ea4..0bc63da 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -232,3 +232,214 @@ export const createMockAvailableChecks = (rentalId: string, checkTypes: string[]
checkType,
})),
});
+
+// ============================================
+// Forum Mock Data
+// ============================================
+
+// Mock Forum Post factory
+export const createMockForumPost = (overrides: {
+ id?: string;
+ title?: string;
+ content?: string;
+ category?: 'item_request' | 'technical_support' | 'community_resources' | 'general_discussion';
+ status?: 'open' | 'answered' | 'closed';
+ authorId?: string;
+ author?: typeof mockUser;
+ tags?: Array<{ id: string; tagName: string }>;
+ comments?: any[];
+ commentCount?: number;
+ isPinned?: boolean;
+ isDeleted?: boolean;
+ deletedAt?: string;
+ acceptedAnswerId?: string;
+ zipCode?: string;
+ latitude?: number;
+ longitude?: number;
+ imageFilenames?: string[];
+ createdAt?: string;
+ updatedAt?: string;
+} = {}) => ({
+ id: overrides.id || String(Math.floor(Math.random() * 1000)),
+ title: overrides.title || 'Test Forum Post',
+ content: overrides.content || 'This is a test forum post content.',
+ category: overrides.category || 'general_discussion',
+ status: overrides.status || 'open',
+ authorId: overrides.authorId || '1',
+ author: overrides.author || mockUser,
+ tags: overrides.tags || [],
+ comments: overrides.comments || [],
+ commentCount: overrides.commentCount ?? 0,
+ isPinned: overrides.isPinned ?? false,
+ isDeleted: overrides.isDeleted ?? false,
+ deletedAt: overrides.deletedAt,
+ acceptedAnswerId: overrides.acceptedAnswerId,
+ zipCode: overrides.zipCode,
+ latitude: overrides.latitude,
+ longitude: overrides.longitude,
+ imageFilenames: overrides.imageFilenames || [],
+ createdAt: overrides.createdAt || new Date().toISOString(),
+ updatedAt: overrides.updatedAt || new Date().toISOString(),
+});
+
+// Mock Forum Comment factory
+export const createMockForumComment = (overrides: {
+ id?: string;
+ postId?: string;
+ authorId?: string;
+ author?: typeof mockUser;
+ content?: string;
+ parentId?: string;
+ replies?: any[];
+ isDeleted?: boolean;
+ deletedAt?: string;
+ imageFilenames?: string[];
+ createdAt?: string;
+ updatedAt?: string;
+} = {}) => ({
+ id: overrides.id || String(Math.floor(Math.random() * 1000)),
+ postId: overrides.postId || '1',
+ authorId: overrides.authorId || '1',
+ author: overrides.author || mockUser,
+ content: overrides.content || 'This is a test comment.',
+ parentId: overrides.parentId,
+ replies: overrides.replies || [],
+ isDeleted: overrides.isDeleted ?? false,
+ deletedAt: overrides.deletedAt,
+ imageFilenames: overrides.imageFilenames || [],
+ createdAt: overrides.createdAt || new Date().toISOString(),
+ updatedAt: overrides.updatedAt || new Date().toISOString(),
+});
+
+// Pre-made forum posts
+export const mockForumPosts = {
+ itemRequest: createMockForumPost({
+ id: '1',
+ title: 'Looking for a DSLR camera',
+ content: 'I need a DSLR camera for a weekend photoshoot.',
+ category: 'item_request',
+ zipCode: '94102',
+ tags: [{ id: '1', tagName: 'camera' }, { id: '2', tagName: 'photography' }],
+ }),
+ technicalSupport: createMockForumPost({
+ id: '2',
+ title: 'Cannot upload images',
+ content: 'I get an error when trying to upload images to my listing.',
+ category: 'technical_support',
+ tags: [{ id: '3', tagName: 'upload' }, { id: '4', tagName: 'error' }],
+ }),
+ generalDiscussion: createMockForumPost({
+ id: '3',
+ title: 'Best practices for rental pricing',
+ content: 'What are some tips for pricing items competitively?',
+ category: 'general_discussion',
+ }),
+ pinnedPost: createMockForumPost({
+ id: '4',
+ title: 'Community Guidelines',
+ content: 'Please read our community guidelines.',
+ isPinned: true,
+ author: mockAdminUser,
+ }),
+ closedPost: createMockForumPost({
+ id: '5',
+ title: 'Old discussion',
+ content: 'This discussion has been resolved.',
+ status: 'closed',
+ }),
+ deletedPost: createMockForumPost({
+ id: '6',
+ title: 'Deleted post',
+ content: 'This post was deleted.',
+ isDeleted: true,
+ deletedAt: new Date().toISOString(),
+ }),
+};
+
+// ============================================
+// Message Mock Data
+// ============================================
+
+// Mock Message factory
+export const createMockMessage = (overrides: {
+ id?: string;
+ senderId?: string;
+ receiverId?: string;
+ content?: string;
+ isRead?: boolean;
+ imageFilename?: string;
+ sender?: typeof mockUser;
+ receiver?: typeof mockUser;
+ createdAt?: string;
+} = {}) => ({
+ id: overrides.id || String(Math.floor(Math.random() * 1000)),
+ senderId: overrides.senderId || '1',
+ receiverId: overrides.receiverId || '2',
+ content: overrides.content || 'Hello, this is a test message.',
+ isRead: overrides.isRead ?? false,
+ imageFilename: overrides.imageFilename,
+ sender: overrides.sender || mockUser,
+ receiver: overrides.receiver || { ...mockUser, id: '2', firstName: 'Other', lastName: 'User' },
+ createdAt: overrides.createdAt || new Date().toISOString(),
+});
+
+// Mock Conversation factory
+export const createMockConversation = (overrides: {
+ partnerId?: string;
+ partner?: typeof mockUser;
+ lastMessage?: ReturnType;
+ unreadCount?: number;
+ lastMessageAt?: string;
+} = {}) => ({
+ partnerId: overrides.partnerId || '2',
+ partner: overrides.partner || { ...mockUser, id: '2', firstName: 'Partner', lastName: 'User' },
+ lastMessage: overrides.lastMessage || createMockMessage(),
+ unreadCount: overrides.unreadCount ?? 0,
+ lastMessageAt: overrides.lastMessageAt || new Date().toISOString(),
+});
+
+// Pre-made conversations
+export const mockConversations = [
+ createMockConversation({
+ partnerId: '2',
+ partner: { ...mockUser, id: '2', firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
+ lastMessage: createMockMessage({ content: 'Hey, is the camera still available?' }),
+ unreadCount: 2,
+ lastMessageAt: new Date().toISOString(),
+ }),
+ createMockConversation({
+ partnerId: '3',
+ partner: { ...mockUser, id: '3', firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' },
+ lastMessage: createMockMessage({ content: 'Thanks for the rental!', isRead: true, senderId: '1' }),
+ unreadCount: 0,
+ lastMessageAt: new Date(Date.now() - 86400000).toISOString(),
+ }),
+];
+
+// Pre-made messages for a conversation
+export const mockMessages = [
+ createMockMessage({
+ id: '1',
+ senderId: '2',
+ receiverId: '1',
+ content: 'Hey, is the camera still available?',
+ createdAt: new Date(Date.now() - 3600000).toISOString(),
+ isRead: true,
+ }),
+ createMockMessage({
+ id: '2',
+ senderId: '1',
+ receiverId: '2',
+ content: 'Yes, it is! When do you need it?',
+ createdAt: new Date(Date.now() - 3000000).toISOString(),
+ isRead: true,
+ }),
+ createMockMessage({
+ id: '3',
+ senderId: '2',
+ receiverId: '1',
+ content: 'This weekend would be great. Can I pick it up Friday?',
+ createdAt: new Date(Date.now() - 2400000).toISOString(),
+ isRead: false,
+ }),
+];
+
+