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

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>,
     );
 

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

@@ -1,7 +1,19 @@
 import React from 'react';
+import { Modal } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import type { SharedValue } from 'react-native-reanimated';
 
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import {
+  ChannelDetailsContextProvider,
+  type ChannelDetailsContextValue,
+} from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  type Overlay,
+  OverlayContext,
+  type OverlayContextValue,
+} from '../../../contexts/overlayContext/OverlayContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
@@ -25,8 +37,45 @@ jest.mock('../components/ChannelDetailsActionItem', () => {
   };
 });
 
-const renderSection = () =>
-  render(
+const pinnedListProbe: object[] = [];
+
+jest.mock('../components/navigation-section/PinnedMessageList', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    PinnedMessageList: (props: object) => {
+      pinnedListProbe.push(props);
+      return ReactLib.createElement(RNText, { testID: 'pinned-message-list' }, 'list');
+    },
+  };
+});
+
+jest.mock('../components/navigation-section/MediaList', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    MediaList: () => ReactLib.createElement(RNText, { testID: 'media-list' }, 'media'),
+  };
+});
+
+jest.mock('../../ImageGallery/ImageGallery', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    ImageGallery: () => ReactLib.createElement(RNText, { testID: 'image-gallery' }, 'gallery'),
+  };
+});
+
+const renderSection = (
+  contextValue: Partial<ChannelDetailsContextValue> = {},
+  overlay: Overlay = 'none',
+) => {
+  const overlayContextValue: OverlayContextValue = {
+    overlay,
+    overlayOpacity: { value: overlay === 'none' ? 0 : 1 } as SharedValue<number>,
+    setOverlay: jest.fn(),
+  };
+  return render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
@@ -35,14 +84,20 @@ const renderSection = () =>
           userLanguage: 'en',
         }}
       >
-        <ChannelDetailsNavigationSection />
+        <OverlayContext.Provider value={overlayContextValue}>
+          <ChannelDetailsContextProvider value={contextValue as ChannelDetailsContextValue}>
+            <ChannelDetailsNavigationSection />
+          </ChannelDetailsContextProvider>
+        </OverlayContext.Provider>
       </TranslationProvider>
     </ThemeProvider>,
   );
+};
 
 describe('ChannelDetailsNavigationSection', () => {
   beforeEach(() => {
     probeCalls.length = 0;
+    pinnedListProbe.length = 0;
   });
 
   it('renders the three navigation rows with their labels and testIDs', () => {
@@ -60,14 +115,13 @@ describe('ChannelDetailsNavigationSection', () => {
     expect(probeCalls.map((p) => p.label)).toEqual(['Pinned Messages', 'Photos & Videos', 'Files']);
   });
 
-  it('passes an Icon and a trailing chevron to every row and leaves them non-interactive', () => {
+  it('passes an Icon and a trailing chevron to every row', () => {
     renderSection();
 
     expect(probeCalls).toHaveLength(3);
     probeCalls.forEach((props) => {
       expect(props.Icon).toBeTruthy();
       expect(props.trailing).toBeTruthy();
-      expect(props.onPress).toBeUndefined();
     });
   });
 
@@ -78,4 +132,169 @@ describe('ChannelDetailsNavigationSection', () => {
     expect(first).toBe(second);
     expect(second).toBe(third);
   });
+
+  describe('without a getNavigationItems prop (default mode)', () => {
+    it('makes every row interactive', () => {
+      renderSection();
+
+      const [pinned, photos, files] = probeCalls;
+      expect(pinned.onPress).toBeDefined();
+      expect(photos.onPress).toBeDefined();
+      expect(files.onPress).toBeDefined();
+    });
+
+    it('renders a single modal that is hidden with no content until a section is selected', () => {
+      const { UNSAFE_getByType, queryByTestId } = renderSection();
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+
+    it('opens the modal with the pinned messages content when the pinned messages row is pressed', () => {
+      const { UNSAFE_getByType, getByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(getByTestId('pinned-message-list')).toBeTruthy();
+    });
+
+    it('opens an empty modal (no pinned list) for sections without a built-in screen', () => {
+      const { UNSAFE_getByType, getByTestId, queryByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+
+    it('closes the modal and clears its content when the modal requests it', () => {
+      const { UNSAFE_getByType, getByTestId, queryByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+
+      act(() => {
+        UNSAFE_getByType(Modal).props.onRequestClose();
+      });
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+  });
+
+  describe('image gallery overlay', () => {
+    it('renders the gallery above the media list when the overlay is set to "gallery"', () => {
+      const { getByTestId } = renderSection({}, 'gallery');
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(getByTestId('media-list')).toBeTruthy();
+      expect(getByTestId('image-gallery')).toBeTruthy();
+    });
+
+    it('does not render the gallery while the overlay is "none"', () => {
+      const { getByTestId, queryByTestId } = renderSection({}, 'none');
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(getByTestId('media-list')).toBeTruthy();
+      expect(queryByTestId('image-gallery')).toBeNull();
+    });
+
+    it('does not render the gallery for non-media sections even when the overlay is "gallery"', () => {
+      const { getByTestId, queryByTestId } = renderSection({}, 'gallery');
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+      expect(queryByTestId('image-gallery')).toBeNull();
+
+      fireEvent.press(getByTestId('channel-details-files'));
+      expect(queryByTestId('image-gallery')).toBeNull();
+    });
+  });
+
+  describe('with a getNavigationItems prop', () => {
+    it('receives the built-in default items (section, label, Icon) and a context', () => {
+      const getNavigationItems = jest.fn(({ defaultItems }) => defaultItems);
+      renderSection({ getNavigationItems });
+
+      expect(getNavigationItems).toHaveBeenCalledWith(
+        expect.objectContaining({
+          context: expect.objectContaining({ t: expect.any(Function) }),
+          defaultItems: [
+            expect.objectContaining({
+              Icon: expect.any(Function),
+              label: 'Pinned Messages',
+              section: 'pinned-messages',
+            }),
+            expect.objectContaining({ label: 'Photos & Videos', section: 'photos-and-videos' }),
+            expect.objectContaining({ label: 'Files', section: 'files' }),
+          ],
+        }),
+      );
+      // Default items carry no onPress; the section component supplies the open-modal behavior.
+      const { defaultItems } = getNavigationItems.mock.calls[0][0];
+      expect(
+        defaultItems.every((item: { onPress?: () => void }) => item.onPress === undefined),
+      ).toBe(true);
+    });
+
+    it('renders exactly the items the customizer returns', () => {
+      const getNavigationItems = ({ defaultItems }: { defaultItems: { section: string }[] }) =>
+        defaultItems.filter((item) => item.section === 'pinned-messages');
+      const { getByTestId, queryByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      expect(getByTestId('channel-details-pinned-messages')).toBeTruthy();
+      expect(queryByTestId('channel-details-photos-and-videos')).toBeNull();
+      expect(queryByTestId('channel-details-files')).toBeNull();
+    });
+
+    it('runs a custom onPress instead of opening the built-in modal', () => {
+      const customOnPress = jest.fn();
+      const getNavigationItems = ({ defaultItems }: { defaultItems: { onPress: () => void }[] }) =>
+        defaultItems.map((item) => ({ ...item, onPress: customOnPress }));
+      const { UNSAFE_getByType, getByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(customOnPress).toHaveBeenCalledTimes(1);
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+    });
+
+    it('still opens the built-in modal when a row keeps its default onPress', () => {
+      const getNavigationItems = ({ defaultItems }: { defaultItems: unknown[] }) => defaultItems;
+      const { UNSAFE_getByType, getByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(getByTestId('pinned-message-list')).toBeTruthy();
+    });
+
+    it('renders consumer-added rows with custom section identifiers', () => {
+      const customOnPress = jest.fn();
+      const getNavigationItems = ({ defaultItems }: { defaultItems: unknown[] }) => [
+        ...defaultItems,
+        {
+          Icon: () => null,
+          label: 'My Custom Row',
+          onPress: customOnPress,
+          section: 'my-custom-section',
+        },
+      ];
+      const { getByTestId } = renderSection({ getNavigationItems: getNavigationItems as never });
+
+      const customRow = getByTestId('channel-details-my-custom-section');
+      expect(customRow).toBeTruthy();
+
+      fireEvent.press(customRow);
+      expect(customOnPress).toHaveBeenCalledTimes(1);
+    });
+  });
 });