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

package/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { ProgressIndicatorTypes } from '../../../utils/utils';
@@ -10,7 +10,7 @@ describe('UploadProgressIndicator', () => {
   it('should render an inactive UploadProgressIndicator', async () => {
     const action = jest.fn();
 
-    const { queryByTestId, toJSON } = render(
+    render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
@@ -20,22 +20,16 @@ describe('UploadProgressIndicator', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeFalsy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('active-upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('inactive-upload-progress-indicator')).toBeTruthy();
       expect(action).toHaveBeenCalledTimes(0);
     });
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render an active UploadProgressIndicator', async () => {
     const action = jest.fn();
 
-    const { queryByTestId, toJSON } = render(
+    render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
@@ -45,22 +39,16 @@ describe('UploadProgressIndicator', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render an active UploadProgressIndicator and not-supported indicator', async () => {
     const action = jest.fn();
 
-    const { queryByTestId, toJSON } = render(
+    render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
@@ -70,23 +58,17 @@ describe('UploadProgressIndicator', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('not-supported-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('not-supported-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render an active UploadProgressIndicator and in-progress indicator', async () => {
     const action = jest.fn();
 
-    const { queryByTestId, toJSON } = render(
+    render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
@@ -96,23 +78,18 @@ describe('UploadProgressIndicator', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
       expect(action).toHaveBeenCalledTimes(0);
     });
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render an active UploadProgressIndicator and retry indicator', async () => {
     const action = jest.fn();
+    const user = userEvent.setup();
 
-    const { getByTestId, queryByTestId, toJSON } = render(
+    render(
       <ThemeProvider>
         <UploadProgressIndicator
           action={action}
@@ -122,21 +99,15 @@ describe('UploadProgressIndicator', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy();
-      expect(queryByTestId('upload-progress-indicator')).toBeFalsy();
-      expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
-      expect(queryByTestId('retry-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('active-upload-progress-indicator')).toBeTruthy();
+      expect(screen.queryByTestId('upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('inactive-upload-progress-indicator')).toBeFalsy();
+      expect(screen.queryByTestId('retry-upload-progress-indicator')).toBeTruthy();
       expect(action).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getByTestId('retry-upload-progress-indicator'));
+    user.press(screen.getByTestId('retry-upload-progress-indicator'));
 
     await waitFor(() => expect(action).toHaveBeenCalledTimes(1));
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 });

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -3,8 +3,20 @@
 exports[`AttachButton should render a disabled AttachButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -20,8 +32,8 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="attach-button"
@@ -37,12 +49,12 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
     minY={0}
     pathFill="#7A7A7A"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -53,14 +65,26 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
-        fill={4286216826}
+        fill={
+          {
+            "payload": 4286216826,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -74,8 +98,20 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 exports[`AttachButton should render an enabled AttachButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -91,8 +127,8 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="attach-button"
@@ -108,12 +144,12 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
     minY={0}
     pathFill="#7A7A7A"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -124,14 +160,26 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
-        fill={4286216826}
+        fill={
+          {
+            "payload": 4286216826,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -3,8 +3,20 @@
 exports[`SendButton should render a non-editing disabled SendButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -20,8 +32,8 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="send-button"
@@ -37,12 +49,12 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
     minY={0}
     pathFill="#DBDBDB"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -53,14 +65,26 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
-        fill={4292598747}
+        fill={
+          {
+            "payload": 4292598747,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -74,8 +98,20 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
 exports[`SendButton should render a non-editing enabled SendButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -91,8 +127,8 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="send-button"
@@ -108,12 +144,12 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
     minY={0}
     pathFill="#005FFF"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -124,14 +160,26 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
-        fill={4278214655}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -145,8 +193,20 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
 exports[`SendButton should render an editing disabled SendButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -162,8 +222,8 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="send-button"
@@ -179,12 +239,12 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
     minY={0}
     pathFill="#DBDBDB"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -195,14 +255,26 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
-        fill={4292598747}
+        fill={
+          {
+            "payload": 4292598747,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -216,8 +288,20 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
 exports[`SendButton should render an editing enabled SendButton 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -233,8 +317,8 @@ exports[`SendButton should render an editing enabled SendButton 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {},
+    [
+      {},
     ]
   }
   testID="send-button"
@@ -250,12 +334,12 @@ exports[`SendButton should render an editing enabled SendButton 1`] = `
     minY={0}
     pathFill="#005FFF"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -266,14 +350,26 @@ exports[`SendButton should render an editing enabled SendButton 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
-        fill={4278214655}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]

package/src/components/MessageInput/components/InputEditingStateHeader.tsx

@@ -51,7 +51,7 @@ export const InputEditingStateHeaderWithContext = <
     <View style={[styles.editingBoxHeader, editingBoxHeader]}>
       <Edit pathFill={grey_gainsboro} />
       <Text style={[styles.editingBoxHeaderTitle, { color: black }, editingBoxHeaderTitle]}>
-        {t('Editing Message')}
+        {t<string>('Editing Message')}
       </Text>
       <TouchableOpacity
         disabled={disabled}

package/src/components/MessageInput/components/InputReplyStateHeader.tsx

@@ -51,7 +51,7 @@ export const InputReplyStateHeaderWithContext = <
     <View style={[styles.replyBoxHeader, editingBoxHeader]}>
       <CurveLineLeftUp pathFill={grey_gainsboro} />
       <Text style={[styles.replyBoxHeaderTitle, { color: black }, editingBoxHeaderTitle]}>
-        {t('Reply to Message')}
+        {t<string>('Reply to Message')}
       </Text>
       <TouchableOpacity
         disabled={disabled}

package/src/components/MessageList/DateHeader.tsx

@@ -24,7 +24,7 @@ export type DateHeaderProps = {
   dateString: string;
 };
 
-export const DateHeader: React.FC<DateHeaderProps> = ({ dateString }) => {
+export const DateHeader = ({ dateString }: DateHeaderProps) => {
   const {
     theme: {
       colors: { overlay, white },

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -28,7 +28,7 @@ export type InlineDateSeparatorProps = {
   date?: Date;
 };
 
-export const InlineDateSeparator: React.FC<InlineDateSeparatorProps> = ({ date }) => {
+export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
   const {
     theme: {
       colors: { overlay, white },