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

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

@@ -0,0 +1,146 @@
+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 { 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>
+  </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 renderHeader = ({
+  channel,
+  onBack,
+  onEditChannelPress,
+}: {
+  channel: Channel;
+  onBack?: () => void;
+  onEditChannelPress?: () => void;
+}) =>
+  render(
+    <Providers>
+      <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
+        <ChannelDetailsContextProvider value={{ channel, onBack, onEditChannelPress }}>
+          <ChannelDetailsNavHeader />
+        </ChannelDetailsContextProvider>
+      </WithComponents>
+    </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([]) });
+
+    expect(screen.queryByTestId('channel-details-edit-button')).toBeNull();
+  });
+
+  it('renders the Edit button when the user has the update-channel capability', () => {
+    renderHeader({ 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);
+
+    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'));
+
+    expect(screen.getByTestId('channel-edit-details-probe')).toBeTruthy();
+  });
+
+  it('renders the back button only when onBack is provided', () => {
+    const { rerender } = renderHeader({ channel: buildChannel([]) });
+    expect(screen.queryByTestId('channel-details-back-button')).toBeNull();
+
+    rerender(
+      <Providers>
+        <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
+          <ChannelDetailsContextProvider value={{ channel: buildChannel([]), onBack: jest.fn() }}>
+            <ChannelDetailsNavHeader />
+          </ChannelDetailsContextProvider>
+        </WithComponents>
+      </Providers>,
+    );
+
+    expect(screen.getByTestId('channel-details-back-button')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
+import { ChannelDetailsNavigationSection } from '../components/ChannelDetailsNavigationSection';
+
+const probeCalls: ChannelDetailsActionItemProps[] = [];
+
+jest.mock('../components/ChannelDetailsActionItem', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    ChannelDetailsActionItem: (props: ChannelDetailsActionItemProps) => {
+      probeCalls.push(props);
+      return ReactLib.createElement(
+        RNText,
+        { onPress: props.onPress, testID: props.testID },
+        props.label,
+      );
+    },
+  };
+});
+
+const renderSection = () =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChannelDetailsNavigationSection />
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelDetailsNavigationSection', () => {
+  beforeEach(() => {
+    probeCalls.length = 0;
+  });
+
+  it('renders the three navigation rows with their labels and testIDs', () => {
+    const { getByTestId } = renderSection();
+
+    expect(getByTestId('channel-details-pinned-messages')).toBeTruthy();
+    expect(getByTestId('channel-details-photos-and-videos')).toBeTruthy();
+    expect(getByTestId('channel-details-files')).toBeTruthy();
+
+    expect(probeCalls.map((p) => p.testID)).toEqual([
+      'channel-details-pinned-messages',
+      'channel-details-photos-and-videos',
+      'channel-details-files',
+    ]);
+    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', () => {
+    renderSection();
+
+    expect(probeCalls).toHaveLength(3);
+    probeCalls.forEach((props) => {
+      expect(props.Icon).toBeTruthy();
+      expect(props.trailing).toBeTruthy();
+      expect(props.onPress).toBeUndefined();
+    });
+  });
+
+  it('reuses a single memoized chevron element across all rows', () => {
+    renderSection();
+
+    const [first, second, third] = probeCalls.map((p) => p.trailing);
+    expect(first).toBe(second);
+    expect(second).toBe(third);
+  });
+});

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

@@ -0,0 +1,145 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import * as useChannelMuteActiveModule from '../../../hooks/useChannelMuteActive';
+import * as useChannelPreviewDisplayNameModule from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
+import { ChannelDetailsProfile } from '../components/ChannelDetailsProfile';
+import * as useChannelDetailsMemberStatusTextModule from '../hooks/useChannelDetailsMemberStatusText';
+
+const channelAvatarCalls: Array<{ size?: string; showBorder?: boolean }> = [];
+jest.mock('../../ui/Avatar/ChannelAvatar', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    ChannelAvatar: (props: { size?: string; showBorder?: boolean }) => {
+      channelAvatarCalls.push({ showBorder: props.showBorder, size: props.size });
+      return ReactActual.createElement(RN.View, { testID: 'channel-avatar' });
+    },
+  };
+});
+
+const OWN_USER_ID = 'own-user';
+
+const buildChannel = () =>
+  ({
+    cid: 'messaging:test',
+    data: {},
+    getClient: () => ({ userID: OWN_USER_ID }),
+    on: () => ({ unsubscribe: () => undefined }),
+  }) as unknown as Channel;
+
+const renderProfile = ({ channel = buildChannel() }: { channel?: Channel } = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChatProvider value={{ client: { userID: OWN_USER_ID } } as never}>
+          <ChannelDetailsContextProvider value={{ channel }}>
+            <ChannelDetailsProfile />
+          </ChannelDetailsContextProvider>
+        </ChatProvider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelDetailsProfile', () => {
+  let useChannelPreviewDisplayNameSpy: jest.SpyInstance;
+  let useChannelDetailsMemberStatusTextSpy: jest.SpyInstance;
+  let useChannelMuteActiveSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    channelAvatarCalls.length = 0;
+    useChannelPreviewDisplayNameSpy = jest
+      .spyOn(useChannelPreviewDisplayNameModule, 'useChannelPreviewDisplayName')
+      .mockReturnValue('Display Name');
+    useChannelDetailsMemberStatusTextSpy = jest
+      .spyOn(useChannelDetailsMemberStatusTextModule, 'useChannelDetailsMemberStatusText')
+      .mockReturnValue('12 members, 3 online');
+    useChannelMuteActiveSpy = jest
+      .spyOn(useChannelMuteActiveModule, 'useChannelMuteActive')
+      .mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('default rendering', () => {
+    it('renders the channel avatar with size="2xl" and no border', () => {
+      renderProfile();
+      expect(screen.getByTestId('channel-avatar')).toBeTruthy();
+      const last = channelAvatarCalls[channelAvatarCalls.length - 1];
+      expect(last.size).toBe('2xl');
+      expect(last.showBorder).toBe(false);
+    });
+
+    it('renders the display name as the title', () => {
+      renderProfile();
+      expect(screen.getByText('Display Name')).toBeTruthy();
+    });
+
+    it('exposes the title row as a header labelled with the display name', () => {
+      renderProfile();
+      const header = screen.getByRole('header');
+      expect(header.props.accessibilityLabel).toBe('Display Name');
+    });
+
+    it('renders an empty title when the display name is missing', () => {
+      useChannelPreviewDisplayNameSpy.mockReturnValue(undefined);
+      const { toJSON } = renderProfile();
+      // No crash, and a Text node renders (empty string)
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  describe('subtitle', () => {
+    it('renders the status text returned by useChannelDetailsMemberStatusText', () => {
+      renderProfile();
+      expect(screen.getByText('12 members, 3 online')).toBeTruthy();
+    });
+
+    it('renders a direct-chat status string from the hook', () => {
+      useChannelDetailsMemberStatusTextSpy.mockReturnValue('Online');
+      renderProfile();
+      expect(screen.getByText('Online')).toBeTruthy();
+    });
+
+    it('does not render a subtitle when the status text is empty', () => {
+      useChannelDetailsMemberStatusTextSpy.mockReturnValue('');
+      renderProfile();
+      expect(screen.queryByText('12 members, 3 online')).toBeNull();
+    });
+  });
+
+  describe('muted indicator', () => {
+    it('renders the muted indicator when useChannelMuteActive returns true', () => {
+      useChannelMuteActiveSpy.mockReturnValue(true);
+      renderProfile();
+      expect(screen.getByTestId('channel-details-profile-muted-indicator')).toBeTruthy();
+    });
+
+    it('announces the muted status in the header accessibility label', () => {
+      useChannelMuteActiveSpy.mockReturnValue(true);
+      renderProfile();
+      expect(screen.getByRole('header').props.accessibilityLabel).toBe('Display Name, Muted');
+    });
+
+    it('does not render the muted indicator when useChannelMuteActive returns false', () => {
+      useChannelMuteActiveSpy.mockReturnValue(false);
+      renderProfile();
+      expect(screen.queryByTestId('channel-details-profile-muted-indicator')).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,316 @@
+import React from 'react';
+import { Image, Pressable, Text } from 'react-native';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelEditDetailsContext,
+  useChannelEditDetailsContext,
+} from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+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 { generateFileReference } from '../../../mock-builders/attachments';
+import { NativeHandlers } from '../../../native';
+import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
+import { ChannelEditDetails } from '../components/ChannelEditDetails';
+import type { ChannelEditImageSheetProps } from '../components/ChannelEditImageSheet';
+
+type SheetProbeRecord = ChannelEditImageSheetProps;
+const sheetCalls: SheetProbeRecord[] = [];
+
+// The real sheet drives the store directly; the probe mirrors that by setting
+// the pending action via the context-resolved store.
+const SheetProbe = (props: ChannelEditImageSheetProps) => {
+  const { store } = useChannelEditDetailsContext();
+  sheetCalls.push(props);
+  if (!props.visible) return null;
+  return (
+    <>
+      <Pressable onPress={props.onClose} testID='sheet-probe-close'>
+        <Text>close</Text>
+      </Pressable>
+      <Pressable onPress={() => store.setPendingAction('camera')} testID='sheet-probe-camera'>
+        <Text>camera</Text>
+      </Pressable>
+      <Pressable onPress={() => store.setPendingAction('library')} testID='sheet-probe-library'>
+        <Text>library</Text>
+      </Pressable>
+      <Pressable onPress={() => store.setPendingAction('reset')} testID='sheet-probe-reset'>
+        <Text>reset</Text>
+      </Pressable>
+    </>
+  );
+};
+
+const buildChannel = (overrides?: { image?: string; name?: string }): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: {
+      name: overrides && 'name' in overrides ? overrides.name : 'Original',
+      ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
+    },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+// The avatar renders its image through the default `SvgAwareImage`, which for a
+// raster URI is a plain RN `Image`. Read back the displayed `uri` (or undefined
+// when the avatar falls back to the member/user placeholder).
+const avatarImageUri = (): string | undefined =>
+  screen.UNSAFE_queryByType(Image)?.props?.source?.uri;
+
+const renderComponent = ({ channel }: { channel: Channel }) => {
+  const store = new EditChannelDetailsStore(channel);
+  const utils = render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChatContext.Provider
+          value={
+            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+          }
+        >
+          <ChannelDetailsContextProvider value={{ channel }}>
+            <ChannelEditDetailsContext.Provider value={{ store }}>
+              <WithComponents overrides={{ ChannelEditImageSheet: SheetProbe }}>
+                <ChannelEditDetails />
+              </WithComponents>
+            </ChannelEditDetailsContext.Provider>
+          </ChannelDetailsContextProvider>
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+  return { ...utils, store };
+};
+
+const latestSheetProps = () => sheetCalls[sheetCalls.length - 1];
+
+describe('ChannelEditDetails', () => {
+  beforeEach(() => {
+    sheetCalls.length = 0;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the upload button', () => {
+    renderComponent({ channel: buildChannel() });
+
+    expect(screen.getByTestId('channel-edit-upload-button')).toBeTruthy();
+  });
+
+  it('renders the context-resolved ChannelEditName', () => {
+    const NameProbe = () => <Text testID='name-probe'>name</Text>;
+
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <TranslationProvider
+          value={{
+            t: ((key: string) => key) as never,
+            tDateTimeParser: ((input: unknown) => input) as never,
+            userLanguage: 'en',
+          }}
+        >
+          <ChatContext.Provider
+            value={
+              { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+            }
+          >
+            <ChannelDetailsContextProvider value={{ channel: buildChannel() }}>
+              <ChannelEditDetailsContext.Provider
+                value={{ store: new EditChannelDetailsStore(buildChannel()) }}
+              >
+                <WithComponents
+                  overrides={{ ChannelEditImageSheet: SheetProbe, ChannelEditName: NameProbe }}
+                >
+                  <ChannelEditDetails />
+                </WithComponents>
+              </ChannelEditDetailsContext.Provider>
+            </ChannelDetailsContextProvider>
+          </ChatContext.Provider>
+        </TranslationProvider>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('name-probe')).toBeTruthy();
+  });
+
+  describe('upload button + edit-picture sheet', () => {
+    it('renders the sheet hidden by default', () => {
+      renderComponent({ channel: buildChannel() });
+
+      expect(latestSheetProps().visible).toBe(false);
+    });
+
+    it('opens the sheet when the upload button is pressed', () => {
+      renderComponent({ channel: buildChannel() });
+
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      expect(latestSheetProps().visible).toBe(true);
+    });
+
+    it('closes the sheet when the sheet calls onClose', () => {
+      renderComponent({ channel: buildChannel() });
+
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+      fireEvent.press(screen.getByTestId('sheet-probe-close'));
+
+      expect(latestSheetProps().visible).toBe(false);
+    });
+
+    it('stores a camera-captured file after the sheet closes', async () => {
+      const file = generateFileReference();
+      jest.spyOn(NativeHandlers, 'takePhoto').mockResolvedValue(file);
+
+      const { store } = renderComponent({ channel: buildChannel() });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      // The sheet's row stub triggers onSelectCamera then onClose, mirroring the
+      // production sheet's order. The picker call is deferred until the sheet
+      // visibility flips to false (plus the dismiss-buffer timeout).
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-camera'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(NativeHandlers.takePhoto).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(store.state.getLatestValue().updatedImage).toBe(file));
+    });
+
+    it('stores a picked gallery file after the sheet closes', async () => {
+      const file = generateFileReference();
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ assets: [file], cancelled: false });
+
+      const { store } = renderComponent({ channel: buildChannel() });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-library'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(NativeHandlers.pickImage).toHaveBeenCalledTimes(1));
+      await waitFor(() =>
+        expect(store.state.getLatestValue().updatedImage).toEqual(
+          expect.objectContaining({ uri: file.uri }),
+        ),
+      );
+    });
+
+    it('does not call the picker while the sheet is still visible', async () => {
+      jest.spyOn(NativeHandlers, 'pickImage').mockResolvedValue({ assets: [], cancelled: false });
+
+      renderComponent({ channel: buildChannel() });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+      fireEvent.press(screen.getByTestId('sheet-probe-library'));
+
+      // Action is queued but should NOT have been invoked yet — the sheet is
+      // still visible.
+      await act(async () => {
+        await Promise.resolve();
+      });
+      expect(NativeHandlers.pickImage).not.toHaveBeenCalled();
+    });
+
+    it('does not store an image when the camera flow is cancelled', async () => {
+      jest.spyOn(NativeHandlers, 'takePhoto').mockResolvedValue({ cancelled: true } as never);
+
+      const { store } = renderComponent({ channel: buildChannel() });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-camera'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(NativeHandlers.takePhoto).toHaveBeenCalledTimes(1));
+      expect(store.state.getLatestValue().updatedImage).toBeUndefined();
+    });
+
+    it('resets the image in the store after the sheet closes when Reset is pressed', async () => {
+      const { store } = renderComponent({
+        channel: buildChannel({ image: 'https://example.com/live.png' }),
+      });
+
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-reset'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(store.state.getLatestValue().updatedImage).toBeNull());
+    });
+  });
+
+  describe('avatar preview', () => {
+    it('shows the live channel image while untouched', () => {
+      renderComponent({ channel: buildChannel({ image: 'https://example.com/live.png' }) });
+
+      expect(avatarImageUri()).toBe('https://example.com/live.png');
+    });
+
+    it('previews a gallery-picked image before it is saved', async () => {
+      const file = generateFileReference();
+      jest
+        .spyOn(NativeHandlers, 'pickImage')
+        .mockResolvedValue({ assets: [file], cancelled: false });
+
+      renderComponent({ channel: buildChannel({ image: 'https://example.com/live.png' }) });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-library'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(avatarImageUri()).toBe(file.uri));
+    });
+
+    it('previews a camera-captured image before it is saved', async () => {
+      const file = generateFileReference();
+      jest.spyOn(NativeHandlers, 'takePhoto').mockResolvedValue(file);
+
+      renderComponent({ channel: buildChannel({ image: 'https://example.com/live.png' }) });
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-camera'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(avatarImageUri()).toBe(file.uri));
+    });
+
+    it('drops the live image when the user resets the picture', async () => {
+      renderComponent({
+        channel: buildChannel({ image: 'https://example.com/live.png' }),
+      });
+      expect(avatarImageUri()).toBe('https://example.com/live.png');
+
+      fireEvent.press(screen.getByTestId('channel-edit-upload-button'));
+
+      act(() => {
+        fireEvent.press(screen.getByTestId('sheet-probe-reset'));
+        fireEvent.press(screen.getByTestId('sheet-probe-close'));
+      });
+
+      await waitFor(() => expect(avatarImageUri()).toBeUndefined());
+    });
+  });
+});