stream-chat-react-native-core 9.0.0-beta.3 → 9.0.0-beta.30

package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx

@@ -90,31 +90,19 @@ describe('useChannelActionItems', () => {
   it('returns default channel action items', () => {
     const { result } = renderHook(() => useChannelActionItems({ channel }));
 
-    expect(result.current).toHaveLength(4);
+    expect(result.current).toHaveLength(3);
     expect(result.current.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
-      channelActions.archive,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(result.current.map((item) => item.id)).toEqual([
-      'mute',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(result.current.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
     expect(result.current.map((item) => item.type)).toEqual([
-      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
-    expect(result.current.map((item) => item.placement)).toEqual([
-      'both',
-      'both',
-      'sheet',
-      'sheet',
-    ]);
+    expect(result.current.map((item) => item.placement)).toEqual(['swipe', 'sheet', 'sheet']);
   });
 
   it('uses custom getChannelActionItems with context and defaultItems when provided', () => {
@@ -178,25 +166,18 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
-      channelActions.archive,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(actionItems.map((item) => item.id)).toEqual([
-      'mute',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.type)).toEqual([
-      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
   });
 
-  it('returns direct-chat variants for mute, block and archive states', () => {
+  it('returns direct-chat variants for mute and block states', () => {
     const channelActions = createChannelActions();
     const actionItems = buildDefaultChannelActionItems({
       actions: channelActions,
@@ -208,34 +189,20 @@ describe('getChannelActionItems', () => {
       t: (value) => value,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual([
-      'mute',
-      'block',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'block', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.unmuteUser,
       channelActions.unblockUser,
-      channelActions.unarchive,
       channelActions.leave,
       expect.any(Function),
     ]);
     expect(actionItems.map((item) => item.label)).toEqual([
       'Unmute User',
       'Unblock User',
-      'Unarchive Chat',
       'Leave Chat',
       'Delete Chat',
     ]);
-    expect(actionItems.map((item) => item.placement)).toEqual([
-      'sheet',
-      'sheet',
-      'sheet',
-      'sheet',
-      'sheet',
-    ]);
+    expect(actionItems.map((item) => item.placement)).toEqual(['sheet', 'sheet', 'sheet', 'sheet']);
   });
 
   it('omits delete action when current user is not the channel creator', () => {
@@ -249,10 +216,10 @@ describe('getChannelActionItems', () => {
       t: (value) => value,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'archive', 'leave']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']);
   });
 
-  it('uses group variants for mute and archive labels and placements', () => {
+  it('uses group mute variants for labels and placements', () => {
     const channelActions = createChannelActions();
     const actionItems = buildDefaultChannelActionItems({
       actions: channelActions,
@@ -266,11 +233,11 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems[0].action).toBe(channelActions.unmuteChannel);
     expect(actionItems[0].label).toBe('Unmute Group');
-    expect(actionItems[0].placement).toBe('both');
+    expect(actionItems[0].placement).toBe('swipe');
 
-    expect(actionItems[1].action).toBe(channelActions.unarchive);
-    expect(actionItems[1].label).toBe('Unarchive Group');
-    expect(actionItems[1].placement).toBe('both');
+    expect(actionItems[1].action).toBe(channelActions.leave);
+    expect(actionItems[1].label).toBe('Leave Group');
+    expect(actionItems[1].placement).toBe('sheet');
   });
 
   it('shows delete confirmation and calls deleteChannel on destructive confirm', async () => {

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -12,8 +12,8 @@ import { useIsDirectChat } from './useIsDirectChat';
 
 import { useTheme, useTranslationContext } from '../../../contexts';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons';
-import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
+import { IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
+import { ArrowBoxLeft } from '../../../icons/leave';
 
 export type ChannelActionHandler = () => Promise<void> | void;
 
@@ -56,10 +56,8 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 ) => {
   const {
     actions: {
-      archive,
       deleteChannel,
       leave,
-      unarchive,
       muteChannel,
       unmuteChannel,
       muteUser,
@@ -67,7 +65,6 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       blockUser,
       unblockUser,
     },
-    isArchived,
     isDirectChat,
     muteActive,
     t,
@@ -92,15 +89,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? unmuteChannel
           : muteChannel,
-      Icon: (props) => (
-        <Mute
-          width={20}
-          height={20}
-          {...props}
-          stroke={undefined}
-          fill={props.fill ?? props.stroke}
-        />
-      ),
+      Icon: (props) =>
+        muteActive ? (
+          <Sound width={20} height={20} {...props} />
+        ) : (
+          <Mute
+            width={20}
+            height={20}
+            {...props}
+            stroke={undefined}
+            fill={props.fill ?? props.stroke}
+          />
+        ),
       id: 'mute',
       label: isDirectChat
         ? muteActive
@@ -109,7 +109,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? t('Unmute Group')
           : t('Mute Group'),
-      placement: isDirectChat ? 'sheet' : 'both',
+      placement: isDirectChat ? 'sheet' : 'swipe',
       type: 'standard',
     },
   ];
@@ -125,21 +125,6 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     });
   }
 
-  actionItems.push({
-    action: isArchived ? unarchive : archive,
-    Icon: (props) => <ChannelActionsIcon Icon={Archive} {...props} />,
-    id: 'archive',
-    label: isDirectChat
-      ? isArchived
-        ? t('Unarchive Chat')
-        : t('Archive Chat')
-      : isArchived
-        ? t('Unarchive Group')
-        : t('Archive Group'),
-    placement: isDirectChat ? 'sheet' : 'both',
-    type: 'standard',
-  });
-
   actionItems.push({
     action: leave,
     Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -24,7 +24,7 @@ type Parameters = {
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
@@ -68,6 +68,7 @@ export const usePaginatedChannels = ({
     const hasUpdatedData =
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
+      queryType === 'backgroundRefresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),
@@ -129,7 +130,7 @@ export const usePaginatedChannels = ({
     setActiveQueryType(null);
   };
 
-  const refreshList = async () => {
+  const refreshList = async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
     if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
@@ -137,7 +138,7 @@ export const usePaginatedChannels = ({
     }
 
     lastRefresh.current = Date.now();
-    await queryChannels('refresh');
+    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
   };
 
   const reloadList = async () => {
@@ -167,7 +168,9 @@ export const usePaginatedChannels = ({
       'connection.changed',
       async (event) => {
         if (event.online) {
-          await refreshList();
+          // Reconnection refreshes should stay silent, but still share the same debounce
+          // path as pull-to-refresh.
+          await refreshList({ isBackground: true });
         }
       },
     );
@@ -195,7 +198,7 @@ export const usePaginatedChannels = ({
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',
-    refreshList,
+    refreshList: () => refreshList(),
     reloadList,
     staticChannelsActive,
   };

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -4,20 +4,25 @@ import type { FlatListProps } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
-import { Channel } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
-import { useBottomSheetContext, useTheme, useTranslationContext } from '../../contexts';
+import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
-import { useStableCallback } from '../../hooks';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { primitives } from '../../theme';
-import { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
+import type { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelMembersState } from '../ChannelList/hooks/useChannelMembersState';
+import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useChannelOnlineMemberCount } from '../ChannelList/hooks/useChannelOnlineMemberCount';
 import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
-import { ChannelAvatar } from '../ui';
-import { StreamBottomSheetModalFlatList } from '../UIComponents';
+import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
+import { StreamBottomSheetModalFlatList } from '../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ChannelDetailsHeaderProps = { channel: Channel };
 
@@ -35,6 +40,9 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
+  const { muted: channelMuted } = useIsChannelMuted(channel);
+  const directChatUserMuted = useChannelMuteActive(channel);
+  const muted = isDirectChat ? directChatUserMuted : channelMuted;
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(
@@ -49,9 +57,12 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
 
   return (
     <View style={styles.headerContainer}>
-      <ChannelAvatar channel={channel} size={'lg'} />
+      <ChannelAvatar channel={channel} size={'xl'} />
       <View style={styles.metaContainer}>
-        <ChannelPreviewTitle channel={channel} />
+        <View style={styles.titleContainer}>
+          <ChannelPreviewTitle channel={channel} />
+          {muted ? <ChannelPreviewMutedStatus /> : null}
+        </View>
         <Text style={styles.headerMeta}>
           {isDirectChat ? (onlineCount === 1 ? t('Online') : t('Offline')) : membersAndOnlineLabel}
         </Text>
@@ -132,7 +143,7 @@ const useStyles = () => {
           flexDirection: 'row',
           padding: primitives.spacingSm,
           gap: primitives.spacingSm,
-          backgroundColor: semantics.backgroundCoreElevation1,
+          backgroundColor: 'transparent',
           ...header.container,
         },
         headerMeta: {
@@ -145,6 +156,11 @@ const useStyles = () => {
           gap: primitives.spacingXxs,
           ...header.metaContainer,
         },
+        titleContainer: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+        },
         itemContainer: {
           flexDirection: 'row',
           alignItems: 'center',

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -21,7 +21,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { PollIcon } from '../../icons/PollIcon';
+import { PollIcon } from '../../icons/poll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
@@ -76,6 +76,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
 
   const isFailedMessage =
     lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
+  const showMessageDeliveryStatus = !isMessageDeleted;
 
   if (usersTyping.length > 0) {
     return <PreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
@@ -103,7 +104,9 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <PollIcon height={16} width={16} stroke={semantics.textSecondary} />
-        <Text style={styles.subtitle}>{pollLabel}</Text>
+        <Text ellipsizeMode='tail' numberOfLines={1} style={styles.subtitle}>
+          {pollLabel}
+        </Text>
       </View>
     );
   }
@@ -120,14 +123,18 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        {showMessageDeliveryStatus ? (
+          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        ) : null}
         <PreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        {showMessageDeliveryStatus ? (
+          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        ) : null}
         <PreviewLastMessage message={lastMessage} />
       </View>
     );

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { ChannelPreviewProps } from './ChannelPreview';
+import type { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
-import { ChannelPreviewProps } from './ChannelPreview';
+import type { ChannelPreviewProps } from './ChannelPreview';
 import { ChannelPreviewMessage } from './ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewStatus } from './ChannelPreviewStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
 import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
 
-import { LastMessageType } from './hooks/useChannelPreviewData';
+import type { LastMessageType } from './hooks/useChannelPreviewData';
 
 import {
   ChannelsContextValue,
@@ -204,6 +204,7 @@ const useStyles = () => {
       },
       contentContainer: { flex: 1, gap: primitives.spacingXxs },
       upperRow: {
+        gap: primitives.spacingMd,
         alignItems: 'center',
         flex: 1,
         flexDirection: 'row',

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -1,27 +1,27 @@
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
 import { StyleSheet } from 'react-native';
 
-import { SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
-import { Channel } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { ChannelDetailsBottomSheet as DefaultChannelDetailsBottomSheet } from './ChannelDetailsBottomSheet';
 import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
-import { useTheme } from '../../contexts';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
-import { Archive, MenuPointHorizontal, Mute } from '../../icons';
-import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { MenuPointHorizontal, Mute, Sound } from '../../icons';
+import type { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById';
-import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
+import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
+import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
-  BottomSheetModal,
   RightActions,
   SwipableActionItem,
   SwipableWrapper,
   SwipableWrapperProps,
-} from '../UIComponents';
+} from '../UIComponents/SwipableWrapper';
 
 export const OpenChannelDetailsButton = () => {
   const {
@@ -43,8 +43,12 @@ export const ChannelSwipableWrapper = ({
   swipableProps?: SwipableWrapperProps['swipableProps'];
 }>) => {
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const channelActionsById = useChannelActionItemsById({ channel, getChannelActionItems });
+  const { muteChannel, unmuteChannel } = useChannelActions(channel);
   const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const sheetItems = useMemo(
+    () => channelActionItems.filter((item) => item.placement !== 'swipe'),
+    [channelActionItems],
+  );
   const swipableRegistry = useSwipeRegistryContext();
 
   const {
@@ -52,16 +56,17 @@ export const ChannelSwipableWrapper = ({
   } = useTheme();
   const styles = useStyles();
 
-  const isDirectChannel = useIsDirectChat(channel);
+  const channelMuteState = useIsChannelMuted(channel);
+  const channelMuteActive = channelMuteState.muted;
 
   const Icon = useCallback(
     () =>
-      isDirectChannel ? (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
+      channelMuteActive ? (
+        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
       ) : (
-        <Archive width={20} height={20} stroke={semantics.textOnAccent} />
+        <Mute width={20} height={20} fill={semantics.textOnAccent} />
       ),
-    [isDirectChannel, semantics.textOnAccent],
+    [channelMuteActive, semantics.textOnAccent],
   );
 
   const swipableActions = useMemo<SwipableActionItem[]>(() => {
@@ -74,29 +79,25 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    const extraItem = isDirectChannel ? channelActionsById.mute : channelActionsById.archive;
-
-    if (extraItem) {
-      const { id, action } = extraItem;
-      items.push({
-        id,
-        action: () => {
-          action();
-          swipableRegistry?.closeAll();
-        },
-        Content: Icon,
-        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
-      });
-    }
+    items.push({
+      id: 'mute',
+      action: () => {
+        const action = channelMuteActive ? unmuteChannel : muteChannel;
+        action();
+        swipableRegistry?.closeAll();
+      },
+      Content: Icon,
+      contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+    });
 
     return items;
   }, [
     styles.contentContainerStyle,
     styles.elipsis,
     styles.standard,
-    isDirectChannel,
-    channelActionsById.mute,
-    channelActionsById.archive,
+    channelMuteActive,
+    muteChannel,
+    unmuteChannel,
     Icon,
     swipableRegistry,
   ]);
@@ -119,11 +120,12 @@ export const ChannelSwipableWrapper = ({
         {children}
       </SwipableWrapper>
       <BottomSheetModal
+        enableDynamicSizing={true}
         onClose={() => setChannelDetailSheetOpen(false)}
         visible={channelDetailSheetOpen}
-        height={356}
+        height={424}
       >
-        <ChannelDetailsBottomSheetComponent channel={channel} items={channelActionItems} />
+        <ChannelDetailsBottomSheetComponent channel={channel} items={sheetItems} />
       </BottomSheetModal>
     </>
   );
@@ -142,12 +144,12 @@ const useStyles = () => {
           justifyContent: 'center',
         },
         elipsis: {
-          backgroundColor: semantics.backgroundCoreSurface,
+          backgroundColor: semantics.backgroundCoreSurfaceDefault,
         },
         standard: {
           backgroundColor: semantics.accentPrimary,
         },
       }),
-    [semantics.accentPrimary, semantics.backgroundCoreSurface],
+    [semantics.accentPrimary, semantics.backgroundCoreSurfaceDefault],
   );
 };

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -11,7 +11,7 @@ import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
 
 const mockStreamBottomSheetModalFlatList = jest.fn(() => null);
 
-jest.mock('../../UIComponents', () => ({
+jest.mock('../../UIComponents/StreamBottomSheetModalFlatList', () => ({
   StreamBottomSheetModalFlatList: (...args: unknown[]) =>
     mockStreamBottomSheetModalFlatList(...args),
 }));

package/src/components/ChannelPreview/__tests__/ChannelLastMessagePreview.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelLastMessagePreview } from '../ChannelLastMessagePreview';
+
+describe('ChannelLastMessagePreview', () => {
+  it('shows Giphy instead of slash-command text for giphy attachments with quoted replies', async () => {
+    const client = await getTestClientWithUser({ id: 'preview-user' });
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '/giphy Cat',
+      user,
+    });
+
+    const { getByText, queryByText } = render(
+      <Chat client={client}>
+        <ChannelLastMessagePreview message={message} />
+      </Chat>,
+    );
+
+    expect(getByText('Giphy')).toBeTruthy();
+    expect(queryByText('/giphy Cat')).toBeNull();
+  });
+});