stream-chat-react-native-core 9.5.0-beta.7 → 9.5.0-beta.8

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

@@ -5,7 +5,10 @@ import { render, screen } from '@testing-library/react-native';
 import { NotificationManager } from 'stream-chat';
 import type { Channel } from 'stream-chat';
 
-import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelDetailsContextProvider,
+  useChannelDetailsContext,
+} from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { ChatContext } from '../../../contexts/chatContext/ChatContext';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
@@ -64,9 +67,11 @@ const buildChannel = (capabilities: string[] = []) =>
 const renderContent = () =>
   render(
     <Providers>
-      <WithComponents overrides={SECTION_OVERRIDES}>
-        <ChannelDetails channel={channel} />
-      </WithComponents>
+      <ChannelDetailsContextProvider channel={channel}>
+        <WithComponents overrides={SECTION_OVERRIDES}>
+          <ChannelDetails />
+        </WithComponents>
+      </ChannelDetailsContextProvider>
     </Providers>,
   );
 
@@ -108,16 +113,18 @@ describe('ChannelDetailsContent', () => {
       useIsDirectChatSpy.mockReturnValue(false);
       render(
         <Providers>
-          <WithComponents
-            overrides={{
-              ChannelDetailsActionsSection: ActionsProbe,
-              ChannelDetailsMemberSection: MemberProbe,
-              ChannelDetailsNavigationSection: NavigationProbe,
-              ChannelDetailsProfile: ProfileProbe,
-            }}
-          >
-            <ChannelDetails channel={buildChannel(['update-channel'])} />
-          </WithComponents>
+          <ChannelDetailsContextProvider channel={buildChannel(['update-channel'])}>
+            <WithComponents
+              overrides={{
+                ChannelDetailsActionsSection: ActionsProbe,
+                ChannelDetailsMemberSection: MemberProbe,
+                ChannelDetailsNavigationSection: NavigationProbe,
+                ChannelDetailsProfile: ProfileProbe,
+              }}
+            >
+              <ChannelDetails />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
         </Providers>,
       );
 
@@ -132,32 +139,34 @@ describe('ChannelDetails', () => {
   });
 
   describe('context provisioning', () => {
-    it('exposes channel and callbacks via ChannelDetailsContext', () => {
-      const onChannelDismiss = jest.fn();
+    it('exposes the channel via ChannelDetailsContext and forwards onBack to the content', () => {
       const onBack = jest.fn();
       let captured: ReturnType<typeof useChannelDetailsContext> | undefined;
-      const ContextProbe = () => {
+      let capturedOnBack: (() => void) | undefined;
+      const ContextProbe = ({ onBack: onBackProp }: { onBack?: () => void }) => {
         captured = useChannelDetailsContext();
+        capturedOnBack = onBackProp;
         return null;
       };
 
       render(
         <Providers>
-          <WithComponents
-            overrides={{
-              ...SECTION_OVERRIDES,
-              ChannelDetailsContent: ContextProbe,
-            }}
-          >
-            <ChannelDetails channel={channel} onBack={onBack} onChannelDismiss={onChannelDismiss} />
-          </WithComponents>
+          <ChannelDetailsContextProvider channel={channel}>
+            <WithComponents
+              overrides={{
+                ...SECTION_OVERRIDES,
+                ChannelDetailsContent: ContextProbe,
+              }}
+            >
+              <ChannelDetails onBack={onBack} />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
         </Providers>,
       );
 
       expect(captured).toBeDefined();
       expect(captured?.channel).toBe(channel);
-      expect(captured?.onChannelDismiss).toBe(onChannelDismiss);
-      expect(captured?.onBack).toBe(onBack);
+      expect(capturedOnBack).toBe(onBack);
     });
   });
 
@@ -166,14 +175,16 @@ describe('ChannelDetails', () => {
       const Override = () => <Text testID='custom-content'>CUSTOM</Text>;
       render(
         <Providers>
-          <WithComponents
-            overrides={{
-              ...SECTION_OVERRIDES,
-              ChannelDetailsContent: Override,
-            }}
-          >
-            <ChannelDetails channel={channel} />
-          </WithComponents>
+          <ChannelDetailsContextProvider channel={channel}>
+            <WithComponents
+              overrides={{
+                ...SECTION_OVERRIDES,
+                ChannelDetailsContent: Override,
+              }}
+            >
+              <ChannelDetails />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
         </Providers>,
       );
 
@@ -191,9 +202,11 @@ describe('ChannelDetails', () => {
       // wasn't swapped out — the section probes from SECTION_OVERRIDES should appear.
       render(
         <Providers>
-          <WithComponents overrides={SECTION_OVERRIDES}>
-            <ChannelDetails channel={channel} />
-          </WithComponents>
+          <ChannelDetailsContextProvider channel={channel}>
+            <WithComponents overrides={SECTION_OVERRIDES}>
+              <ChannelDetails />
+            </WithComponents>
+          </ChannelDetailsContextProvider>
         </Providers>,
       );
       expect(screen.getByTestId('probe-header')).toBeTruthy();

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

@@ -71,7 +71,7 @@ const sectionElement = () => (
           } as never
         }
       >
-        <ChannelDetailsContextProvider value={{ channel }}>
+        <ChannelDetailsContextProvider channel={channel}>
           <WithComponents overrides={{ ChannelDetailsActionItem: ActionItemProbe }}>
             <ChannelDetailsActionsSection />
           </WithComponents>

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

@@ -1,7 +1,9 @@
 import React, { PropsWithChildren } from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { fireEvent, render, screen } from '@testing-library/react-native';
+
+type ReactTestInstance = ReturnType<typeof screen.getByTestId>;
 import { NotificationManager } from 'stream-chat';
 import type { Channel } from 'stream-chat';
 
@@ -13,12 +15,28 @@ 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';
+import {
+  ChannelDetailsEditButton,
+  ChannelDetailsEditButtonProps,
+} from '../components/ChannelDetailsEditButton';
 
 jest.mock('../../../hooks/actions/useChannelActions');
 const mockedUseChannelActions = jest.mocked(useChannelActions);
 
+// Walks up the rendered tree to confirm some host ancestor received `width: 'auto'`
+// (the forwarded style overriding the Button's default `width: '100%'`).
+const hasAncestorWithStyle = (instance: ReactTestInstance | null): boolean => {
+  for (let node = instance; node; node = node.parent) {
+    if (typeof node.type === 'string') {
+      const flattened = StyleSheet.flatten(node.props.style) ?? {};
+      if (flattened.width === 'auto') {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
 const EditDetailsProbe = () => (
   <View testID='channel-edit-details-probe'>
     <Text>edit-details</Text>
@@ -55,16 +73,18 @@ const Providers = ({ children }: PropsWithChildren) => (
 
 const renderEditButton = ({
   channel,
-  onEditChannelPress,
+  onPress,
+  style,
 }: {
   channel: Channel;
-  onEditChannelPress?: () => void;
+  onPress?: () => void;
+  style?: ChannelDetailsEditButtonProps['style'];
 }) =>
   render(
     <Providers>
-      <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
-        <ChannelDetailsContextProvider value={{ channel, onEditChannelPress }}>
-          <ChannelDetailsEditButton />
+      <WithComponents overrides={{ ChannelEditDetailsFormContent: EditDetailsProbe }}>
+        <ChannelDetailsContextProvider channel={channel}>
+          <ChannelDetailsEditButton onPress={onPress} style={style} />
         </ChannelDetailsContextProvider>
       </WithComponents>
     </Providers>,
@@ -72,7 +92,6 @@ const renderEditButton = ({
 
 describe('ChannelDetailsEditButton', () => {
   beforeEach(() => {
-    jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(false);
     mockedUseChannelActions.mockReturnValue({
       updateImage: jest.fn(),
       updateName: jest.fn(),
@@ -98,30 +117,41 @@ describe('ChannelDetailsEditButton', () => {
     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);
+  it('forwards the style prop to the underlying Button', () => {
+    renderEditButton({
+      channel: buildChannel(['update-channel']),
+      style: { width: 'auto' },
+    });
 
-    renderEditButton({ channel: buildChannel(['update-channel']) });
-
-    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
+    // The style lands on the Button's outer wrapper View, a host ancestor of the
+    // testID-carrying Pressable. Search ancestors for the one that received it.
+    expect(hasAncestorWithStyle(screen.getByTestId('channel-details-edit-button'))).toBe(true);
   });
 
-  it('invokes onEditChannelPress when the Edit button is pressed', () => {
-    const onEditChannelPress = jest.fn();
-    renderEditButton({ channel: buildChannel(['update-channel']), onEditChannelPress });
+  it('opens the edit modal when the Edit button is pressed', () => {
+    renderEditButton({ channel: buildChannel(['update-channel']) });
+
+    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
 
     fireEvent.press(screen.getByTestId('channel-details-edit-button'));
 
-    expect(onEditChannelPress).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('channel-edit-details-probe')).toBeTruthy();
   });
 
-  it('opens the edit modal when the Edit button is pressed and onEditChannelPress is not provided', () => {
-    renderEditButton({ channel: buildChannel(['update-channel']) });
+  it('invokes the onPress override and does not open the modal', () => {
+    const onPress = jest.fn();
 
-    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
+    renderEditButton({ channel: buildChannel(['update-channel']), onPress });
 
     fireEvent.press(screen.getByTestId('channel-details-edit-button'));
 
-    expect(screen.getByTestId('channel-edit-details-probe')).toBeTruthy();
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
+  });
+
+  it('does not mount the built-in modal when a custom onPress is provided', () => {
+    renderEditButton({ channel: buildChannel(['update-channel']), onPress: jest.fn() });
+
+    expect(screen.queryByTestId('channel-edit-details-probe')).toBeNull();
   });
 });

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

@@ -77,14 +77,10 @@ const applyCapabilities = (
 const renderSection = ({
   capabilities,
   channel,
-  onAddMembersPress,
-  onMemberPress,
   onViewAllMembersPress,
 }: {
   channel: Channel;
   capabilities?: Partial<OwnCapabilitiesContextValue>;
-  onAddMembersPress?: () => void;
-  onMemberPress?: (member: ChannelMemberResponse) => void;
   onViewAllMembersPress?: () => void;
 }) =>
   render(
@@ -109,23 +105,16 @@ const renderSection = ({
               } as never
             }
           >
-            <ChannelDetailsContextProvider
-              value={{
-                channel: applyCapabilities(channel, capabilities),
-                onAddMembersPress,
-                onMemberPress,
-                onViewAllMembersPress,
-              }}
-            >
+            <ChannelDetailsContextProvider channel={applyCapabilities(channel, capabilities)}>
               <WithComponents
                 overrides={{
-                  ChannelAddMembers: AddMembersProbe,
+                  ChannelAddMembersFormContent: AddMembersProbe,
                   ChannelMemberActionsSheet: MemberActionsSheetProbe,
                   ChannelMemberItem: MemberItemProbe,
                   ChannelMemberList: MemberListProbe,
                 }}
               >
-                <ChannelDetailsMemberSection />
+                <ChannelDetailsMemberSection onViewAllMembersPress={onViewAllMembersPress} />
               </WithComponents>
             </ChannelDetailsContextProvider>
           </ChatContext.Provider>
@@ -209,23 +198,19 @@ describe('ChannelDetailsMemberSection', () => {
     expect(screen.queryByTestId('channel-details-member-section-add-button')).toBeNull();
   });
 
-  it('renders the preview add button and invokes onAddMembersPress when the user has the capability', () => {
+  it('renders the preview add button when the user has the capability', () => {
     previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: makeMembers(3) });
     const channel = buildChannel(makeMembers(3), 3);
-    const onAddMembersPress = jest.fn();
 
     renderSection({
       capabilities: { updateChannelMembers: true },
       channel,
-      onAddMembersPress,
     });
 
-    fireEvent.press(screen.getByTestId('channel-details-member-section-add-button'));
-
-    expect(onAddMembersPress).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('channel-details-member-section-add-button')).toBeTruthy();
   });
 
-  it('opens the Add-members sheet when the preview Add is pressed and no onAddMembersPress override is provided', () => {
+  it('opens the Add-members sheet when the preview Add is pressed', () => {
     previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: makeMembers(3) });
     const channel = buildChannel(makeMembers(3), 3);
 
@@ -239,7 +224,7 @@ describe('ChannelDetailsMemberSection', () => {
     expect(screen.getByTestId('add-members-probe')).toBeTruthy();
   });
 
-  it('opens the per-member actions sheet when a member row is pressed and no onMemberPress override is provided', () => {
+  it('opens the per-member actions sheet when a member row is pressed', () => {
     const members = makeMembers(3);
     previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: members });
     const channel = buildChannel(members, 3);
@@ -259,27 +244,7 @@ describe('ChannelDetailsMemberSection', () => {
     expect(screen.getByTestId('member-actions-sheet-probe').props.children).toBe('u-0');
   });
 
-  it('calls onMemberPress instead of opening the per-member actions sheet when provided', () => {
-    const members = makeMembers(3);
-    previewSpy.mockReturnValue({ hasMore: false, total: 3, visible: members });
-    const channel = buildChannel(members, 3);
-    const onMemberPress = jest.fn();
-
-    renderSection({ channel, onMemberPress });
-
-    const lastCallForSecondMember = [...memberItemProbeCalls]
-      .reverse()
-      .find((call) => call.member.user?.id === 'u-1');
-    act(() => {
-      lastCallForSecondMember?.onPress?.(lastCallForSecondMember.member);
-    });
-
-    expect(onMemberPress).toHaveBeenCalledTimes(1);
-    expect(onMemberPress.mock.calls[0][0].user?.id).toBe('u-1');
-    expect(screen.queryByTestId('member-actions-sheet-probe')).toBeNull();
-  });
-
-  it('swaps the all-members modal for the Add-members sheet when the modal Add button is pressed', () => {
+  it('opens the Add-members sheet on top of the all-members modal when the modal Add button is pressed', () => {
     previewSpy.mockReturnValue({ hasMore: true, total: 12, visible: makeMembers(5) });
     const channel = buildChannel(makeMembers(12), 12);
 
@@ -292,7 +257,7 @@ describe('ChannelDetailsMemberSection', () => {
     fireEvent.press(screen.getByTestId('channel-details-member-list-add-button'));
 
     expect(screen.getByTestId('add-members-probe')).toBeTruthy();
-    // View-all sheet is dismissed when Add-members opens (swap, not stack).
-    expect(screen.queryByTestId('member-list-probe')).toBeNull();
+    // Add-members opens layered over the all-members list (stack, not swap).
+    expect(screen.getByTestId('member-list-probe')).toBeTruthy();
   });
 });

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

@@ -59,8 +59,8 @@ const renderHeader = ({
 }) =>
   render(
     <Providers>
-      <ChannelDetailsContextProvider value={{ channel, onBack }}>
-        <ChannelDetailsNavHeader action={action} />
+      <ChannelDetailsContextProvider channel={channel}>
+        <ChannelDetailsNavHeader action={action} onBack={onBack} />
       </ChannelDetailsContextProvider>
     </Providers>,
   );
@@ -100,8 +100,8 @@ describe('ChannelDetailsNavHeader', () => {
 
     rerender(
       <Providers>
-        <ChannelDetailsContextProvider value={{ channel: buildChannel([]), onBack: jest.fn() }}>
-          <ChannelDetailsNavHeader />
+        <ChannelDetailsContextProvider channel={buildChannel([])}>
+          <ChannelDetailsNavHeader onBack={jest.fn()} />
         </ChannelDetailsContextProvider>
       </Providers>,
     );

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

@@ -19,6 +19,7 @@ import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
 import { ChannelDetailsNavigationSection } from '../components/ChannelDetailsNavigationSection';
+import type { GetChannelDetailsNavigationItems } from '../hooks/useChannelDetailsNavigationItems';
 
 const probeCalls: ChannelDetailsActionItemProps[] = [];
 
@@ -67,7 +68,7 @@ jest.mock('../../ImageGallery/ImageGallery', () => {
 });
 
 const renderSection = (
-  contextValue: Partial<ChannelDetailsContextValue> = {},
+  { getNavigationItems }: { getNavigationItems?: GetChannelDetailsNavigationItems } = {},
   overlay: Overlay = 'none',
 ) => {
   const overlayContextValue: OverlayContextValue = {
@@ -85,8 +86,10 @@ const renderSection = (
         }}
       >
         <OverlayContext.Provider value={overlayContextValue}>
-          <ChannelDetailsContextProvider value={contextValue as ChannelDetailsContextValue}>
-            <ChannelDetailsNavigationSection />
+          <ChannelDetailsContextProvider
+            channel={undefined as unknown as ChannelDetailsContextValue['channel']}
+          >
+            <ChannelDetailsNavigationSection getNavigationItems={getNavigationItems} />
           </ChannelDetailsContextProvider>
         </OverlayContext.Provider>
       </TranslationProvider>

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

@@ -46,7 +46,7 @@ const renderProfile = ({ channel = buildChannel() }: { channel?: Channel } = {})
         }}
       >
         <ChatProvider value={{ client: { userID: OWN_USER_ID } } as never}>
-          <ChannelDetailsContextProvider value={{ channel }}>
+          <ChannelDetailsContextProvider channel={channel}>
             <ChannelDetailsProfile />
           </ChannelDetailsContextProvider>
         </ChatProvider>

package/src/components/ChannelDetails/__tests__/{ChannelEditDetailsModal.test.tsx → ChannelEditDetailsForm.test.tsx}

@@ -14,13 +14,14 @@ 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 { ChannelEditDetailsModal } from '../components/ChannelEditDetailsModal';
+import { ChannelEditDetailsForm } from '../components/ChannelEditDetailsForm';
 
 jest.mock('../../../hooks/actions/useChannelActions');
 const mockedUseChannelActions = jest.mocked(useChannelActions);
 
-// Stands in for ChannelEditDetails: drives the channel name through the store
-// exposed by ChannelEditDetailsContext, the same way the real component does.
+// Stands in for ChannelEditDetailsFormContent: drives the channel name through
+// the store exposed by ChannelEditDetailsContext, the same way the real
+// component does.
 const EditDetailsProbe = () => {
   const { store } = useChannelEditDetailsContext();
   return (
@@ -51,15 +52,7 @@ const buildChannel = (overrides?: { name?: string; cid?: string }): Channel =>
     state: { members: {} },
   }) as unknown as Channel;
 
-const renderModal = ({
-  channel,
-  onClose = jest.fn(),
-  visible = true,
-}: {
-  channel: Channel;
-  onClose?: () => void;
-  visible?: boolean;
-}) =>
+const renderForm = ({ channel, onClose = jest.fn() }: { channel: Channel; onClose?: () => void }) =>
   render(
     <ThemeProvider theme={defaultTheme}>
       <AccessibilityProvider value={{ enabled: true }}>
@@ -73,9 +66,9 @@ const renderModal = ({
           <ChatContext.Provider
             value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
           >
-            <ChannelDetailsContextProvider value={{ channel }}>
-              <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
-                <ChannelEditDetailsModal onClose={onClose} visible={visible} />
+            <ChannelDetailsContextProvider channel={channel}>
+              <WithComponents overrides={{ ChannelEditDetailsFormContent: EditDetailsProbe }}>
+                <ChannelEditDetailsForm onClose={onClose} />
               </WithComponents>
             </ChannelDetailsContextProvider>
           </ChatContext.Provider>
@@ -84,13 +77,11 @@ const renderModal = ({
     </ThemeProvider>,
   );
 
-describe('ChannelEditDetailsModal', () => {
+describe('ChannelEditDetailsForm', () => {
   let updateNameSpy: jest.Mock;
 
   beforeEach(() => {
-    updateNameSpy = jest.fn(async (_name: string, options?: { onSuccess?: () => unknown }) => {
-      await options?.onSuccess?.();
-    });
+    updateNameSpy = jest.fn().mockResolvedValue(undefined);
     mockedUseChannelActions.mockReturnValue({
       updateName: updateNameSpy,
     } as unknown as ReturnType<typeof useChannelActions>);
@@ -102,7 +93,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('disables the confirm button on initial render when the name is unchanged', () => {
-    renderModal({ channel: buildChannel() });
+    renderForm({ channel: buildChannel() });
 
     expect(
       screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
@@ -110,7 +101,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('enables the confirm button after typing a different name', () => {
-    renderModal({ channel: buildChannel() });
+    renderForm({ channel: buildChannel() });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Different');
 
@@ -120,7 +111,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('enables the confirm button after clearing a channel that previously had a name', () => {
-    renderModal({ channel: buildChannel({ name: 'Original' }) });
+    renderForm({ channel: buildChannel({ name: 'Original' }) });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '');
 
@@ -130,7 +121,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('enables confirm when the value differs from the initial name only by whitespace', () => {
-    renderModal({ channel: buildChannel({ name: 'Original' }) });
+    renderForm({ channel: buildChannel({ name: 'Original' }) });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '  Original  ');
 
@@ -140,7 +131,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('passes the raw (untrimmed) name to updateName when the user confirms', async () => {
-    renderModal({ channel: buildChannel({ name: 'Original' }) });
+    renderForm({ channel: buildChannel({ name: 'Original' }) });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '  Renamed  ');
 
@@ -151,12 +142,12 @@ describe('ChannelEditDetailsModal', () => {
 
     expect(updateNameSpy).toHaveBeenCalledWith(
       '  Renamed  ',
-      expect.objectContaining({ onSuccess: expect.any(Function) }),
+      expect.objectContaining({ onFailure: expect.any(Function) }),
     );
   });
 
   it('passes an empty string to updateName when the user clears and confirms', async () => {
-    renderModal({ channel: buildChannel({ name: 'Original' }) });
+    renderForm({ channel: buildChannel({ name: 'Original' }) });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '');
 
@@ -167,13 +158,13 @@ describe('ChannelEditDetailsModal', () => {
 
     expect(updateNameSpy).toHaveBeenCalledWith(
       '',
-      expect.objectContaining({ onSuccess: expect.any(Function) }),
+      expect.objectContaining({ onFailure: expect.any(Function) }),
     );
   });
 
-  it('closes the modal after updateName invokes onSuccess', async () => {
+  it('closes the form after updateName succeeds', async () => {
     const onClose = jest.fn();
-    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+    renderForm({ channel: buildChannel({ name: 'Original' }), onClose });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
 
@@ -185,10 +176,14 @@ describe('ChannelEditDetailsModal', () => {
     await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
   });
 
-  it('keeps the modal open and re-enables confirm when updateName does not invoke onSuccess', async () => {
-    updateNameSpy.mockResolvedValueOnce(undefined);
+  it('keeps the form open and re-enables confirm when updateName invokes onFailure', async () => {
+    updateNameSpy.mockImplementationOnce(
+      async (_name: string, options?: { onFailure?: (error: unknown) => unknown }) => {
+        await options?.onFailure?.(new Error('failed'));
+      },
+    );
     const onClose = jest.fn();
-    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+    renderForm({ channel: buildChannel({ name: 'Original' }), onClose });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
 
@@ -212,7 +207,7 @@ describe('ChannelEditDetailsModal', () => {
           releaseUpdate = resolve;
         }),
     );
-    renderModal({ channel: buildChannel({ name: 'Original' }) });
+    renderForm({ channel: buildChannel({ name: 'Original' }) });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
 
@@ -233,7 +228,7 @@ describe('ChannelEditDetailsModal', () => {
 
   it('invokes onClose when the user taps the close button', () => {
     const onClose = jest.fn();
-    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+    renderForm({ channel: buildChannel({ name: 'Original' }), onClose });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
     fireEvent.press(screen.getByLabelText('a11y/Close'));
@@ -242,7 +237,7 @@ describe('ChannelEditDetailsModal', () => {
   });
 
   it('renders nothing when the channel has no cid (no notification host id)', () => {
-    renderModal({ channel: buildChannel({ cid: '' }) });
+    renderForm({ channel: buildChannel({ cid: '' }) });
 
     expect(screen.queryByTestId('channel-details-edit-confirm-button')).toBeNull();
   });