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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { fireEvent, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -33,6 +33,7 @@ jest.mock('../../../native.ts', () => {
     isAudioPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),
+      fetch: jest.fn(),
     },
     Sound: {
       Player: View,
@@ -50,6 +51,7 @@ describe('FileUploadPreview', () => {
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
+    const user = userEvent.setup();
 
     const user1 = generateUser();
 
@@ -63,7 +65,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -78,16 +80,18 @@ describe('FileUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(fileUploads.length);
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(fileUploads.length);
-      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByText('File type not supported')).toHaveLength(0);
+      expect(screen.queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+        fileUploads.length,
+      );
+      expect(screen.queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('upload-progress-indicator')).toHaveLength(fileUploads.length);
+      expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
+    user.press(screen.getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);
@@ -104,6 +108,7 @@ describe('FileUploadPreview', () => {
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
+    const user = userEvent.setup();
 
     const user1 = generateUser();
 
@@ -117,7 +122,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -132,18 +137,18 @@ describe('FileUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(
+      expect(screen.queryAllByTestId('active-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(
         fileUploads.length,
       );
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByText('File type not supported')).toHaveLength(0);
+      expect(screen.queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
+    user.press(screen.getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);
@@ -162,6 +167,7 @@ describe('FileUploadPreview', () => {
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
+    const user = userEvent.setup();
 
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -173,7 +179,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -188,23 +194,27 @@ describe('FileUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(fileUploads.length);
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(fileUploads.length);
-      expect(queryAllByText('File type not supported')).toHaveLength(0);
+      expect(screen.queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+        fileUploads.length,
+      );
+      expect(screen.queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(
+        fileUploads.length,
+      );
+      expect(screen.queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
+    user.press(screen.getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('retry-upload-progress-indicator')[0]);
+    user.press(screen.getAllByTestId('retry-upload-progress-indicator')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);
@@ -223,6 +233,7 @@ describe('FileUploadPreview', () => {
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
+    const user = userEvent.setup();
 
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -234,7 +245,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -249,16 +260,18 @@ describe('FileUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(fileUploads.length);
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
-      expect(queryAllByText('File type not supported')).toHaveLength(fileUploads.length);
+      expect(screen.queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+        fileUploads.length,
+      );
+      expect(screen.queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(screen.queryAllByText('File type not supported')).toHaveLength(fileUploads.length);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
 
-    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
+    user.press(screen.getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
       expect(removeFile).toHaveBeenCalledTimes(1);
@@ -288,7 +301,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { queryAllByTestId, queryAllByText } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -302,13 +315,13 @@ describe('FileUploadPreview', () => {
       </OverlayProvider>,
     );
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+      expect(screen.queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
         fileUploads.length - 1,
       );
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
-      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
-      expect(queryAllByText('File type not supported')).toHaveLength(1);
+      expect(screen.queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
+      expect(screen.queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+      expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      expect(screen.queryAllByText('File type not supported')).toHaveLength(1);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -337,7 +350,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getByTestId } = render(
+    render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -351,7 +364,7 @@ describe('FileUploadPreview', () => {
       </OverlayProvider>,
     );
 
-    const AudioAttachmentComponent = getByTestId('audio-attachment-upload-preview');
+    const AudioAttachmentComponent = screen.getByTestId('audio-attachment-upload-preview');
 
     await waitFor(() => {
       fireEvent(AudioAttachmentComponent, 'onLoad');

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",
           ]