stream-chat-react-native-core 4.3.1 → 4.4.0-beta.3

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -13,6 +13,8 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Refresh } from '../../icons';
 import { ProgressIndicatorTypes } from '../../utils/utils';
 
+const REFRESH_ICON_SIZE = 18;
+
 const styles = StyleSheet.create({
   activityIndicatorContainer: {
     alignItems: 'center',
@@ -55,27 +57,25 @@ const styles = StyleSheet.create({
 export type UploadProgressIndicatorProps = {
   /** Action triggered when clicked indicator */
   action?: (event: GestureResponderEvent) => void;
-  /** Boolean status of upload progress */
-  active?: boolean;
   /** style */
   style?: StyleProp<ViewStyle>;
   /** Type of active indicator */
-  type?: 'in_progress' | 'retry';
+  type?: 'in_progress' | 'retry' | 'not_supported' | 'inactive' | null;
 };
 
 export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (props) => {
-  const { action, active, children, style, type } = props;
+  const { action, children, style, type } = props;
 
   const {
     theme: {
-      colors: { overlay: overlayColor, white_smoke },
+      colors: { overlay: overlayColor },
       messageInput: {
         uploadProgressIndicator: { container, overlay },
       },
     },
   } = useTheme();
 
-  return !active ? (
+  return type === ProgressIndicatorTypes.INACTIVE ? (
     <View style={[styles.overflowHidden, style]} testID='inactive-upload-progress-indicator'>
       {children}
     </View>
@@ -83,26 +83,53 @@ export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (
     <View style={[styles.overflowHidden, style]} testID='active-upload-progress-indicator'>
       {children}
       <View style={[styles.overlay, { backgroundColor: overlayColor }, overlay]} />
-      <View style={[styles.container, { backgroundColor: overlayColor }, container]}>
-        {type === ProgressIndicatorTypes.IN_PROGRESS && (
-          <View style={styles.activityIndicatorContainer}>
-            <ActivityIndicator color={white_smoke} testID='upload-progress-indicator' />
-          </View>
-        )}
-        {type === ProgressIndicatorTypes.RETRY && (
-          <TouchableOpacity onPress={action} style={styles.retryButtonContainer}>
-            <Refresh
-              height={18}
-              pathFill={white_smoke}
-              testID='retry-upload-progress-indicator'
-              width={18}
-            />
-          </TouchableOpacity>
-        )}
+      <View
+        style={[
+          type === ProgressIndicatorTypes.NOT_SUPPORTED ? styles.overflowHidden : styles.container,
+          { backgroundColor: overlayColor },
+          container,
+        ]}
+        testID='not-supported-upload-progress-indicator'
+      >
+        {type === ProgressIndicatorTypes.IN_PROGRESS && <InProgressIndicator />}
+        {type === ProgressIndicatorTypes.RETRY && <RetryIndicator action={action} />}
       </View>
     </View>
   );
 };
 
+const InProgressIndicator = () => {
+  const {
+    theme: {
+      colors: { white_smoke },
+    },
+  } = useTheme();
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={white_smoke} testID='upload-progress-indicator' />
+    </View>
+  );
+};
+
+const RetryIndicator = ({ action }: Pick<UploadProgressIndicatorProps, 'action'>) => {
+  const {
+    theme: {
+      colors: { white_smoke },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity onPress={action} style={styles.retryButtonContainer}>
+      <Refresh
+        height={REFRESH_ICON_SIZE}
+        pathFill={white_smoke}
+        testID='retry-upload-progress-indicator'
+        width={REFRESH_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
 UploadProgressIndicator.displayName =
   'UploadProgressIndicator{messageInput{uploadProgressIndicator}}';

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

@@ -31,6 +31,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOADING }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -47,7 +48,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -66,6 +67,7 @@ describe('FileUploadPreview', () => {
       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(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -76,29 +78,6 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render FileUploadPreview with all uploaded files', async () => {
@@ -106,6 +85,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOADED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -122,7 +102,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -143,6 +123,7 @@ describe('FileUploadPreview', () => {
       );
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('File type not supported')).toHaveLength(0);
       expect(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -153,29 +134,6 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render FileUploadPreview with all failed files', async () => {
@@ -183,6 +141,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOAD_FAILED }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOAD_FAILED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.UPLOAD_FAILED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -199,7 +158,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -218,6 +177,7 @@ describe('FileUploadPreview', () => {
       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(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
@@ -235,16 +195,36 @@ describe('FileUploadPreview', () => {
       expect(removeFile).toHaveBeenCalledTimes(1);
       expect(uploadFile).toHaveBeenCalledTimes(1);
     });
+  });
+
+  it('should render FileUploadPreview with all unsupported files', async () => {
+    const fileUploads = [
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.NOT_SUPPORTED }),
+      generateFileUploadPreview({ id: 'file-upload-id-4', state: FileState.NOT_SUPPORTED }),
+    ];
+    const removeFile = jest.fn();
+    const uploadFile = jest.fn();
+
+    const user1 = generateUser();
 
-    rerender(
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.query();
+
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
+              fileUploads={fileUploads}
               removeFile={removeFile}
               uploadFile={uploadFile}
             />
@@ -253,10 +233,21 @@ describe('FileUploadPreview', () => {
       </OverlayProvider>,
     );
 
-    const snapshot = toJSON();
+    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(removeFile).toHaveBeenCalledTimes(0);
+      expect(uploadFile).toHaveBeenCalledTimes(0);
+    });
+
+    fireEvent.press(getAllByTestId('remove-file-upload-preview')[0]);
 
     await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
+      expect(removeFile).toHaveBeenCalledTimes(1);
+      expect(uploadFile).toHaveBeenCalledTimes(0);
     });
   });
 
@@ -265,6 +256,7 @@ describe('FileUploadPreview', () => {
       generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
       generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
       generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.NOT_SUPPORTED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
@@ -281,7 +273,7 @@ describe('FileUploadPreview', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
 
-    const { queryAllByTestId, rerender, toJSON } = render(
+    const { queryAllByTestId, queryAllByText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
@@ -301,31 +293,9 @@ describe('FileUploadPreview', () => {
       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(removeFile).toHaveBeenCalledTimes(0);
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} FlatList={MockedFlatList}>
-            <FileUploadPreview
-              fileUploads={fileUploads.map((file, index) => ({
-                ...file,
-                id: `${index}`,
-              }))}
-              removeFile={removeFile}
-              uploadFile={uploadFile}
-            />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 });

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

@@ -14,11 +14,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOADING }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -35,6 +36,7 @@ describe('ImageUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(imageUploads.length);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -45,25 +47,6 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render ImageUploadPreview with all uploaded images', async () => {
@@ -71,11 +54,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOADED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -92,6 +76,7 @@ describe('ImageUploadPreview', () => {
       );
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -102,25 +87,6 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 
   it('should render ImageUploadPreview with all failed images', async () => {
@@ -128,11 +94,12 @@ describe('ImageUploadPreview', () => {
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOAD_FAILED }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOAD_FAILED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.UPLOAD_FAILED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
+    const { getAllByTestId, queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -149,6 +116,7 @@ describe('ImageUploadPreview', () => {
       expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(imageUploads.length);
+      expect(queryAllByText('Not supported')).toHaveLength(0);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
@@ -166,37 +134,65 @@ describe('ImageUploadPreview', () => {
       expect(removeImage).toHaveBeenCalledTimes(1);
       expect(uploadImage).toHaveBeenCalledTimes(1);
     });
+  });
 
-    rerender(
+  it('should render ImageUploadPreview with all unsupported', async () => {
+    const imageUploads = [
+      generateImageUploadPreview({
+        id: 'image-upload-preview-1',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-2',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-3',
+        state: FileState.NOT_SUPPORTED,
+      }),
+      generateImageUploadPreview({
+        id: 'image-upload-preview-4',
+        state: FileState.NOT_SUPPORTED,
+      }),
+    ];
+    const removeImage = jest.fn();
+    const uploadImage = jest.fn();
+
+    const { queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
+          imageUploads={imageUploads}
           removeImage={removeImage}
           uploadImage={uploadImage}
         />
       </ThemeProvider>,
     );
 
-    const snapshot = toJSON();
-
     await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
+      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
+        imageUploads.length,
+      );
+      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(0);
+      expect(queryAllByText('Not supported')).toHaveLength(imageUploads.length);
+      expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(0);
+
+      expect(removeImage).toHaveBeenCalledTimes(0);
+      expect(uploadImage).toHaveBeenCalledTimes(0);
     });
   });
 
-  it('should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image', async () => {
+  it('should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image, and 1 unsupported', async () => {
     const imageUploads = [
       generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
       generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
       generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-4', state: FileState.NOT_SUPPORTED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
 
-    const { queryAllByTestId, rerender, toJSON } = render(
+    const { queryAllByTestId, queryAllByText } = render(
       <ThemeProvider>
         <ImageUploadPreview
           imageUploads={imageUploads}
@@ -207,33 +203,12 @@ describe('ImageUploadPreview', () => {
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
-        imageUploads.length - 1,
-      );
-      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+      expect(queryAllByTestId('inactive-upload-progress-indicator')).toHaveLength(1);
       expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      expect(queryAllByText('Not supported')).toHaveLength(1);
       expect(removeImage).toHaveBeenCalledTimes(0);
       expect(uploadImage).toHaveBeenCalledTimes(0);
     });
-
-    rerender(
-      <ThemeProvider>
-        <ImageUploadPreview
-          imageUploads={imageUploads.map((image, index) => ({
-            ...image,
-            id: `${index}`,
-          }))}
-          removeImage={removeImage}
-          uploadImage={uploadImage}
-        />
-      </ThemeProvider>,
-    );
-
-    const snapshot = toJSON();
-
-    await waitFor(() => {
-      expect(snapshot).toMatchSnapshot();
-    });
   });
 });