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

package/src/components/AutoCompleteInput/mentionItems/__tests__/MentionItems.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+// UserAvatar pulls in ComponentsContext defaults which transitively load
+// stream-chat-js's CJS dist; that fails to resolve @babel/runtime when the
+// SDK is consumed from a workspace symlink during tests. The avatar itself
+// isn't what we assert on here, so substitute a no-op.
+jest.mock('../../../ui/Avatar/UserAvatar', () => ({
+  UserAvatar: () => null,
+}));
+
+// Same reason — useMessageComposer (used by AutoCompleteSuggestionItem) pulls
+// stream-chat-js's CJS dist at module load. The dispatcher we're testing
+// doesn't use these hooks itself, so stub them.
+jest.mock('../../../../contexts/messageInputContext/hooks/useMessageComposer', () => ({
+  useMessageComposer: () => ({ textComposer: { handleSelect: () => {} } }),
+}));
+jest.mock('../../../../contexts/messageInputContext/hooks/useIsCommandDisabled', () => ({
+  useIsCommandDisabled: () => false,
+}));
+
+import type {
+  ChannelMentionSuggestion,
+  HereMentionSuggestion,
+  RoleMentionSuggestion,
+  UserGroupMentionSuggestion,
+  UserSuggestion,
+} from 'stream-chat';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { MentionSuggestionItem } from '../../AutoCompleteSuggestionItem';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeProvider theme={defaultTheme}>{ui}</ThemeProvider>);
+
+const userEntity: UserSuggestion = {
+  id: 'u1',
+  mentionType: 'user',
+  name: 'Alice',
+  tokenizedDisplayName: { parts: ['Alice'], token: '' },
+} as unknown as UserSuggestion;
+
+const channelEntity: ChannelMentionSuggestion = {
+  id: 'channel',
+  mentionType: 'channel',
+  name: 'channel',
+  tokenizedDisplayName: { parts: ['channel'], token: '' },
+} as unknown as ChannelMentionSuggestion;
+
+const hereEntity: HereMentionSuggestion = {
+  id: 'here',
+  mentionType: 'here',
+  name: 'here',
+  tokenizedDisplayName: { parts: ['here'], token: '' },
+} as unknown as HereMentionSuggestion;
+
+const roleEntity: RoleMentionSuggestion = {
+  id: 'admin',
+  mentionType: 'role',
+  name: 'admin',
+  tokenizedDisplayName: { parts: ['admin'], token: '' },
+} as unknown as RoleMentionSuggestion;
+
+const groupEntity: UserGroupMentionSuggestion = {
+  description: 'Engineering org',
+  id: 'eng',
+  memberCount: 42,
+  mentionType: 'user_group',
+  name: 'engineering',
+  tokenizedDisplayName: { parts: ['engineering'], token: '' },
+} as unknown as UserGroupMentionSuggestion;
+
+describe('MentionSuggestionItem', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a user row with the display name', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...userEntity} />);
+    expect(getByText('Alice')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @channel with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...channelEntity} />);
+    expect(getByText('@channel')).toBeTruthy();
+    expect(getByText('mention/Channel Description')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @here with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...hereEntity} />);
+    expect(getByText('@here')).toBeTruthy();
+    expect(getByText('mention/Here Description')).toBeTruthy();
+  });
+
+  it('renders a role row with the role name and the notify subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...roleEntity} />);
+    expect(getByText('@admin')).toBeTruthy();
+    // The test translation context echoes the i18n key; the {{ role }}
+    // interpolation is left as-is, which is enough to assert the right key
+    // was selected with the right argument.
+    expect(getByText(/Notify all .* members/)).toBeTruthy();
+  });
+
+  it('renders a user group row with name + description', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...groupEntity} />);
+    expect(getByText('@engineering')).toBeTruthy();
+    expect(getByText('Engineering org')).toBeTruthy();
+  });
+
+  it('omits the subtitle slot when a user group has no description', () => {
+    const { queryByText } = wrap(
+      <MentionSuggestionItem
+        {...({ ...groupEntity, description: undefined } as UserGroupMentionSuggestion)}
+      />,
+    );
+    expect(queryByText('Engineering org')).toBeNull();
+  });
+
+  it('renders nothing for an unknown mention type', () => {
+    const { toJSON } = wrap(
+      <MentionSuggestionItem
+        {...({ id: 'x', mentionType: 'unknown' } as unknown as ChannelMentionSuggestion)}
+      />,
+    );
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/__tests__/TokenizedSuggestionParts.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
+
+describe('TokenizedSuggestionParts', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the fallback when no tokenized payload is provided', () => {
+    const { getByText } = render(<TokenizedSuggestionParts fallback='Jane Doe' />);
+    expect(getByText('Jane Doe')).toBeTruthy();
+  });
+
+  it('renders nothing when neither tokenized payload nor fallback is provided', () => {
+    const { toJSON } = render(<TokenizedSuggestionParts />);
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders all parts when the tokenized payload is present', () => {
+    const { queryByText } = render(
+      <TokenizedSuggestionParts tokenizedDisplayName={{ parts: ['Al', 'i', 'ce'], token: 'i' }} />,
+    );
+    // The full name still reads through because RN concatenates nested Text children.
+    expect(queryByText('Alice')).toBeTruthy();
+  });
+
+  it('wraps the matched part in a separate Text node so it can be styled', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Al', 'ice', 'son'], token: 'ice' }}
+      />,
+    );
+    // The matched substring is rendered inside a nested Text — the only one
+    // carrying our matchStyle — so the count of styled descendants equals the
+    // number of matching parts (case-insensitive).
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) =>
+        typeof node.type !== 'string' &&
+        Array.isArray(node.props?.style) === false &&
+        node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+
+  it('matches case-insensitively', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Channel'], token: 'channel' }}
+      />,
+    );
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) => typeof node.type !== 'string' && node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/index.ts

@@ -0,0 +1,16 @@
+export { EnhancedMentionContent } from './EnhancedMentionContent';
+export type { EnhancedMentionContentProps } from './EnhancedMentionContent';
+export { EnhancedMentionIcon } from './EnhancedMentionIcon';
+export type { EnhancedMentionIconProps } from './EnhancedMentionIcon';
+export { MentionBroadcastItem } from './MentionBroadcastItem';
+export type { MentionBroadcastItemProps } from './MentionBroadcastItem';
+export { MentionItem } from './MentionItem';
+export type { MentionItemProps } from './MentionItem';
+export { MentionRoleItem } from './MentionRoleItem';
+export type { MentionRoleItemProps } from './MentionRoleItem';
+export { MentionUserGroupItem } from './MentionUserGroupItem';
+export type { MentionUserGroupItemProps } from './MentionUserGroupItem';
+export { MentionUserItem } from './MentionUserItem';
+export type { MentionUserItemProps } from './MentionUserItem';
+export { TokenizedSuggestionParts } from './TokenizedSuggestionParts';
+export type { TokenizedSuggestionPartsProps } from './TokenizedSuggestionParts';

package/src/components/ChannelDetails/ChannelDetails.tsx

@@ -3,6 +3,8 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
+import type { GetChannelDetailsNavigationItems } from './hooks/useChannelDetailsNavigationItems';
+
 import {
   ChannelDetailsContextProvider,
   type ChannelDetailsContextValue,
@@ -59,6 +61,15 @@ export type ChannelDetailsProps = {
    * or add items — for example, to inject a "Send Direct Message" action in your app.
    */
   getChannelMemberActionItems?: GetChannelMemberActionItems;
+  /**
+   * Customize the navigation rows rendered in the channel details navigation section.
+   *
+   * Receives the built-in `defaultItems` (and a `context`) and returns the rows to render.
+   * Map over `defaultItems` to override a row's `onPress` (e.g. to push your own screen) or
+   * to add/remove rows. Any row whose `onPress` you leave untouched keeps its built-in
+   * behavior (opening the built-in modal), including sections added in future SDK versions.
+   */
+  getNavigationItems?: GetChannelDetailsNavigationItems;
   /**
    * Override the role label shown next to each member in the channel details screen.
    *
@@ -112,6 +123,7 @@ export const ChannelDetailsContent = () => {
   } = useTheme();
   const {
     ChannelDetailsActionsSection,
+    ChannelDetailsEditButton,
     ChannelDetailsMemberSection,
     ChannelDetailsNavigationSection,
     ChannelDetailsProfile,
@@ -128,10 +140,10 @@ export const ChannelDetailsContent = () => {
         containerOverride,
       ]}
     >
-      <ChannelDetailsNavHeader />
+      <ChannelDetailsNavHeader action={<ChannelDetailsEditButton />} />
       <ScrollView contentContainerStyle={[styles.scrollContent, scrollContentOverride]}>
         <ChannelDetailsProfile />
-        {ChannelDetailsNavigationSection ? <ChannelDetailsNavigationSection /> : null}
+        <ChannelDetailsNavigationSection />
         {isDirect ? null : <ChannelDetailsMemberSection />}
         <ChannelDetailsActionsSection />
       </ScrollView>
@@ -149,6 +161,7 @@ export const ChannelDetails = ({
   getChannelActionItems,
   getChannelMemberActionItems,
   getMemberRoleLabel,
+  getNavigationItems,
   onAddMembersPress,
   onBack,
   onChannelDismiss,
@@ -165,6 +178,7 @@ export const ChannelDetails = ({
       getChannelActionItems,
       getChannelMemberActionItems,
       getMemberRoleLabel,
+      getNavigationItems,
       onAddMembersPress,
       onBack,
       onChannelDismiss,
@@ -179,6 +193,7 @@ export const ChannelDetails = ({
       getChannelActionItems,
       getChannelMemberActionItems,
       getMemberRoleLabel,
+      getNavigationItems,
       onAddMembersPress,
       onBack,
       onChannelDismiss,

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

@@ -52,6 +52,15 @@ const channel = {
   on: jest.fn(() => ({ unsubscribe: jest.fn() })),
 } as unknown as Channel;
 
+const buildChannel = (capabilities: string[] = []) =>
+  ({
+    cid: 'messaging:test',
+    data: { own_capabilities: capabilities },
+    id: 'test',
+    on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+    state: { members: {} },
+  }) as unknown as Channel;
+
 const renderContent = () =>
   render(
     <Providers>
@@ -94,6 +103,26 @@ describe('ChannelDetailsContent', () => {
       renderContent();
       expect(screen.queryByTestId('probe-member')).toBeNull();
     });
+
+    it('displays the edit button in the header for a group channel with the update-channel capability', () => {
+      useIsDirectChatSpy.mockReturnValue(false);
+      render(
+        <Providers>
+          <WithComponents
+            overrides={{
+              ChannelDetailsActionsSection: ActionsProbe,
+              ChannelDetailsMemberSection: MemberProbe,
+              ChannelDetailsNavigationSection: NavigationProbe,
+              ChannelDetailsProfile: ProfileProbe,
+            }}
+          >
+            <ChannelDetails channel={buildChannel(['update-channel'])} />
+          </WithComponents>
+        </Providers>,
+      );
+
+      expect(screen.getByTestId('channel-details-edit-button')).toBeTruthy();
+    });
   });
 });
 

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

@@ -0,0 +1,127 @@
+import React, { PropsWithChildren } from 'react';
+import { Text, View } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel } 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 { 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 * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
+import { ChannelDetailsEditButton } from '../components/ChannelDetailsEditButton';
+
+jest.mock('../../../hooks/actions/useChannelActions');
+const mockedUseChannelActions = jest.mocked(useChannelActions);
+
+const EditDetailsProbe = () => (
+  <View testID='channel-edit-details-probe'>
+    <Text>edit-details</Text>
+  </View>
+);
+
+const buildChannel = (capabilities: string[] = []): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: { own_capabilities: capabilities },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+const Providers = ({ children }: PropsWithChildren) => (
+  <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}
+        >
+          {children}
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </AccessibilityProvider>
+  </ThemeProvider>
+);
+
+const renderEditButton = ({
+  channel,
+  onEditChannelPress,
+}: {
+  channel: Channel;
+  onEditChannelPress?: () => void;
+}) =>
+  render(
+    <Providers>
+      <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
+        <ChannelDetailsContextProvider value={{ channel, onEditChannelPress }}>
+          <ChannelDetailsEditButton />
+        </ChannelDetailsContextProvider>
+      </WithComponents>
+    </Providers>,
+  );
+
+describe('ChannelDetailsEditButton', () => {
+  beforeEach(() => {
+    jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(false);
+    mockedUseChannelActions.mockReturnValue({
+      updateImage: jest.fn(),
+      updateName: jest.fn(),
+    } as unknown as ReturnType<typeof useChannelActions>);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    mockedUseChannelActions.mockReset();
+  });
+
+  it('does not render the Edit button when the user lacks the update-channel capability', () => {
+    renderEditButton({ channel: buildChannel([]) });
+
+    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
+  });
+
+  it('renders the Edit button when the user has the update-channel capability', () => {
+    renderEditButton({ channel: buildChannel(['update-channel']) });
+
+    const button = screen.getByTestId('channel-details-edit-button');
+    expect(button).toBeTruthy();
+    expect(screen.getByText('Edit')).toBeTruthy();
+  });
+
+  it('does not render the Edit button in a direct (1:1) channel even with the update-channel capability', () => {
+    jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
+
+    renderEditButton({ channel: buildChannel(['update-channel']) });
+
+    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
+  });
+
+  it('invokes onEditChannelPress when the Edit button is pressed', () => {
+    const onEditChannelPress = jest.fn();
+    renderEditButton({ channel: buildChannel(['update-channel']), onEditChannelPress });
+
+    fireEvent.press(screen.getByTestId('channel-details-edit-button'));
+
+    expect(onEditChannelPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens the edit modal when the Edit button is pressed and onEditChannelPress is not provided', () => {
+    renderEditButton({ channel: buildChannel(['update-channel']) });
+
+    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
+
+    fireEvent.press(screen.getByTestId('channel-details-edit-button'));
+
+    expect(screen.getByTestId('channel-edit-details-probe')).toBeTruthy();
+  });
+});

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

@@ -1,27 +1,22 @@
 import React, { PropsWithChildren } from 'react';
 import { Text, View } from 'react-native';
 
-import { fireEvent, render, screen } from '@testing-library/react-native';
+import { render, screen } from '@testing-library/react-native';
 import { NotificationManager } from 'stream-chat';
 import type { Channel } 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 { 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 * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
 import { ChannelDetailsNavHeader } from '../components/ChannelDetailsNavHeader';
 
-jest.mock('../../../hooks/actions/useChannelActions');
-const mockedUseChannelActions = jest.mocked(useChannelActions);
-
-const EditDetailsProbe = () => (
-  <View testID='channel-edit-details-probe'>
-    <Text>edit-details</Text>
+const ActionProbe = () => (
+  <View testID='channel-details-action-probe'>
+    <Text>action</Text>
   </View>
 );
 
@@ -54,77 +49,49 @@ const Providers = ({ children }: PropsWithChildren) => (
 );
 
 const renderHeader = ({
+  action,
   channel,
   onBack,
-  onEditChannelPress,
 }: {
+  action?: React.ReactNode;
   channel: Channel;
   onBack?: () => void;
-  onEditChannelPress?: () => void;
 }) =>
   render(
     <Providers>
-      <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
-        <ChannelDetailsContextProvider value={{ channel, onBack, onEditChannelPress }}>
-          <ChannelDetailsNavHeader />
-        </ChannelDetailsContextProvider>
-      </WithComponents>
+      <ChannelDetailsContextProvider value={{ channel, onBack }}>
+        <ChannelDetailsNavHeader action={action} />
+      </ChannelDetailsContextProvider>
     </Providers>,
   );
 
 describe('ChannelDetailsNavHeader', () => {
   beforeEach(() => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(false);
-    mockedUseChannelActions.mockReturnValue({
-      updateImage: jest.fn(),
-      updateName: jest.fn(),
-    } as unknown as ReturnType<typeof useChannelActions>);
   });
 
   afterEach(() => {
     jest.restoreAllMocks();
-    mockedUseChannelActions.mockReset();
   });
 
-  it('does not render the Edit button when the user lacks the update-channel capability', () => {
-    renderHeader({ channel: buildChannel([]) });
+  it('renders the action node passed via the action slot', () => {
+    renderHeader({ action: <ActionProbe />, channel: buildChannel([]) });
 
-    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
+    expect(screen.getByTestId('channel-details-action-probe')).toBeTruthy();
   });
 
-  it('renders the Edit button when the user has the update-channel capability', () => {
-    renderHeader({ channel: buildChannel(['update-channel']) });
+  it('resolves the group info title for a non-direct channel', () => {
+    renderHeader({ channel: buildChannel([]) });
 
-    const button = screen.getByTestId('channel-details-edit-button');
-    expect(button).toBeTruthy();
-    expect(screen.getByText('Edit')).toBeTruthy();
+    expect(screen.getByText('Group Info')).toBeTruthy();
   });
 
-  it('does not render the Edit button in a direct (1:1) channel even with the update-channel capability', () => {
+  it('resolves the contact info title for a direct (1:1) channel', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
 
-    renderHeader({ channel: buildChannel(['update-channel']) });
-
-    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
-  });
-
-  it('invokes onEditChannelPress when the Edit button is pressed', () => {
-    const onEditChannelPress = jest.fn();
-    renderHeader({ channel: buildChannel(['update-channel']), onEditChannelPress });
-
-    fireEvent.press(screen.getByTestId('channel-details-edit-button'));
-
-    expect(onEditChannelPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('opens the edit modal when the Edit button is pressed and onEditChannelPress is not provided', () => {
-    renderHeader({ channel: buildChannel(['update-channel']) });
-
-    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
-
-    fireEvent.press(screen.getByTestId('channel-details-edit-button'));
+    renderHeader({ channel: buildChannel([]) });
 
-    expect(screen.getByTestId('channel-edit-details-probe')).toBeTruthy();
+    expect(screen.getByText('Contact Info')).toBeTruthy();
   });
 
   it('renders the back button only when onBack is provided', () => {
@@ -133,11 +100,9 @@ describe('ChannelDetailsNavHeader', () => {
 
     rerender(
       <Providers>
-        <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
-          <ChannelDetailsContextProvider value={{ channel: buildChannel([]), onBack: jest.fn() }}>
-            <ChannelDetailsNavHeader />
-          </ChannelDetailsContextProvider>
-        </WithComponents>
+        <ChannelDetailsContextProvider value={{ channel: buildChannel([]), onBack: jest.fn() }}>
+          <ChannelDetailsNavHeader />
+        </ChannelDetailsContextProvider>
       </Providers>,
     );