Merge upstream develop

Author: github-actions[bot]

apps/polycentric/app/[identityId]/followers.tsx

@@ -0,0 +1,5 @@
+import FollowListScreen from '@/src/features/follow/FollowListScreen';
+
+export default function FollowersRoute() {
+  return <FollowListScreen mode="followers" />;
+}

apps/polycentric/app/[identityId]/following.tsx

@@ -0,0 +1,5 @@
+import FollowListScreen from '@/src/features/follow/FollowListScreen';
+
+export default function FollowingRoute() {
+  return <FollowListScreen mode="following" />;
+}

apps/polycentric/src/common/constants/routes.ts

@@ -38,6 +38,10 @@ export const Routes = {
     profile: (identityId: string) => `/${identityId}` as const,
     profileVerifications: (identityId: string) =>
       `/${identityId}/verifications` as const,
+    profileFollowing: (identityId: string) =>
+      `/${identityId}/following` as const,
+    profileFollowers: (identityId: string) =>
+      `/${identityId}/followers` as const,
     editProfile: (identityId: string) => `/${identityId}/edit` as const,
     post: (identityId: string, keyFingerprint: string, sequence: string) =>
       `/${identityId}/post/${keyFingerprint}/${sequence}` as const,

apps/polycentric/src/features/follow/FollowListScreen.test.tsx

@@ -0,0 +1,254 @@
+jest.mock('@/src/common/theme', () => ({
+  useTheme: () => ({
+    theme: {
+      palette: new Proxy({}, { get: () => '#000' }),
+      atoms: new Proxy({}, { get: () => ({}) }),
+    },
+  }),
+  Atoms: new Proxy({}, { get: () => ({}) }),
+  Spacing: new Proxy({}, { get: () => 8 }),
+}));
+
+jest.mock('@/src/common/components', () => {
+  const react = require('react');
+  const { Text } = require('react-native');
+  return {
+    Text: ({ children }: { children?: unknown }) =>
+      react.createElement(Text, null, children),
+  };
+});
+
+jest.mock('@/src/common/components/layout', () => {
+  const react = require('react');
+  const Screen = ({ children }: { children?: unknown }) =>
+    react.createElement(react.Fragment, null, children);
+  Screen.PrimaryColumn = ({ children }: { children?: unknown }) =>
+    react.createElement(react.Fragment, null, children);
+  return { Screen };
+});
+
+jest.mock('@/src/common/components/layout/Topbar', () => {
+  const react = require('react');
+  const { View } = require('react-native');
+  return {
+    __esModule: true,
+    default: ({ center }: { center?: unknown }) =>
+      react.createElement(View, { testID: 'topbar' }, center),
+  };
+});
+
+// Renders rows, headers, and footers so list composition is observable.
+type ListProps = {
+  HeaderComponent?: () => unknown;
+  ListHeaderComponent?: unknown;
+  ListEmptyComponent?: unknown;
+  ListFooterComponent?: unknown;
+  data: { identity: string }[];
+  renderItem: (info: { item: unknown; index: number }) => unknown;
+  onEndReached?: () => void;
+};
+let mockListProps: ListProps | null = null;
+jest.mock('@/src/common/components/List', () => {
+  const react = require('react');
+  const { View } = require('react-native');
+  return {
+    List: (props: ListProps) => {
+      mockListProps = props;
+      return react.createElement(
+        View,
+        null,
+        props.HeaderComponent ? props.HeaderComponent() : null,
+        props.ListHeaderComponent,
+        props.data.length === 0
+          ? props.ListEmptyComponent
+          : props.data.map((item, index) =>
+              react.createElement(
+                View,
+                { key: item.identity },
+                props.renderItem({ item, index }),
+              ),
+            ),
+        props.ListFooterComponent,
+      );
+    },
+  };
+});
+
+jest.mock('@/src/common/components/ListEmpty', () => {
+  const react = require('react');
+  const { Text } = require('react-native');
+  return {
+    ListEmpty: ({ children }: { children?: unknown }) =>
+      react.createElement(Text, null, children),
+  };
+});
+
+jest.mock('@/src/common/components/Tabs', () => {
+  const react = require('react');
+  const { Text, View } = require('react-native');
+  const Tabs = ({ children }: { children?: unknown }) =>
+    react.createElement(View, null, children);
+  Tabs.Tab = ({
+    children,
+    active,
+    onPress,
+  }: {
+    children: string;
+    active?: boolean;
+    onPress: () => void;
+  }) =>
+    react.createElement(
+      Text,
+      { onPress, accessibilityState: { selected: active } },
+      children,
+    );
+  return { Tabs };
+});
+
+jest.mock('@/src/common/components/Avatar/ProfileAvatar', () => ({
+  ProfileAvatar: () => null,
+}));
+
+const mockPush = jest.fn();
+const mockReplace = jest.fn();
+jest.mock('expo-router', () => ({
+  router: {
+    push: (...args: unknown[]) => mockPush(...args),
+    replace: (...args: unknown[]) => mockReplace(...args),
+  },
+  useLocalSearchParams: () => ({ identityId: 'profile-id' }),
+}));
+
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+jest.mock('@/src/common/lib/polycentric-hooks', () => ({
+  shortenIdentityId: (id: string) => `short-${id}`,
+  truncateName: (name: string) => name,
+  useCurrentIdentity: () => ({ identityKey: 'me' }),
+  useUsername: () => 'fallback',
+}));
+
+let mockProfileAlias: string | null = null;
+jest.mock('@/src/features/profile/hooks/useProfile', () => ({
+  useProfile: () => ({ name: 'Alice', alias: mockProfileAlias }),
+}));
+
+jest.mock('./FollowButton', () => {
+  const react = require('react');
+  const { Text } = require('react-native');
+  return {
+    __esModule: true,
+    default: ({ identity }: { identity: string }) =>
+      react.createElement(Text, { testID: `follow-${identity}` }, 'Follow'),
+  };
+});
+
+const mockLoadMore = jest.fn();
+let mockEntries: { identity: string; createdAt: bigint }[] = [];
+let mockHasMore = false;
+jest.mock('./hooks/useFollowList', () => ({
+  useFollowList: () => ({
+    entries: mockEntries,
+    isLoading: false,
+    error: null,
+    hasMore: mockHasMore,
+    loadMore: mockLoadMore,
+    refresh: jest.fn(),
+  }),
+}));
+
+import { fireEvent, render } from '@testing-library/react-native';
+import * as React from 'react';
+import FollowListScreen from './FollowListScreen';
+
+function entry(identity: string) {
+  return { identity, createdAt: 0n };
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockListProps = null;
+  mockEntries = [];
+  mockHasMore = false;
+  mockProfileAlias = null;
+});
+
+describe('FollowListScreen header', () => {
+  it('shows the display name and identity prefix', async () => {
+    const screen = await render(<FollowListScreen mode="following" />);
+
+    expect(screen.getByText('Alice')).toBeTruthy();
+    expect(screen.getByText(/short-profile-id/)).toBeTruthy();
+  });
+
+  it('appends the alias when available', async () => {
+    mockProfileAlias = 'alice@domain.com';
+    const screen = await render(<FollowListScreen mode="following" />);
+
+    expect(screen.getByText(/alice@domain.com/)).toBeTruthy();
+  });
+});
+
+describe('FollowListScreen tabs', () => {
+  it('switches to the sibling route', async () => {
+    const screen = await render(<FollowListScreen mode="following" />);
+
+    await fireEvent.press(screen.getByText('Followers'));
+    expect(mockReplace).toHaveBeenCalledWith('/profile-id/followers');
+  });
+
+  it('does not navigate for the active tab', async () => {
+    const screen = await render(<FollowListScreen mode="followers" />);
+
+    await fireEvent.press(screen.getByText('Followers'));
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+});
+
+describe('FollowListScreen rows', () => {
+  it('renders a row per identity linking to their profile', async () => {
+    mockEntries = [entry('alice-id'), entry('bob-id')];
+    const screen = await render(<FollowListScreen mode="followers" />);
+
+    await fireEvent.press(screen.getByText('short-alice-id'));
+    expect(mockPush).toHaveBeenCalledWith('/alice-id');
+    expect(screen.getByTestId('follow-bob-id')).toBeTruthy();
+  });
+
+  it('hides the follow button on your own row', async () => {
+    mockEntries = [entry('me')];
+    const screen = await render(<FollowListScreen mode="followers" />);
+
+    expect(screen.queryByTestId('follow-me')).toBeNull();
+  });
+
+  it('shows an empty state per mode', async () => {
+    const following = await render(<FollowListScreen mode="following" />);
+    expect(following.getByText('Not following anyone yet.')).toBeTruthy();
+
+    const followers = await render(<FollowListScreen mode="followers" />);
+    expect(followers.getByText('No followers yet.')).toBeTruthy();
+  });
+});
+
+describe('FollowListScreen paging', () => {
+  it('wires end-reached to loadMore and shows the footer spinner', async () => {
+    mockEntries = [entry('alice-id')];
+    mockHasMore = true;
+    const screen = await render(<FollowListScreen mode="followers" />);
+
+    expect(screen.getByLabelText('Loading more')).toBeTruthy();
+    mockListProps!.onEndReached!();
+    expect(mockLoadMore).toHaveBeenCalled();
+  });
+
+  it('does not page when there is no more data', async () => {
+    mockEntries = [entry('alice-id')];
+    const screen = await render(<FollowListScreen mode="followers" />);
+
+    expect(screen.queryByLabelText('Loading more')).toBeNull();
+    expect(mockListProps!.onEndReached).toBeUndefined();
+  });
+});