stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

package/src/components/ChannelDetails/__tests__/members/ChannelMemberActionsSheet.test.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } 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 { ChannelMemberActionItem } from '../../../../hooks/actions/useChannelMemberActionItems';
+import * as useChannelMemberActionItemsModule from '../../../../hooks/actions/useChannelMemberActionItems';
+import { generateMember } from '../../../../mock-builders/generator/member';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import type { ChannelDetailsActionItemProps } from '../../components/ChannelDetailsActionItem';
+import { ChannelMemberActionsSheet } from '../../components/members/ChannelMemberActionsSheet';
+
+jest.mock('../../../UIComponents/BottomSheetModal', () => {
+  const React = require('react');
+  return {
+    BottomSheetModal: ({ children, visible }: { children: React.ReactNode; visible: boolean }) =>
+      visible ? <>{children}</> : null,
+  };
+});
+
+const NoopIcon = () => null;
+
+const buildItem = (overrides: Partial<ChannelMemberActionItem> = {}): ChannelMemberActionItem => ({
+  action: jest.fn(),
+  Icon: NoopIcon,
+  id: 'muteUser',
+  label: 'Mute User',
+  type: 'standard',
+  ...overrides,
+});
+
+const channel = {
+  cid: 'messaging:test',
+  on: () => ({ unsubscribe: () => undefined }),
+} as unknown as Channel;
+
+const member: ChannelMemberResponse = generateMember({
+  user: generateUser({ id: 'maya', name: 'Maya Ross', online: true }),
+});
+
+type Probe = ChannelDetailsActionItemProps & { testID?: string };
+
+const probeCalls: Probe[] = [];
+const ActionItemProbe = (props: Probe) => {
+  probeCalls.push(props);
+  return (
+    <Text onPress={props.onPress} testID={props.testID}>
+      {props.label}
+    </Text>
+  );
+};
+
+const renderSheet = ({
+  onClose = jest.fn(),
+  visible = true,
+}: { onClose?: () => void; visible?: boolean } = {}) =>
+  render(
+    <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 }}>
+              <ChannelMemberActionsSheet member={member} onClose={onClose} visible={visible} />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelMemberActionsSheet', () => {
+  let actionsSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    probeCalls.length = 0;
+    actionsSpy = jest
+      .spyOn(useChannelMemberActionItemsModule, 'useChannelMemberActionItems')
+      .mockReturnValue([]);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders the member name and status in the header', () => {
+    actionsSpy.mockReturnValue([]);
+    renderSheet();
+
+    expect(screen.getByText('Maya Ross')).toBeTruthy();
+    expect(screen.getByText('Online')).toBeTruthy();
+  });
+
+  it('renders one ChannelDetailsActionItem per item returned by the hook', () => {
+    const muteItem = buildItem({ id: 'muteUser', label: 'Mute User' });
+    const blockItem = buildItem({ id: 'block', label: 'Block User', type: 'destructive' });
+    actionsSpy.mockReturnValue([muteItem, blockItem]);
+
+    renderSheet();
+
+    expect(probeCalls).toHaveLength(2);
+    expect(probeCalls.map((p) => p.label)).toEqual(['Mute User', 'Block User']);
+  });
+
+  it('flags destructive items', () => {
+    const muteItem = buildItem({ id: 'muteUser', label: 'Mute User' });
+    const blockItem = buildItem({ id: 'block', label: 'Block User', type: 'destructive' });
+    actionsSpy.mockReturnValue([muteItem, blockItem]);
+
+    renderSheet();
+
+    const byId = Object.fromEntries(probeCalls.map((p) => [p.testID, p.destructive]));
+    expect(byId['channel-details-member-action-muteUser']).toBe(false);
+    expect(byId['channel-details-member-action-block']).toBe(true);
+  });
+
+  it('invokes the action and closes when an item is pressed', () => {
+    const action = jest.fn();
+    const onClose = jest.fn();
+    actionsSpy.mockReturnValue([buildItem({ action, id: 'muteUser', label: 'Mute User' })]);
+
+    renderSheet({ onClose });
+    fireEvent.press(screen.getByTestId('channel-details-member-action-muteUser'));
+
+    expect(action).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards the channel + member + getChannelMemberActionItems to the hook', () => {
+    const getChannelMemberActionItems = jest.fn(({ defaultItems }) => defaultItems);
+    actionsSpy.mockReturnValue([]);
+
+    render(
+      <ChatContext.Provider
+        value={
+          {
+            client: { userID: 'me', mutedUsers: [], on: () => ({ unsubscribe: () => undefined }) },
+          } as never
+        }
+      >
+        <ThemeProvider theme={defaultTheme}>
+          <TranslationProvider
+            value={{
+              t: ((key: string) => key) as never,
+              tDateTimeParser: ((input: unknown) => input) as never,
+              userLanguage: 'en',
+            }}
+          >
+            <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
+              <WithComponents overrides={{ ChannelDetailsActionItem: ActionItemProbe }}>
+                <ChannelMemberActionsSheet member={member} onClose={jest.fn()} visible />
+              </WithComponents>
+            </ChannelDetailsContextProvider>
+          </TranslationProvider>
+        </ThemeProvider>
+        ,
+      </ChatContext.Provider>,
+    );
+
+    expect(actionsSpy).toHaveBeenCalledWith({
+      channel,
+      getChannelMemberActionItems,
+      member,
+    });
+  });
+
+  it('renders nothing when visible is false', () => {
+    actionsSpy.mockReturnValue([buildItem()]);
+    const { toJSON } = renderSheet({ visible: false });
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/ChannelDetails/__tests__/members/ChannelMemberItem.test.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import Dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { ThemeProvider } from '../../../../contexts';
+import { ChannelDetailsContextProvider } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
+import { generateMember } from '../../../../mock-builders/generator/member';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import type { GetMemberRoleLabel } from '../../ChannelDetails';
+import { ChannelMemberItem } from '../../components/members/ChannelMemberItem';
+
+Dayjs.extend(relativeTime);
+
+const memberFor = (overrides: Partial<NonNullable<ChannelMemberResponse['user']>> = {}) =>
+  generateMember({
+    user: generateUser({
+      id: 'alice',
+      name: 'Alice',
+      online: false,
+      ...overrides,
+    }),
+  });
+
+const defaultChannel = {
+  cid: 'messaging:test',
+  data: { created_by: { id: 'creator' } },
+  on: () => ({ unsubscribe: () => undefined }),
+} as unknown as Channel;
+
+const renderRow = ({
+  channel = defaultChannel,
+  currentUserId,
+  getMemberRoleLabel,
+  mutedUsers = [],
+  ...props
+}: React.ComponentProps<typeof ChannelMemberItem> & {
+  channel?: Channel;
+  currentUserId?: string;
+  getMemberRoleLabel?: GetMemberRoleLabel;
+  mutedUsers?: Array<{ target: { id: string }; user: { id: string } }>;
+}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string, options?: Record<string, unknown>) => {
+            if (key === 'timestamp/UserActivityStatus' && options && 'timestamp' in options) {
+              return `Last seen ${Dayjs(options.timestamp as Date).fromNow()}`;
+            }
+            return key;
+          }) as never,
+          tDateTimeParser: (input) => Dayjs(input),
+          userLanguage: 'en',
+        }}
+      >
+        <ChatContext.Provider
+          value={
+            {
+              client: {
+                mutedUsers,
+                on: () => ({ unsubscribe: () => undefined }),
+                userID: currentUserId,
+              },
+            } as never
+          }
+        >
+          <ChannelDetailsContextProvider value={{ channel, getMemberRoleLabel }}>
+            <ChannelMemberItem {...props} />
+          </ChannelDetailsContextProvider>
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelMemberItem accessibility', () => {
+  it('composes name and offline status into the accessible label', () => {
+    renderRow({ member: memberFor() });
+    expect(screen.getByLabelText('Alice, Offline')).toBeTruthy();
+  });
+
+  it('includes the online status in the accessible label when the member is online', () => {
+    renderRow({ member: memberFor({ online: true }) });
+    expect(screen.getByLabelText('Alice, Online')).toBeTruthy();
+  });
+
+  it('uses "You" when the row represents the current user', () => {
+    renderRow({ currentUserId: 'alice', member: memberFor() });
+    expect(screen.getByLabelText('You, Offline')).toBeTruthy();
+  });
+
+  it('includes the role label in the accessible label between name and status', () => {
+    renderRow({
+      getMemberRoleLabel: () => 'Admin',
+      member: memberFor(),
+    });
+    expect(screen.getByLabelText('Alice, Admin, Offline')).toBeTruthy();
+  });
+
+  it('includes "Muted" in the accessible label when the member is muted', () => {
+    renderRow({
+      currentUserId: 'me',
+      member: memberFor(),
+      mutedUsers: [{ target: { id: 'alice' }, user: { id: 'me' } }],
+    });
+    expect(screen.getByLabelText('Alice, Muted, Offline')).toBeTruthy();
+  });
+});
+
+describe('ChannelMemberItem muted indicator', () => {
+  it('renders the muted icon when the member is muted', () => {
+    renderRow({
+      currentUserId: 'me',
+      member: memberFor(),
+      mutedUsers: [{ target: { id: 'alice' }, user: { id: 'me' } }],
+    });
+    expect(screen.getByTestId('channel-member-muted-indicator')).toBeTruthy();
+  });
+
+  it('does not render the muted icon when the member is not muted', () => {
+    renderRow({ member: memberFor() });
+    expect(screen.queryByTestId('channel-member-muted-indicator')).toBeNull();
+  });
+});
+
+describe('ChannelMemberItem large variant', () => {
+  it('renders the role label in the large profile header', () => {
+    renderRow({
+      getMemberRoleLabel: () => 'Admin',
+      member: memberFor(),
+      size: 'lg',
+    });
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+});
+
+describe('ChannelMemberItem activity status', () => {
+  it('shows "Online" for an online member', () => {
+    renderRow({ member: memberFor({ online: true }) });
+    expect(screen.getByText('Online')).toBeTruthy();
+  });
+
+  it('shows "Offline" for an offline member with no last_active', () => {
+    renderRow({ member: memberFor({ online: false }) });
+    expect(screen.getByText('Offline')).toBeTruthy();
+  });
+
+  it('shows a "Last seen ..." string for an offline member with last_active', () => {
+    jest.useFakeTimers().setSystemTime(new Date('2026-05-13T12:00:00Z'));
+    const tenMinutesAgo = new Date('2026-05-13T11:50:00Z').toISOString();
+
+    renderRow({ member: memberFor({ last_active: tenMinutesAgo, online: false }) });
+
+    expect(screen.getByText(/^Last seen /)).toBeTruthy();
+    jest.useRealTimers();
+  });
+});
+
+describe('ChannelMemberItem role label rendering', () => {
+  it('renders the role label string returned by useMemberRoleLabel', () => {
+    renderRow({
+      getMemberRoleLabel: () => 'Admin',
+      member: memberFor(),
+    });
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+
+  it('renders no role label when the hook returns null', () => {
+    renderRow({
+      getMemberRoleLabel: () => null,
+      member: memberFor(),
+    });
+    expect(screen.queryByText('Admin')).toBeNull();
+    expect(screen.queryByText('Moderator')).toBeNull();
+    expect(screen.queryByText('Owner')).toBeNull();
+  });
+});
+
+describe('ChannelMemberItem press behavior', () => {
+  it('calls onPress when the row is pressed', () => {
+    const onPress = jest.fn();
+    renderRow({ member: memberFor(), onPress, testID: 'member-row' });
+
+    fireEvent.press(screen.getByTestId('member-row'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a non-interactive row when no onPress is provided', () => {
+    renderRow({ member: memberFor(), testID: 'member-row' });
+
+    const row = screen.getByTestId('member-row');
+    expect(row.props.accessibilityRole).toBeUndefined();
+  });
+});

package/src/components/ChannelDetails/__tests__/members/ChannelMemberList.test.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import { ActivityIndicator, type FlatListProps as RNFlatListProps, Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } 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 { generateMember } from '../../../../mock-builders/generator/member';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import type { ChannelMemberActionsSheetProps } from '../../components/members/ChannelMemberActionsSheet';
+import type { ChannelMemberItemProps } from '../../components/members/ChannelMemberItem';
+import { ChannelMemberList } from '../../components/members/ChannelMemberList';
+import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
+
+type FlatListProps = RNFlatListProps<ChannelMemberResponse>;
+
+const mockFlatList = jest.fn((_props: FlatListProps) => null);
+
+jest.mock('../../hooks/members/useChannelAllMembers', () => ({
+  useChannelAllMembers: jest.fn(),
+}));
+
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native');
+
+  return new Proxy(actual, {
+    get(target, prop, receiver) {
+      if (prop === 'FlatList') {
+        return (props: FlatListProps) => mockFlatList(props);
+      }
+
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+});
+
+const channel = {
+  cid: 'messaging:test',
+  on: () => ({ unsubscribe: () => undefined }),
+} as unknown as Channel;
+
+type HookResult = ReturnType<typeof useChannelAllMembers>;
+
+const baseHookResult = (): HookResult => ({
+  hasMore: false,
+  loading: false,
+  loadMore: jest.fn(),
+  results: [],
+});
+
+const mockHook = (overrides: Partial<HookResult> = {}) => {
+  const value = { ...baseHookResult(), ...overrides };
+  (useChannelAllMembers as jest.Mock).mockReturnValue(value);
+  return value;
+};
+
+const itemProbeCalls: ChannelMemberItemProps[] = [];
+const MemberListItemProbe = (props: ChannelMemberItemProps) => {
+  itemProbeCalls.push(props);
+  return <Text testID={`member-${props.member.user?.id}`}>{props.member.user?.name}</Text>;
+};
+
+const sheetProbeCalls: ChannelMemberActionsSheetProps[] = [];
+const MemberActionsSheetProbe = (props: ChannelMemberActionsSheetProps) => {
+  sheetProbeCalls.push(props);
+  return <Text testID='member-actions-sheet-probe'>{props.member.user?.id ?? ''}</Text>;
+};
+
+const renderList = ({
+  additionalFlatListProps,
+  currentUserId,
+  onMemberPress,
+}: {
+  additionalFlatListProps?: Partial<FlatListProps>;
+  currentUserId?: string;
+  onMemberPress?: (member: ChannelMemberResponse) => void;
+} = {}) =>
+  render(
+    <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: currentUserId,
+              },
+            } as never
+          }
+        >
+          <ChannelDetailsContextProvider value={{ channel, onMemberPress }}>
+            <WithComponents
+              overrides={{
+                ChannelMemberActionsSheet: MemberActionsSheetProbe,
+                ChannelMemberItem: MemberListItemProbe,
+              }}
+            >
+              <ChannelMemberList additionalFlatListProps={additionalFlatListProps} />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+const latestListProps = () => {
+  const calls = mockFlatList.mock.calls;
+  return calls[calls.length - 1]?.[0];
+};
+
+describe('ChannelMemberList', () => {
+  beforeEach(() => {
+    mockFlatList.mockClear();
+    itemProbeCalls.length = 0;
+    sheetProbeCalls.length = 0;
+    mockHook();
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders the loading skeleton while loading with no results yet', () => {
+    mockHook({ loading: true, results: [] });
+
+    const list = renderList();
+
+    expect(list.getByTestId('member-list-loading-skeleton')).toBeTruthy();
+    expect(mockFlatList).not.toHaveBeenCalled();
+  });
+
+  it('renders the list (not the skeleton) once results exist even while loading', () => {
+    mockHook({
+      loading: true,
+      results: [generateMember({ user: generateUser({ id: 'alice' }) })],
+    });
+
+    const list = renderList();
+
+    expect(list.queryByTestId('member-list-loading-skeleton')).toBeNull();
+    expect(mockFlatList).toHaveBeenCalled();
+  });
+
+  it('feeds the hook results into the flat list with a stable keyExtractor', () => {
+    const alice = generateMember({ user: generateUser({ id: 'alice', name: 'Alice' }) });
+    const bob = generateMember({ user: generateUser({ id: 'bob', name: 'Bob' }) });
+    mockHook({ results: [alice, bob] });
+
+    renderList();
+
+    const props = latestListProps();
+    expect((props?.data as ChannelMemberResponse[]).map((m) => m.user?.id)).toEqual([
+      'alice',
+      'bob',
+    ]);
+    expect(props?.keyExtractor?.(alice, 0)).toBe('alice');
+  });
+
+  it('wires onEndReached to loadMore (with threshold) only when there is more to load', () => {
+    const loadMore = jest.fn();
+    mockHook({ hasMore: true, loadMore, results: [] });
+
+    renderList();
+
+    const props = latestListProps();
+    expect(props?.onEndReachedThreshold).toBe(0.2);
+    expect(props?.onEndReached).toBe(loadMore);
+  });
+
+  it('omits onEndReached when there is no more to load', () => {
+    mockHook({ hasMore: false, results: [] });
+
+    renderList();
+
+    expect(latestListProps()?.onEndReached).toBeUndefined();
+  });
+
+  it('renders a footer spinner only while loading more (loading with existing results)', () => {
+    const results = [generateMember({ user: generateUser({ id: 'alice' }) })];
+    mockHook({ loading: true, results });
+    renderList();
+    const footer = latestListProps()?.ListFooterComponent as React.ReactElement;
+    expect(footer).not.toBeNull();
+    expect(footer.type).toBe(ActivityIndicator);
+
+    mockFlatList.mockClear();
+    mockHook({ loading: false, results });
+    renderList();
+    expect(latestListProps()?.ListFooterComponent).toBeNull();
+  });
+
+  it('forwards additionalFlatListProps to the underlying flat list', () => {
+    mockHook({ results: [generateMember({ user: generateUser({ id: 'alice' }) })] });
+
+    renderList({ additionalFlatListProps: { bounces: false, testID: 'custom-member-list' } });
+
+    const props = latestListProps();
+    expect(props?.testID).toBe('custom-member-list');
+    expect(props?.bounces).toBe(false);
+  });
+
+  it('opens the per-member actions sheet on press when no onMemberPress override is provided, and closes it', () => {
+    const bob = generateMember({ user: generateUser({ id: 'bob', name: 'Bob' }) });
+    mockHook({ results: [bob] });
+
+    const list = renderList();
+
+    const { renderItem } = latestListProps() ?? {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    render((renderItem as any)({ index: 0, item: bob, separators: {} as never }));
+    const captured = itemProbeCalls.find((p) => p.member.user?.id === 'bob');
+
+    expect(list.queryByTestId('member-actions-sheet-probe')).toBeNull();
+    act(() => captured?.onPress?.(bob));
+    expect(list.getByTestId('member-actions-sheet-probe').props.children).toBe('bob');
+
+    act(() => sheetProbeCalls[sheetProbeCalls.length - 1]?.onClose?.());
+    expect(list.queryByTestId('member-actions-sheet-probe')).toBeNull();
+  });
+
+  it('calls onMemberPress instead of opening the sheet when an override is provided', () => {
+    const alice = generateMember({ user: generateUser({ id: 'alice', name: 'Alice' }) });
+    const onMemberPress = jest.fn();
+    mockHook({ results: [alice] });
+
+    const list = renderList({ onMemberPress });
+
+    const { renderItem } = latestListProps() ?? {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    render((renderItem as any)({ index: 0, item: alice, separators: {} as never }));
+    const captured = itemProbeCalls.find((p) => p.member.user?.id === 'alice');
+
+    act(() => captured?.onPress?.(alice));
+
+    expect(onMemberPress).toHaveBeenCalledTimes(1);
+    expect(onMemberPress.mock.calls[0][0].user?.id).toBe('alice');
+    expect(list.queryByTestId('member-actions-sheet-probe')).toBeNull();
+  });
+});