profileFlow.test.tsx

// __tests__/behavioral/ProfileScreen.test.tsx
import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react-native';
import ProfileScreen from '../../app/(tabs)/profileScreen';

// --- Mocks ---

jest.mock('react-native-safe-area-context', () => {
  const { View } = require('react-native');
  return {
    SafeAreaProvider: ({ children }: any) => <View>{children}</View>,
    SafeAreaView: ({ children }: any) => <View>{children}</View>,
    useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
  };
});

jest.mock('@react-native-firebase/auth', () => () => ({
  currentUser: { uid: 'test-uid-123', email: 'test@example.com' },
}));

jest.mock('expo-image', () => {
  const { Image } = require('react-native');
  return { Image };
});

jest.mock('expo-image-picker', () => ({
  launchImageLibraryAsync: jest.fn().mockResolvedValue({
    canceled: true,
    assets: [],
  }),
}));

jest.mock('react-native-input-spinner', () => {
  const { View } = require('react-native');
  return () => <View />;
});

jest.mock('../../components/VideoPromptAnswer', () => {
  const { View } = require('react-native');
  return { VideoPromptAnswer: () => <View /> };
});

jest.mock('../../lib/supabase', () => ({
  supabase: {
    storage: {
      from: () => ({
        upload: jest.fn().mockResolvedValue({ error: null }),
        getPublicUrl: jest.fn().mockReturnValue({
          data: { publicUrl: 'https://example.com/avatar.jpg' },
        }),
      }),
    },
  },
}));

jest.mock('../../services/api', () => ({
  searchGames: jest.fn().mockResolvedValue([]),
}));

jest.mock('../../app/loginScreen', () => ({
  handleLogout: jest.fn(),
}));

// mock profile returned from API
const mockProfile = {
  displayName: 'Alex',
  profilePicture: null,
  bio: 'I love gaming',
  age: 22,
  gender: 'Male',
  timezone: 'est',
  playstyle: 'casual',
  platforms: ['PC'],
  games: [],
  prompts: [],
};

global.fetch = jest.fn().mockResolvedValue({
  ok: true,
  json: async () => mockProfile,
  text: async () => JSON.stringify(mockProfile),
});

// --- Tests ---

describe('Profile Screen — behavioral', () => {

  beforeEach(() => {
    jest.clearAllMocks();
    (global.fetch as jest.Mock).mockResolvedValue({
      ok: true,
      json: async () => mockProfile,
      text: async () => JSON.stringify(mockProfile),
    });
  });

  afterEach(() => {
    cleanup();
  });

  // --- Loading state ---

  it('shows loading indicator on mount', async () => {
    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByText('Loading your profile…')).toBeTruthy();
    }, { timeout: 3000 });
  });

  // --- Profile loads ---

  it('displays the users display name after loading', async () => {
    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByText('Alex')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('displays the users bio after loading', async () => {
    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByText('I love gaming')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('displays edit and settings buttons after loading', async () => {
    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
      expect(screen.getByLabelText('Settings')).toBeTruthy();
    }, { timeout: 3000 });
  });

  // --- Error state ---

  it('shows error message if profile fetch fails', async () => {
    (global.fetch as jest.Mock).mockResolvedValueOnce({
      ok: false,
      json: async () => ({ message: 'Failed to fetch profile' }),
    });

    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByText('Failed to fetch profile')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('shows server error if fetch throws', async () => {
    (global.fetch as jest.Mock).mockRejectedValueOnce(new Error('Network error'));

    render(<ProfileScreen />);
    await waitFor(() => {
      expect(screen.getByText('Server error when fetching profile')).toBeTruthy();
    }, { timeout: 3000 });
  });

  // --- Edit mode ---

  it('user can open edit mode', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('user can cancel edit mode', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByText('Cancel')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByText('Cancel'));

    await waitFor(() => {
      expect(screen.getByText('Alex')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('user can edit their display name', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByPlaceholderText('Your display name')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.changeText(screen.getByPlaceholderText('Your display name'), 'New Name');

    await waitFor(() => {
      expect(screen.getByDisplayValue('New Name')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('user can edit their bio', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByPlaceholderText('Write something about yourself')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.changeText(
      screen.getByPlaceholderText('Write something about yourself'),
      'Updated bio'
    );

    await waitFor(() => {
      expect(screen.getByDisplayValue('Updated bio')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('shows age error if age is under 13', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByPlaceholderText('Your age')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.changeText(screen.getByPlaceholderText('Your age'), '10');
    fireEvent(screen.getByPlaceholderText('Your age'), 'blur');

    await waitFor(() => {
      expect(screen.getByText('You must be at least 13 years old')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('shows age error if age is over 100', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Edit profile')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Edit profile'));

    await waitFor(() => {
      expect(screen.getByPlaceholderText('Your age')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.changeText(screen.getByPlaceholderText('Your age'), '150');

    await waitFor(() => {
      expect(screen.getByText('Age cannot be over 100')).toBeTruthy();
    }, { timeout: 3000 });
  });

  // --- Settings / logout ---

  it('user can open settings modal', async () => {
    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Settings')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Settings'));

    await waitFor(() => {
      expect(screen.getByText('Log Out')).toBeTruthy();
    }, { timeout: 3000 });
  });

  it('user can log out from settings', async () => {
    const { handleLogout } = require('../../app/loginScreen');

    render(<ProfileScreen />);

    await waitFor(() => {
      expect(screen.getByLabelText('Settings')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByLabelText('Settings'));

    await waitFor(() => {
      expect(screen.getByText('Log Out')).toBeTruthy();
    }, { timeout: 3000 });

    fireEvent.press(screen.getByText('Log Out'));

    await waitFor(() => {
      expect(handleLogout).toHaveBeenCalledTimes(1);
    }, { timeout: 3000 });
  });

});