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

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 
@@ -58,10 +58,10 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
     });
   });
 
@@ -69,13 +69,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, type: 'error' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-error')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-error')).toBeTruthy();
     });
   });
 
@@ -83,13 +83,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, status: 'failed' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-error')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-error')).toBeTruthy();
     });
   });
 
@@ -97,13 +97,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, type: 'deleted' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-deleted')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-deleted')).toBeTruthy();
     });
   });
 
@@ -113,7 +113,7 @@ describe('MessageContent', () => {
 
     const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageHeader={ContextMessageHeader}>
@@ -124,8 +124,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-header')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-header')).toBeTruthy();
     });
   });
 
@@ -135,7 +135,7 @@ describe('MessageContent', () => {
 
     const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageFooter={ContextMessageFooter}>
@@ -146,8 +146,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-footer')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-footer')).toBeTruthy();
     });
   });
 
@@ -155,15 +155,15 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId, queryAllByTestId } = renderMessage({
+    renderMessage({
       message,
       MessageFooter: null,
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-status-time')).toBeTruthy();
-      expect(queryAllByTestId('message-footer')).toHaveLength(0);
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-status-time')).toBeTruthy();
+      expect(screen.queryAllByTestId('message-footer')).toHaveLength(0);
     });
   });
 
@@ -177,11 +177,11 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('gallery-container')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
     });
   });
 
@@ -196,13 +196,13 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId, queryAllByA11yLabel, queryAllByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
-    const fileAttachments = queryAllByTestId('file-attachment');
-    const audioAttachments = queryAllByA11yLabel('audio-attachment-preview');
+    const fileAttachments = screen.queryAllByTestId('file-attachment');
+    const audioAttachments = screen.queryAllByLabelText('audio-attachment-preview');
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
       expect(fileAttachments).toHaveLength(1);
       expect(audioAttachments).toHaveLength(1);
     });
@@ -225,7 +225,7 @@ describe('MessageContent', () => {
       return <MessageContent {...props} />;
     };
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
@@ -236,8 +236,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('reaction-list')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('reaction-list')).toBeTruthy();
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -19,17 +19,17 @@ describe('MessagePinnedHeader', () => {
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
-    const { getByTestId, rerender, toJSON } = render(
+    render(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='right' message={message} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.getByTestId('message-pinned')).toBeTruthy();
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='right' message={message} />
       </ThemeProvider>,
@@ -39,15 +39,15 @@ describe('MessagePinnedHeader', () => {
       user: staticUser,
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='left' message={staticMessage} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-pinned')).toBeTruthy();
-      expect(toJSON()).toMatchSnapshot();
+      expect(screen.getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.toJSON()).toMatchSnapshot();
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessageReplies.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -15,13 +15,14 @@ afterEach(cleanup);
 describe('MessageReplies', () => {
   it('should render message replies', async () => {
     const onPressMock = jest.fn(() => null);
+    const user = userEvent.setup();
     const t = jest.fn((key) => key);
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       reply_count: 2,
       user: staticUser,
     });
-    const { getByTestId, getByText, queryAllByTestId, rerender, toJSON } = render(
+    render(
       <TranslationProvider value={{ t }}>
         <ThemeProvider style={defaultTheme}>
           <MessageReplies
@@ -36,13 +37,13 @@ describe('MessageReplies', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-replies')).toBeTruthy();
-      expect(getByTestId('message-replies-right')).toBeTruthy();
-      expect(queryAllByTestId('message-replies-left')).toHaveLength(0);
+      expect(screen.getByTestId('message-replies')).toBeTruthy();
+      expect(screen.getByTestId('message-replies-right')).toBeTruthy();
+      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
       expect(t).toHaveBeenCalledWith('{{ replyCount }} Thread Replies', {
         replyCount: message.reply_count,
       });
-      expect(getByText('{{ replyCount }} Thread Replies')).toBeTruthy();
+      expect(screen.getByText('{{ replyCount }} Thread Replies')).toBeTruthy();
     });
 
     const message2 = generateMessage({
@@ -50,7 +51,7 @@ describe('MessageReplies', () => {
       user: staticUser,
     });
 
-    rerender(
+    screen.rerender(
       <TranslationProvider value={{ t }}>
         <ThemeProvider style={defaultTheme}>
           <MessageReplies
@@ -64,16 +65,15 @@ describe('MessageReplies', () => {
       </TranslationProvider>,
     );
 
-    fireEvent.press(getByTestId('message-replies'));
+    user.press(screen.getByTestId('message-replies'));
 
     await waitFor(() => {
       expect(onPressMock).toHaveBeenCalled();
-      expect(getByTestId('message-replies')).toBeTruthy();
-      expect(getByTestId('message-replies-left')).toBeTruthy();
-      expect(queryAllByTestId('message-replies-right')).toHaveLength(0);
+      expect(screen.getByTestId('message-replies')).toBeTruthy();
+      expect(screen.getByTestId('message-replies-left')).toBeTruthy();
+      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
       expect(t).toHaveBeenCalledWith('1 Thread Reply');
-      expect(getByText('1 Thread Reply')).toBeTruthy();
-      expect(toJSON()).toMatchSnapshot();
+      expect(screen.getByText('1 Thread Reply')).toBeTruthy();
     });
   });
 
@@ -83,7 +83,7 @@ describe('MessageReplies', () => {
     const message = generateMessage({
       user,
     });
-    const { queryAllByTestId, rerender } = render(
+    render(
       <TranslationProvider value={{ t }}>
         <ThemeProvider style={defaultTheme}>
           <MessageReplies
@@ -97,9 +97,9 @@ describe('MessageReplies', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-replies')).toHaveLength(0);
-      expect(queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(queryAllByTestId('message-replies-right')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
     });
 
     const message2 = generateMessage({
@@ -107,7 +107,7 @@ describe('MessageReplies', () => {
       user,
     });
 
-    rerender(
+    screen.rerender(
       <TranslationProvider value={{ t }}>
         <ThemeProvider style={defaultTheme}>
           <MessageReplies
@@ -122,9 +122,9 @@ describe('MessageReplies', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-replies')).toHaveLength(0);
-      expect(queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(queryAllByTestId('message-replies-right')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
+      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -3,11 +3,11 @@
 exports[`MessageAvatar should render message avatar 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "marginRight": 8,
       },
-      Object {},
+      {},
     ]
   }
   testID="message-avatar"
@@ -15,18 +15,18 @@ exports[`MessageAvatar should render message avatar 1`] = `
   <View>
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "justifyContent": "center",
             "overflow": "hidden",
           },
-          Object {
+          {
             "borderRadius": 16,
             "height": 32,
             "width": 32,
           },
-          Object {},
+          {},
           undefined,
         ]
       }
@@ -35,18 +35,18 @@ exports[`MessageAvatar should render message avatar 1`] = `
         accessibilityLabel="Avatar Image"
         onError={[Function]}
         source={
-          Object {
+          {
             "uri": "https://i.imgur.com/ytIyojl.png",
           }
         }
         style={
-          Array [
-            Object {
+          [
+            {
               "borderRadius": 16,
               "height": 32,
               "width": 32,
             },
-            Object {
+            {
               "backgroundColor": "#ececec",
               "borderRadius": 16,
               "height": 32,

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -3,18 +3,18 @@
 exports[`MessagePinnedHeader should render message pinned 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "display": "flex",
         "flexDirection": "row",
         "marginBottom": 8,
         "marginLeft": 30,
         "marginTop": 5,
       },
-      Object {
+      {
         "justifyContent": "flex-start",
       },
-      Object {},
+      {},
     ]
   }
   testID="message-pinned"
@@ -30,12 +30,12 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
     minY={0}
     pathFill="#7A7A7A"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 24,
           "width": 24,
@@ -46,14 +46,26 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
-        fill={4286216826}
+        fill={
+          {
+            "payload": 4286216826,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -63,12 +75,12 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
   </RNSVGSvgView>
   <Text
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "#7A7A7A",
         },
-        Object {},
-        Object {},
+        {},
+        {},
       ]
     }
   >

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageStatus.test.js.snap

@@ -3,29 +3,29 @@
 exports[`MessageStatus should render message status with read by container 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "alignItems": "flex-end",
         "flexDirection": "row",
         "justifyContent": "center",
         "paddingRight": 3,
       },
-      Object {},
+      {},
     ]
   }
 >
   <Text
     style={
-      Array [
-        Object {
+      [
+        {
           "fontSize": 11,
           "fontWeight": "700",
           "paddingRight": 3,
         },
-        Object {
+        {
           "color": "#005FFF",
         },
-        Object {},
+        {},
       ]
     }
     testID="read-by-container"
@@ -43,12 +43,12 @@ exports[`MessageStatus should render message status with read by container 1`] =
     minY={0}
     pathFill="#005FFF"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Object {
+        {
           "flex": 0,
           "height": 16,
           "width": 16,
@@ -59,14 +59,26 @@ exports[`MessageStatus should render message status with read by container 1`] =
     vbWidth={24}
     width={16}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M2.293 11.293a1 1 0 011.414 0l4 4a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414zM9.293 12.293a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414z"
-        fill={4278214655}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -75,10 +87,15 @@ exports[`MessageStatus should render message status with read by container 1`] =
       <RNSVGPath
         clipRule={0}
         d="M15.707 7.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414-1.414l8-8a1 1 0 011.414 0zM21.707 7.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414-1.414l8-8a1 1 0 011.414 0z"
-        fill={4278214655}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`MessageTextContainer should render message text container 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "maxWidth": 250,
         "paddingHorizontal": 16,
       },
-      Object {},
+      {},
       undefined,
     ]
   }
@@ -16,8 +16,8 @@ exports[`MessageTextContainer should render message text container 1`] = `
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "stretch",
         },
         undefined,
@@ -26,7 +26,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
   >
     <Text
       style={
-        Object {
+        {
           "alignItems": "flex-start",
           "flexDirection": "row",
           "flexWrap": "wrap",
@@ -38,7 +38,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
     >
       <Text
         style={
-          Object {
+          {
             "color": "#000000",
           }
         }