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

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

@@ -0,0 +1,227 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { StateStore } from 'stream-chat';
+import type { SearchSourceState, UserResponse } from 'stream-chat';
+
+import { ChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { SelectionStore } from '../../../../state-store/selection-store';
+import type { AddMemberSearchResultItemProps } from '../../components/members/AddMemberSearchResultItem';
+import { ChannelAddMembers } from '../../components/members/ChannelAddMembers';
+
+const mockRowProbe: AddMemberSearchResultItemProps[] = [];
+
+const mockAddNotification = jest.fn();
+
+jest.mock('../../../Notifications/hooks/useNotificationApi', () => ({
+  useNotificationApi: () => ({ addNotification: mockAddNotification }),
+}));
+
+jest.mock('../../../UIComponents/SearchInput', () => {
+  const ReactLib = require('react');
+  const { Text } = require('react-native');
+  return {
+    SearchInput: ({ onChangeText }: { onChangeText: (t: string) => void }) =>
+      ReactLib.createElement(
+        ReactLib.Fragment,
+        null,
+        ReactLib.createElement(
+          Text,
+          { onPress: () => onChangeText('query'), testID: 'search-change' },
+          'change',
+        ),
+        ReactLib.createElement(
+          Text,
+          { onPress: () => onChangeText(''), testID: 'search-clear' },
+          'clear',
+        ),
+      ),
+  };
+});
+
+jest.mock('../../components/members/AddMemberSearchResultItem', () => {
+  const ReactLib = require('react');
+  const { Text } = require('react-native');
+  return {
+    AddMemberSearchResultItem: (props: AddMemberSearchResultItemProps) => {
+      mockRowProbe.push(props);
+      return ReactLib.createElement(
+        Text,
+        { onPress: () => props.onPress(props.user), testID: `add-member-row-${props.user.id}` },
+        props.user.id,
+      );
+    },
+  };
+});
+
+type FakeSearchSource = {
+  resetState: jest.Mock;
+  search: jest.Mock;
+  state: StateStore<
+    Pick<SearchSourceState<UserResponse>, 'hasNext' | 'isLoading' | 'items' | 'lastQueryError'>
+  >;
+};
+
+const makeSearchSource = (
+  overrides: Partial<{
+    hasNext: boolean;
+    isLoading: boolean;
+    items: UserResponse[];
+    lastQueryError: Error;
+  }> = {},
+): FakeSearchSource => ({
+  resetState: jest.fn(),
+  search: jest.fn(),
+  state: new StateStore({
+    hasNext: overrides.hasNext ?? false,
+    isLoading: overrides.isLoading ?? false,
+    items: overrides.items,
+    ...(overrides.lastQueryError ? { lastQueryError: overrides.lastQueryError } : {}),
+  }),
+});
+
+const tree = (
+  searchSource: FakeSearchSource,
+  selectionStore: SelectionStore,
+  props: { additionalFlatListProps?: object } = {},
+) => (
+  <ThemeProvider theme={defaultTheme}>
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChannelAddMembersContext.Provider value={{ searchSource, selectionStore } as never}>
+        <ChannelAddMembers additionalFlatListProps={props.additionalFlatListProps as never} />
+      </ChannelAddMembersContext.Provider>
+    </TranslationProvider>
+  </ThemeProvider>
+);
+
+describe('ChannelAddMembers', () => {
+  beforeEach(() => {
+    mockRowProbe.length = 0;
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('calls search with an empty string when the component is created', () => {
+    const searchSource = makeSearchSource();
+    render(tree(searchSource, new SelectionStore()));
+
+    expect(searchSource.search).toHaveBeenCalledTimes(1);
+    expect(searchSource.search).toHaveBeenCalledWith('');
+  });
+
+  it('wires the search input to the search source callbacks', () => {
+    const searchSource = makeSearchSource();
+    render(tree(searchSource, new SelectionStore()));
+
+    fireEvent.press(screen.getByTestId('search-change'));
+    expect(searchSource.search).toHaveBeenCalledWith('query');
+
+    fireEvent.press(screen.getByTestId('search-clear'));
+    expect(searchSource.search).toHaveBeenCalledWith('');
+  });
+
+  it('renders a row per result and selects the user on press', () => {
+    const userA = generateUser({ id: 'u-1' });
+    const userB = generateUser({ id: 'u-2' });
+    const selectionStore = new SelectionStore();
+
+    render(tree(makeSearchSource({ items: [userA, userB] }), selectionStore));
+
+    expect(mockRowProbe).toHaveLength(2);
+    expect(mockRowProbe.map((p) => p.user.id)).toEqual(['u-1', 'u-2']);
+
+    fireEvent.press(screen.getByTestId('add-member-row-u-1'));
+    expect(selectionStore.state.getLatestValue().selectedIds.has('u-1')).toBe(true);
+  });
+
+  it('shows the loading skeleton while loading and the empty state when no results', () => {
+    const { rerender } = render(tree(makeSearchSource({ isLoading: true }), new SelectionStore()));
+    expect(screen.getByTestId('user-list-loading-skeleton')).toBeTruthy();
+
+    rerender(tree(makeSearchSource({ isLoading: false, items: [] }), new SelectionStore()));
+
+    expect(screen.queryByTestId('user-list-loading-skeleton')).toBeNull();
+    expect(screen.getByText('No user found')).toBeTruthy();
+  });
+
+  it('renders the loading-more indicator only while loading with existing results', () => {
+    render(
+      tree(
+        makeSearchSource({ isLoading: true, items: [generateUser({ id: 'alice' })] }),
+        new SelectionStore(),
+      ),
+    );
+    expect(screen.UNSAFE_getByType(require('react-native').ActivityIndicator)).toBeTruthy();
+  });
+
+  it('loads more via the search source when the list end is reached and there is a next page', () => {
+    const searchSource = makeSearchSource({
+      hasNext: true,
+      items: [generateUser({ id: 'alice' })],
+    });
+    render(tree(searchSource, new SelectionStore()));
+    searchSource.search.mockClear();
+
+    const list = screen.getByTestId('channel-add-members-list');
+    expect(list.props.onEndReachedThreshold).toBe(0.2);
+    list.props.onEndReached();
+    expect(searchSource.search).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not load more when there is no next page', () => {
+    const searchSource = makeSearchSource({
+      hasNext: false,
+      items: [generateUser({ id: 'alice' })],
+    });
+    render(tree(searchSource, new SelectionStore()));
+    searchSource.search.mockClear();
+
+    screen.getByTestId('channel-add-members-list').props.onEndReached();
+    expect(searchSource.search).not.toHaveBeenCalled();
+  });
+
+  it('dispatches an error notification when the user search fails', () => {
+    const lastQueryError = new Error('boom');
+    render(tree(makeSearchSource({ lastQueryError }), new SelectionStore()));
+
+    expect(mockAddNotification).toHaveBeenCalledTimes(1);
+    expect(mockAddNotification).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: 'Failed to load users',
+        options: expect.objectContaining({
+          severity: 'error',
+          type: 'api:channel:query-users:failed',
+        }),
+        origin: expect.objectContaining({ emitter: 'AddChannelMembers' }),
+      }),
+    );
+  });
+
+  it('does not dispatch an error notification when the search succeeds', () => {
+    render(tree(makeSearchSource({ items: [generateUser({ id: 'u-1' })] }), new SelectionStore()));
+
+    expect(mockAddNotification).not.toHaveBeenCalled();
+  });
+
+  it('forwards additionalFlatListProps to the underlying list', () => {
+    render(
+      tree(makeSearchSource(), new SelectionStore(), {
+        additionalFlatListProps: { bounces: false, testID: 'custom-list' },
+      }),
+    );
+
+    const list = screen.getByTestId('custom-list');
+    expect(list.props.bounces).toBe(false);
+    expect(screen.queryByTestId('channel-add-members-list')).toBeNull();
+  });
+});

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { AccessibilityProvider } from '../../../../contexts/accessibilityContext/AccessibilityContext';
+import { useChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+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 { ChannelAddMembersModal } from '../../components/members/ChannelAddMembersModal';
+
+jest.mock('../../../../hooks/actions/useChannelActions');
+const mockedUseChannelActions = jest.mocked(useChannelActions);
+
+// Stands in for the real ChannelAddMembers list: drives the shared selection store
+// directly instead of running the search source / list.
+const AddMembersProbe = () => {
+  const { selectionStore } = useChannelAddMembersContext();
+  return (
+    <>
+      <Text testID='add-members-probe'>add-members</Text>
+      <Pressable onPress={() => selectionStore.select('picked-1')} testID='probe-select-one'>
+        <Text>select one</Text>
+      </Pressable>
+      <Pressable onPress={() => selectionStore.deselect('picked-1')} testID='probe-clear-selection'>
+        <Text>clear</Text>
+      </Pressable>
+    </>
+  );
+};
+
+const buildChannel = (
+  members: ChannelMemberResponse[],
+  memberCount?: number,
+  overrides?: Partial<Channel>,
+): Channel =>
+  ({
+    addMembers: jest.fn().mockResolvedValue(undefined),
+    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 renderModal = ({
+  capabilities,
+  channel,
+  onClose = jest.fn(),
+  visible = true,
+}: {
+  channel: Channel;
+  capabilities?: Partial<OwnCapabilitiesContextValue>;
+  onClose?: () => void;
+  visible?: boolean;
+}) =>
+  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: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          >
+            <ChannelDetailsContextProvider
+              value={{ channel: applyCapabilities(channel, capabilities) }}
+            >
+              <WithComponents overrides={{ ChannelAddMembers: AddMembersProbe }}>
+                <ChannelAddMembersModal onClose={onClose} visible={visible} />
+              </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('ChannelAddMembersModal', () => {
+  let addMembersSpy: jest.Mock;
+
+  beforeEach(() => {
+    addMembersSpy = jest.fn(async (_ids: string[], options?: { onSuccess?: () => unknown }) => {
+      await options?.onSuccess?.();
+    });
+    mockedUseChannelActions.mockReturnValue({
+      addMembers: addMembersSpy,
+    } as unknown as ReturnType<typeof useChannelActions>);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    mockedUseChannelActions.mockReset();
+  });
+
+  it('enables the confirm button only while ChannelAddMembers reports a selection', () => {
+    const channel = buildChannel(makeMembers(3), 3);
+
+    renderModal({ channel });
+
+    const confirm = screen.getByTestId('channel-details-add-members-confirm-button');
+    expect(confirm.props.accessibilityState).toMatchObject({ disabled: true });
+
+    fireEvent.press(screen.getByTestId('probe-select-one'));
+    expect(
+      screen.getByTestId('channel-details-add-members-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false });
+
+    fireEvent.press(screen.getByTestId('probe-clear-selection'));
+    expect(
+      screen.getByTestId('channel-details-add-members-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: true });
+  });
+
+  it('calls addMembers from useChannelActions with the selected user ids and closes the sheet on confirm', async () => {
+    const channel = buildChannel(makeMembers(3), 3);
+    const onClose = jest.fn();
+
+    renderModal({ channel, onClose });
+
+    fireEvent.press(screen.getByTestId('probe-select-one'));
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-add-members-confirm-button'));
+      await Promise.resolve();
+    });
+
+    expect(addMembersSpy).toHaveBeenCalledWith(
+      ['picked-1'],
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(channel.addMembers).not.toHaveBeenCalled();
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+  });
+
+  it('calls onClose when closed via the X', () => {
+    const channel = buildChannel(makeMembers(3), 3);
+    const onClose = jest.fn();
+
+    renderModal({ channel, onClose });
+
+    fireEvent.press(screen.getByLabelText('a11y/Close'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the sheet open and re-enables confirm when addMembers does not invoke onSuccess', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    addMembersSpy.mockResolvedValueOnce(undefined);
+    const channel = buildChannel(makeMembers(3), 3);
+    const onClose = jest.fn();
+
+    renderModal({ channel, onClose });
+
+    fireEvent.press(screen.getByTestId('probe-select-one'));
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-add-members-confirm-button'));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(addMembersSpy).toHaveBeenCalledWith(
+      ['picked-1'],
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.getByTestId('add-members-probe')).toBeTruthy();
+    expect(
+      screen.getByTestId('channel-details-add-members-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false });
+
+    warnSpy.mockRestore();
+  });
+});

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { 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 { generateMember } from '../../../../mock-builders/generator/member';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { ChannelAllMembersModal } from '../../components/members/ChannelAllMembersModal';
+import * as useChannelDetailsMembersPreviewModule from '../../hooks/useChannelDetailsMembersPreview';
+
+const MemberListProbe = () => <Text testID='member-list-probe'>full-member-list</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 renderModal = ({
+  capabilities,
+  channel,
+  onAddMembersPress = jest.fn(),
+  onClose = jest.fn(),
+  visible = true,
+}: {
+  channel: Channel;
+  capabilities?: Partial<OwnCapabilitiesContextValue>;
+  onAddMembersPress?: () => void;
+  onClose?: () => void;
+  visible?: boolean;
+}) =>
+  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: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          >
+            <ChannelDetailsContextProvider
+              value={{ channel: applyCapabilities(channel, capabilities) }}
+            >
+              <WithComponents overrides={{ ChannelMemberList: MemberListProbe }}>
+                <ChannelAllMembersModal
+                  onAddMembersPress={onAddMembersPress}
+                  onClose={onClose}
+                  visible={visible}
+                />
+              </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('ChannelAllMembersModal', () => {
+  let previewSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    previewSpy = jest.spyOn(
+      useChannelDetailsMembersPreviewModule,
+      'useChannelDetailsMembersPreview',
+    );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders the member list and closes when the close button is pressed', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+    const onClose = jest.fn();
+
+    renderModal({ channel, onClose });
+
+    expect(screen.getByTestId('member-list-probe')).toBeTruthy();
+
+    fireEvent.press(screen.getByLabelText('a11y/Close'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides the add-members button when the user lacks update-channel-members capability', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+
+    renderModal({ channel });
+
+    expect(screen.queryByTestId('channel-details-member-list-add-button')).toBeNull();
+  });
+
+  it('shows the add-members button and invokes onAddMembersPress when pressed', () => {
+    previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
+    const channel = buildChannel(makeMembers(12), 12);
+    const onAddMembersPress = jest.fn();
+
+    renderModal({
+      capabilities: { updateChannelMembers: true },
+      channel,
+      onAddMembersPress,
+    });
+
+    fireEvent.press(screen.getByTestId('channel-details-member-list-add-button'));
+
+    expect(onAddMembersPress).toHaveBeenCalledTimes(1);
+  });
+});