stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/__tests__/offline-support/optimistic-update.js

@@ -3,7 +3,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { v4 as uuidv4 } from 'uuid';
 
@@ -146,7 +146,7 @@ export const OptimisticUpdates = () => {
       it('pending task should exist if deleteMessage request fails', async () => {
         const message = generateMessage();
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel} initialValue={message.text}>
               <CallbackEffectWithContext
@@ -165,7 +165,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -177,7 +177,7 @@ export const OptimisticUpdates = () => {
 
       it('pending task should be cleared if deleteMessage request is succesful', async () => {
         const message = generateMessage();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel} initialValue={message.text}>
               <CallbackEffectWithContext
@@ -192,7 +192,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
@@ -205,7 +205,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -224,7 +224,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -238,7 +238,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -253,7 +253,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
@@ -266,7 +266,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -285,7 +285,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -299,7 +299,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -314,7 +314,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
@@ -327,7 +327,7 @@ export const OptimisticUpdates = () => {
       const message = channel.state.messages[0];
       const reaction = generateReaction();
 
-      const { getByTestId } = render(
+      render(
         <Chat client={chatClient} enableOfflineSupport>
           <Channel channel={channel} initialValue={message.text}>
             <CallbackEffectWithContext
@@ -353,7 +353,7 @@ export const OptimisticUpdates = () => {
           </Channel>
         </Chat>,
       );
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
       await waitFor(() => {
         const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');

package/src/components/Attachment/AudioAttachment.tsx

@@ -311,4 +311,4 @@ export const AudioAttachment = (props: AudioAttachmentProps) => (
   <AudioAttachmentWithContext {...props} />
 );
 
-AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';
+AudioAttachment.displayName = 'AudioAttachment{messageInput{audioAttachment}}';

package/src/components/Attachment/Card.tsx

@@ -121,8 +121,8 @@ const CardWithContext = <
     CardCover,
     CardFooter,
     CardHeader,
-    ImageComponent = Image,
     image_url,
+    ImageComponent = Image,
     og_scrape_url,
     onLongPress,
     onPress,

package/src/components/Attachment/FileAttachment.tsx

@@ -75,8 +75,8 @@ const FileAttachmentWithContext = <
   const {
     additionalTouchableProps,
     attachment,
-    attachmentSize,
     AttachmentActions,
+    attachmentSize,
     FileAttachmentIcon,
     onLongPress,
     onPress,

package/src/components/Attachment/FileIcon.tsx

@@ -361,7 +361,7 @@ const videoFileTypes = [
   'video/x-flv',
 ];
 
-const mimeTypeToIconMap: Record<string, React.FC<IconProps>> = {
+const mimeTypeToIconMap: Record<string, React.ComponentType<IconProps>> = {
   'application/pdf': PDF, // .pdf
   'application/rtf': RTF, // .rtf
   'application/vnd.rar': RAR, // .rar
@@ -416,7 +416,7 @@ for (const type of videoFileTypes) {
   mimeTypeToIconMap[type] = Video;
 }
 
-function mimeTypeToIcon(mimeType?: string): React.FC<IconProps> {
+function mimeTypeToIcon(mimeType?: string): React.ComponentType<IconProps> {
   if (!mimeType) return GenericFile;
 
   const Icon = mimeTypeToIconMap[mimeType];
@@ -430,7 +430,7 @@ export type FileIconProps = {
   size?: number;
 };
 
-export const FileIcon: React.FC<FileIconProps> = ({ mimeType, size }) => {
+export const FileIcon = ({ mimeType, size }: FileIconProps) => {
   const {
     theme: {
       messageSimple: {

package/src/components/Attachment/Gallery.tsx

@@ -309,14 +309,14 @@ const GalleryThumbnail = <
   };
 
   const defaultOnPress = () => {
-    // If file type is video and the url is defined then try to open the file.
-    if (thumbnail.type === 'video' && thumbnail.url) {
-      if (isVideoPackageAvailable()) {
-        openImageViewer();
-      } else {
+    // If the url is defined then only try to open the file.
+    if (thumbnail.url) {
+      if (thumbnail.type === 'video' && !isVideoPackageAvailable()) {
         // This condition is kinda unreachable, since we render videos as file attachment if the video
         // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
         openUrlSafely(thumbnail.url);
+      } else {
+        openImageViewer();
       }
     }
   };

package/src/components/Attachment/GalleryImage.tsx

@@ -10,7 +10,7 @@ export type GalleryImageWithContextProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = GalleryImageProps & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>;
 
-export const GalleryImageWithContext: React.FC<GalleryImageWithContextProps> = (props) => {
+export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
   const { ImageComponent = Image, uri, ...rest } = props;
 
   // Caching image components such as FastImage will not work with local images.

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -49,7 +49,7 @@ export const ImageLoadingFailedIndicator = (props: ImageLoadingFailedIndicatorPr
           style={styles.warningIconStyle}
           width={WARNING_ICON_SIZE}
         />
-        <Text style={[styles.errorText, { color: white }]}>{t('Error loading')}</Text>
+        <Text style={[styles.errorText, { color: white }]}>{t<string>('Error loading')}</Text>
       </View>
     </View>
   );

package/src/components/Attachment/VideoThumbnail.tsx

@@ -37,7 +37,7 @@ export type VideoThumbnailProps = {
   thumb_url?: string;
 };
 
-export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
+export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
       colors: { static_black, static_white },

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   fireEvent,
   render,
+  screen,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react-native';
@@ -68,14 +69,14 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
       // expect(queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
     });
   });
 
@@ -87,13 +88,13 @@ describe('Gallery', () => {
     });
     const attachment2 = generateVideoAttachment();
     const component = await getComponent([attachment1, attachment2]);
-    const { getAllByA11yLabel, queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(getAllByA11yLabel('Video Thumbnail').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.getAllByLabelText('Video Thumbnail').length).toBe(1);
     });
   });
 
@@ -107,13 +108,13 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
     });
   });
 
@@ -135,13 +136,13 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
     });
   });
 
@@ -169,15 +170,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([portraitImage, squareImage1, squareImage2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
     });
   });
 
@@ -205,15 +206,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([portraitImage, squareImage1, squareImage2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
     });
   });
 
@@ -245,16 +246,16 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1, image2, image3, image4]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
     });
   });
 
@@ -265,15 +266,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+    render(component);
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-container').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'error', {
+    fireEvent(screen.getByLabelText('Gallery Image'), 'error', {
       nativeEvent: { error: 'error loading image' },
     });
-    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
   it('should render a loading indicator and when successful render the image', async () => {
@@ -283,17 +284,17 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-container').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadStart');
-    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadStart');
+    expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadFinish');
-    waitForElementToBeRemoved(() => getByAccessibilityHint('Image Loading'));
-    expect(getByA11yLabel('Gallery Image')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
+    expect(screen.getByLabelText('Gallery Image')).toBeTruthy();
   });
 });