stream-chat-react-native-core 9.3.1-beta.9 → 9.4.0-beta.1

package/src/components/ChannelDetails/__tests__/ChannelDetailsActionsSection.test.tsx

@@ -0,0 +1,338 @@
+import React from 'react';
+import { Switch, Text } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import * as useChannelActionsModule from '../../../hooks/actions/useChannelActions';
+import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
+import * as useMutedUsersModule from '../../ChannelList/hooks/useMutedUsers';
+import * as useIsChannelMutedModule from '../../ChannelPreview/hooks/useIsChannelMuted';
+import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
+import { ChannelDetailsActionsSection } from '../components/ChannelDetailsActionsSection';
+import * as useChannelDetailsActionItemsModule from '../hooks/useChannelDetailsActionItems';
+
+const NoopIcon = () => null;
+
+const buildItem = (overrides: Partial<ChannelActionItem> = {}): ChannelActionItem => ({
+  action: jest.fn(),
+  Icon: NoopIcon,
+  id: 'mute',
+  label: 'Mute',
+  placement: 'sheet',
+  type: 'standard',
+  ...overrides,
+});
+
+const channel = {
+  cid: 'messaging:test',
+  on: () => ({ unsubscribe: () => undefined }),
+} as unknown as Channel;
+
+type Probe = ChannelDetailsActionItemProps & { testID?: string };
+
+const probeCalls: Probe[] = [];
+const ActionItemProbe = (props: Probe) => {
+  probeCalls.push(props);
+  return (
+    <>
+      <Text testID={props.testID} onPress={props.onPress}>
+        {props.label}
+      </Text>
+      {props.trailing}
+    </>
+  );
+};
+
+const sectionElement = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChatContext.Provider
+        value={
+          {
+            client: {
+              mutedUsers: [],
+              on: () => ({ unsubscribe: () => undefined }),
+              userID: 'me',
+            },
+          } as never
+        }
+      >
+        <ChannelDetailsContextProvider value={{ channel }}>
+          <WithComponents overrides={{ ChannelDetailsActionItem: ActionItemProbe }}>
+            <ChannelDetailsActionsSection />
+          </WithComponents>
+        </ChannelDetailsContextProvider>
+      </ChatContext.Provider>
+    </TranslationProvider>
+  </ThemeProvider>
+);
+
+const renderSection = () => render(sectionElement());
+
+describe('ChannelDetailsActionsSection', () => {
+  let useIsDirectChatSpy: jest.SpyInstance;
+  let useActionItemsSpy: jest.SpyInstance;
+  let useIsChannelMutedSpy: jest.SpyInstance;
+  let useMutedUsersSpy: jest.SpyInstance;
+  let getOtherUserSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    probeCalls.length = 0;
+    useIsDirectChatSpy = jest
+      .spyOn(useIsDirectChatModule, 'useIsDirectChat')
+      .mockReturnValue(false);
+    useActionItemsSpy = jest
+      .spyOn(useChannelDetailsActionItemsModule, 'useChannelDetailsActionItems')
+      .mockReturnValue([]);
+    useIsChannelMutedSpy = jest
+      .spyOn(useIsChannelMutedModule, 'useIsChannelMuted')
+      .mockReturnValue({ createdAt: null, expiresAt: null, muted: false });
+    useMutedUsersSpy = jest.spyOn(useMutedUsersModule, 'useMutedUsers').mockReturnValue([]);
+    getOtherUserSpy = jest
+      .spyOn(useChannelActionsModule, 'getOtherUserInDirectChannel')
+      .mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('when there are no items', () => {
+    it('renders nothing', () => {
+      const { toJSON } = renderSection();
+      expect(toJSON()).toBeNull();
+    });
+  });
+
+  describe('when there are items', () => {
+    const muteItem = buildItem({ id: 'mute', label: 'Mute Group' });
+    const leaveItem = buildItem({
+      id: 'leave',
+      label: 'Leave Group',
+      type: 'destructive',
+    });
+    const deleteItem = buildItem({
+      id: 'deleteChannel',
+      label: 'Delete Group',
+      type: 'destructive',
+    });
+
+    it('renders one list item per action item', () => {
+      useActionItemsSpy.mockReturnValue([muteItem, leaveItem, deleteItem]);
+      renderSection();
+      expect(probeCalls).toHaveLength(3);
+      expect(probeCalls.map((p) => p.label)).toEqual(['Mute Group', 'Leave Group', 'Delete Group']);
+    });
+
+    it('builds testIDs from the item id', () => {
+      useActionItemsSpy.mockReturnValue([muteItem, leaveItem, deleteItem]);
+      renderSection();
+      expect(screen.getByTestId('channel-details-action-mute')).toBeTruthy();
+      expect(screen.getByTestId('channel-details-action-leave')).toBeTruthy();
+      expect(screen.getByTestId('channel-details-action-deleteChannel')).toBeTruthy();
+    });
+
+    it('forwards the icon, label, and onPress to ChannelDetailsActionItem', () => {
+      useActionItemsSpy.mockReturnValue([leaveItem]);
+      renderSection();
+      const [item] = probeCalls;
+      expect(item.Icon).toBe(leaveItem.Icon);
+      expect(item.label).toBe('Leave Group');
+      expect(typeof item.onPress).toBe('function');
+    });
+
+    it('passes destructive=true only for items with type="destructive"', () => {
+      useActionItemsSpy.mockReturnValue([muteItem, leaveItem, deleteItem]);
+      renderSection();
+      const byId = Object.fromEntries(probeCalls.map((p) => [p.testID, p.destructive]));
+      expect(byId['channel-details-action-mute']).toBe(false);
+      expect(byId['channel-details-action-leave']).toBe(true);
+      expect(byId['channel-details-action-deleteChannel']).toBe(true);
+    });
+
+    it('invokes the original action when a non-toggle list item is pressed', () => {
+      const action = jest.fn();
+      useActionItemsSpy.mockReturnValue([buildItem({ action, id: 'leave', label: 'Leave Group' })]);
+      renderSection();
+      fireEvent.press(screen.getByTestId('channel-details-action-leave'));
+      expect(action).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not forward onPress for the mute toggle row (Switch-driven)', () => {
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'mute', label: 'Mute Group' })]);
+      renderSection();
+      const [item] = probeCalls;
+      expect(item.onPress).toBeUndefined();
+    });
+  });
+
+  describe('ChannelDetailsActionItem override', () => {
+    it('uses the override passed via WithComponents instead of the default', () => {
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'mute', label: 'Mute Group' })]);
+      renderSection();
+      // Probe is our injected override — its presence proves the override path is used.
+      expect(probeCalls).toHaveLength(1);
+    });
+  });
+
+  describe('mute / muteUser trailing Switch', () => {
+    const leaveItem = buildItem({ id: 'leave', label: 'Leave Group', type: 'destructive' });
+
+    it('passes a Switch as trailing only for mute and muteUser items', () => {
+      useActionItemsSpy.mockReturnValue([
+        buildItem({ id: 'mute', label: 'Mute Group' }),
+        leaveItem,
+      ]);
+      renderSection();
+      const byId = Object.fromEntries(probeCalls.map((p) => [p.testID, p.trailing]));
+      expect(byId['channel-details-action-mute']).toBeTruthy();
+      expect(byId['channel-details-action-leave']).toBeUndefined();
+    });
+
+    it('reflects channelMuted state on the mute item Switch', () => {
+      useIsChannelMutedSpy.mockReturnValue({ createdAt: null, expiresAt: null, muted: true });
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'mute', label: 'Unmute Group' })]);
+      renderSection();
+      const muteSwitch = screen.getByTestId('channel-details-action-mute-switch');
+      expect(muteSwitch.props.value).toBe(true);
+    });
+
+    it('invokes the item action with an onFailure callback when the mute Switch is toggled', () => {
+      const action = jest.fn();
+      useActionItemsSpy.mockReturnValue([buildItem({ action, id: 'mute', label: 'Mute Group' })]);
+      renderSection();
+      const muteSwitch = screen.getByTestId('channel-details-action-mute-switch');
+      fireEvent(muteSwitch, 'valueChange', true);
+      expect(action).toHaveBeenCalledTimes(1);
+      expect(typeof action.mock.calls[0][0].onFailure).toBe('function');
+    });
+
+    it('optimistically reflects the new value on the mute Switch before the action resolves', () => {
+      useIsChannelMutedSpy.mockReturnValue({ createdAt: null, expiresAt: null, muted: false });
+      useActionItemsSpy.mockReturnValue([
+        buildItem({ action: jest.fn(), id: 'mute', label: 'Mute Group' }),
+      ]);
+      renderSection();
+      const muteSwitch = screen.getByTestId('channel-details-action-mute-switch');
+      expect(muteSwitch.props.value).toBe(false);
+      fireEvent(muteSwitch, 'valueChange', true);
+      expect(screen.getByTestId('channel-details-action-mute-switch').props.value).toBe(true);
+    });
+
+    it('rolls back the mute Switch when the action invokes onFailure', () => {
+      const action = jest.fn();
+      useIsChannelMutedSpy.mockReturnValue({ createdAt: null, expiresAt: null, muted: false });
+      useActionItemsSpy.mockReturnValue([buildItem({ action, id: 'mute', label: 'Mute Group' })]);
+      renderSection();
+      const muteSwitch = screen.getByTestId('channel-details-action-mute-switch');
+      fireEvent(muteSwitch, 'valueChange', true);
+      expect(screen.getByTestId('channel-details-action-mute-switch').props.value).toBe(true);
+      act(() => {
+        action.mock.calls[0][0].onFailure();
+      });
+      expect(screen.getByTestId('channel-details-action-mute-switch').props.value).toBe(false);
+    });
+
+    it('rolls back the mute Switch to the current hook value (not !value) when it changed mid-flight', () => {
+      const action = jest.fn();
+      useIsChannelMutedSpy.mockReturnValue({ createdAt: null, expiresAt: null, muted: false });
+      useActionItemsSpy.mockReturnValue([buildItem({ action, id: 'mute', label: 'Mute Group' })]);
+      const { rerender } = renderSection();
+      const muteSwitch = screen.getByTestId('channel-details-action-mute-switch');
+      // Optimistically flip on while the mute request is in flight.
+      fireEvent(muteSwitch, 'valueChange', true);
+      expect(screen.getByTestId('channel-details-action-mute-switch').props.value).toBe(true);
+      // A server event reports the channel as muted before the request resolves.
+      useIsChannelMutedSpy.mockReturnValue({ createdAt: null, expiresAt: null, muted: true });
+      rerender(sectionElement());
+      // The request fails: revert to the current hook value (true), not !value (false).
+      act(() => {
+        action.mock.calls[0][0].onFailure();
+      });
+      expect(screen.getByTestId('channel-details-action-mute-switch').props.value).toBe(true);
+    });
+
+    it('reflects userMuted state on the muteUser item Switch in direct chats', () => {
+      useIsDirectChatSpy.mockReturnValue(true);
+      getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
+      useMutedUsersSpy.mockReturnValue([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'muteUser', label: 'Unmute User' })]);
+      renderSection();
+      const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');
+      expect(userMuteSwitch.props.value).toBe(true);
+    });
+
+    it('optimistically updates and rolls back the muteUser Switch on failure', () => {
+      const action = jest.fn();
+      useIsDirectChatSpy.mockReturnValue(true);
+      getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
+      useMutedUsersSpy.mockReturnValue([]);
+      useActionItemsSpy.mockReturnValue([
+        buildItem({ action, id: 'muteUser', label: 'Mute User' }),
+      ]);
+      renderSection();
+      const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');
+      expect(userMuteSwitch.props.value).toBe(false);
+      fireEvent(userMuteSwitch, 'valueChange', true);
+      expect(screen.getByTestId('channel-details-action-muteUser-switch').props.value).toBe(true);
+      expect(action).toHaveBeenCalledTimes(1);
+      act(() => {
+        action.mock.calls[0][0].onFailure();
+      });
+      expect(screen.getByTestId('channel-details-action-muteUser-switch').props.value).toBe(false);
+    });
+
+    it('rolls back the muteUser Switch to the current hook value (not !value) when it changed mid-flight', () => {
+      const action = jest.fn();
+      useIsDirectChatSpy.mockReturnValue(true);
+      getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
+      useMutedUsersSpy.mockReturnValue([]);
+      useActionItemsSpy.mockReturnValue([
+        buildItem({ action, id: 'muteUser', label: 'Mute User' }),
+      ]);
+      const { rerender } = renderSection();
+      const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');
+      // Optimistically flip on while the mute request is in flight.
+      fireEvent(userMuteSwitch, 'valueChange', true);
+      expect(screen.getByTestId('channel-details-action-muteUser-switch').props.value).toBe(true);
+      // A server event reports the user as muted before the request resolves.
+      useMutedUsersSpy.mockReturnValue([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
+      rerender(sectionElement());
+      // The request fails: revert to the current hook value (true), not !value (false).
+      act(() => {
+        action.mock.calls[0][0].onFailure();
+      });
+      expect(screen.getByTestId('channel-details-action-muteUser-switch').props.value).toBe(true);
+    });
+
+    it('userMuted is false when the other user is not in mutedUsers', () => {
+      useIsDirectChatSpy.mockReturnValue(true);
+      getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
+      useMutedUsersSpy.mockReturnValue([{ target: { id: 'someone-else' }, user: { id: 'me' } }]);
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'muteUser', label: 'Mute User' })]);
+      renderSection();
+      const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');
+      expect(userMuteSwitch.props.value).toBe(false);
+    });
+
+    it('renders Switch components in the tree for mute toggles', () => {
+      useActionItemsSpy.mockReturnValue([buildItem({ id: 'mute', label: 'Mute Group' })]);
+      const { UNSAFE_getAllByType } = renderSection();
+      expect(UNSAFE_getAllByType(Switch)).toHaveLength(1);
+    });
+  });
+});

package/src/components/ChannelDetails/__tests__/ChannelDetailsMemberSection.test.tsx

@@ -0,0 +1,298 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import {
+  allOwnCapabilities,
+  OwnCapabilitiesContextValue,
+  OwnCapability,
+} from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { ChannelDetailsMemberSection } from '../components/ChannelDetailsMemberSection';
+import type { ChannelMemberActionsSheetProps } from '../components/members/ChannelMemberActionsSheet';
+import type { ChannelMemberItemProps } from '../components/members/ChannelMemberItem';
+import * as useChannelDetailsMembersPreviewModule from '../hooks/useChannelDetailsMembersPreview';
+
+jest.mock('../../../hooks/actions/useChannelActions');
+const mockedUseChannelActions = jest.mocked(useChannelActions);
+
+const MemberListProbe = () => <Text testID='member-list-probe'>full-member-list</Text>;
+
+const AddMembersProbe = () => <Text testID='add-members-probe'>add-members</Text>;
+
+const memberItemProbeCalls: ChannelMemberItemProps[] = [];
+const MemberItemProbe = (props: ChannelMemberItemProps) => {
+  memberItemProbeCalls.push(props);
+  return <Text testID={`member-item-${props.member.user?.id}`}>{props.member.user?.name}</Text>;
+};
+
+const MemberActionsSheetProbe = ({ member }: ChannelMemberActionsSheetProps) => (
+  <Text testID='member-actions-sheet-probe'>{member.user?.id ?? ''}</Text>
+);
+
+const buildChannel = (
+  members: ChannelMemberResponse[],
+  memberCount?: number,
+  overrides?: Partial<Channel>,
+): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: { member_count: memberCount ?? members.length },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: {
+      members: Object.fromEntries(
+        members.map((m) => [m.user?.id ?? m.user_id ?? '', m]).filter(([k]) => Boolean(k)),
+      ),
+    },
+    ...overrides,
+  }) as unknown as Channel;
+
+const applyCapabilities = (
+  channel: Channel,
+  overrides?: Partial<OwnCapabilitiesContextValue>,
+): Channel => {
+  if (!overrides) return channel;
+  const ownCapabilities = Object.entries(overrides)
+    .filter(([, enabled]) => enabled)
+    .map(([key]) => allOwnCapabilities[key as OwnCapability]);
+  (channel as { data?: Record<string, unknown> }).data = {
+    ...((channel as { data?: Record<string, unknown> }).data ?? {}),
+    own_capabilities: ownCapabilities,
+  };
+  return channel;
+};
+
+const renderSection = ({
+  capabilities,
+  channel,
+  onAddMembersPress,
+  onMemberPress,
+  onViewAllMembersPress,
+}: {
+  channel: Channel;
+  capabilities?: Partial<OwnCapabilitiesContextValue>;
+  onAddMembersPress?: () => void;
+  onMemberPress?: (member: ChannelMemberResponse) => void;
+  onViewAllMembersPress?: () => void;
+}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <AccessibilityProvider value={{ enabled: true }}>
+        <TranslationProvider
+          value={{
+            t: ((key: string) => key) as never,
+            tDateTimeParser: ((input: unknown) => input) as never,
+            userLanguage: 'en',
+          }}
+        >
+          <ChatContext.Provider
+            value={
+              {
+                client: {
+                  mutedUsers: [],
+                  notifications: new NotificationManager(),
+                  on: () => ({ unsubscribe: () => undefined }),
+                  userID: 'me',
+                },
+              } as never
+            }
+          >
+            <ChannelDetailsContextProvider
+              value={{
+                channel: applyCapabilities(channel, capabilities),
+                onAddMembersPress,
+                onMemberPress,
+                onViewAllMembersPress,
+              }}
+            >
+              <WithComponents
+                overrides={{
+                  ChannelAddMembers: AddMembersProbe,
+                  ChannelMemberActionsSheet: MemberActionsSheetProbe,
+                  ChannelMemberItem: MemberItemProbe,
+                  ChannelMemberList: MemberListProbe,
+                }}
+              >
+                <ChannelDetailsMemberSection />
+              </WithComponents>
+            </ChannelDetailsContextProvider>
+          </ChatContext.Provider>
+        </TranslationProvider>
+      </AccessibilityProvider>
+    </ThemeProvider>,
+  );
+
+const makeMembers = (count: number) =>
+  Array.from({ length: count }, (_, idx) =>
+    generateMember({ user: generateUser({ id: `u-${idx}`, name: `User ${idx}` }) }),
+  );
+
+describe('ChannelDetailsMemberSection', () => {
+  let previewSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    memberItemProbeCalls.length = 0;
+    previewSpy = jest.spyOn(
+      useChannelDetailsMembersPreviewModule,
+      'useChannelDetailsMembersPreview',
+    );
+    mockedUseChannelActions.mockReturnValue({
+      addMembers: jest.fn(),
+    } as unknown as ReturnType<typeof useChannelActions>);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    mockedUseChannelActions.mockReset();
+  });
+
+  it('hides the "View all" affordance when there are no extra members', () => {
+    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: makeMembers(3) });
+    const channel = buildChannel(makeMembers(3), 3);
+
+    renderSection({ channel });
+
+    expect(screen.queryByLabelText('View all')).toBeNull();
+  });
+
+  it('shows the "View all" affordance when there are more members than the preview shows', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+
+    renderSection({ channel });
+
+    expect(screen.getByLabelText('View all')).toBeTruthy();
+  });
+
+  it('opens the all-members modal when "View all" is pressed and no override is provided', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+
+    renderSection({ channel });
+
+    expect(screen.queryByTestId('member-list-probe')).toBeNull();
+    fireEvent.press(screen.getByLabelText('View all'));
+    expect(screen.getByTestId('member-list-probe')).toBeTruthy();
+  });
+
+  it('calls onViewAllMembersPress instead of opening the modal when provided', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+    const onViewAllMembersPress = jest.fn();
+
+    renderSection({ channel, onViewAllMembersPress });
+
+    fireEvent.press(screen.getByLabelText('View all'));
+
+    expect(onViewAllMembersPress).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId('member-list-probe')).toBeNull();
+  });
+
+  it('hides the preview add button when the user lacks update-channel-members capability', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+
+    renderSection({ channel });
+
+    expect(screen.queryByTestId('channel-details-member-section-add-button')).toBeNull();
+  });
+
+  it('renders the preview add button and invokes onAddMembersPress when the user has the capability', () => {
+    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: makeMembers(3) });
+    const channel = buildChannel(makeMembers(3), 3);
+    const onAddMembersPress = jest.fn();
+
+    renderSection({
+      capabilities: { updateChannelMembers: true },
+      channel,
+      onAddMembersPress,
+    });
+
+    fireEvent.press(screen.getByTestId('channel-details-member-section-add-button'));
+
+    expect(onAddMembersPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens the Add-members sheet when the preview Add is pressed and no onAddMembersPress override is provided', () => {
+    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: makeMembers(3) });
+    const channel = buildChannel(makeMembers(3), 3);
+
+    renderSection({
+      capabilities: { updateChannelMembers: true },
+      channel,
+    });
+
+    expect(screen.queryByTestId('add-members-probe')).toBeNull();
+    fireEvent.press(screen.getByTestId('channel-details-member-section-add-button'));
+    expect(screen.getByTestId('add-members-probe')).toBeTruthy();
+  });
+
+  it('opens the per-member actions sheet when a member row is pressed and no onMemberPress override is provided', () => {
+    const members = makeMembers(3);
+    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: members });
+    const channel = buildChannel(members, 3);
+
+    renderSection({ channel });
+
+    expect(screen.queryByTestId('member-actions-sheet-probe')).toBeNull();
+
+    const lastCallForFirstMember = [...memberItemProbeCalls]
+      .reverse()
+      .find((call) => call.member.user?.id === 'u-0');
+    act(() => {
+      lastCallForFirstMember?.onPress?.(lastCallForFirstMember.member);
+    });
+
+    expect(screen.getByTestId('member-actions-sheet-probe')).toBeTruthy();
+    expect(screen.getByTestId('member-actions-sheet-probe').props.children).toBe('u-0');
+  });
+
+  it('calls onMemberPress instead of opening the per-member actions sheet when provided', () => {
+    const members = makeMembers(3);
+    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: members });
+    const channel = buildChannel(members, 3);
+    const onMemberPress = jest.fn();
+
+    renderSection({ channel, onMemberPress });
+
+    const lastCallForSecondMember = [...memberItemProbeCalls]
+      .reverse()
+      .find((call) => call.member.user?.id === 'u-1');
+    act(() => {
+      lastCallForSecondMember?.onPress?.(lastCallForSecondMember.member);
+    });
+
+    expect(onMemberPress).toHaveBeenCalledTimes(1);
+    expect(onMemberPress.mock.calls[0][0].user?.id).toBe('u-1');
+    expect(screen.queryByTestId('member-actions-sheet-probe')).toBeNull();
+  });
+
+  it('swaps the all-members modal for the Add-members sheet when the modal Add button is pressed', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+
+    renderSection({
+      capabilities: { updateChannelMembers: true },
+      channel,
+    });
+
+    fireEvent.press(screen.getByLabelText('View all'));
+    fireEvent.press(screen.getByTestId('channel-details-member-list-add-button'));
+
+    expect(screen.getByTestId('add-members-probe')).toBeTruthy();
+    // View-all sheet is dismissed when Add-members opens (swap, not stack).
+    expect(screen.queryByTestId('member-list-probe')).toBeNull();
+  });
+});