fix: broken tets

Author: khushal87

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -39,15 +39,22 @@ jest.mock('../../../native.ts', () => {
 });
 
 const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessage }) => {
-  const initialImageGalleryStateStore = new ImageGalleryStateStore();
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
+
+  useEffect(() => {
+    const unsubscribe = imageGalleryStateStore.registerSubscriptions();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [imageGalleryStateStore]);
+
   const { attachments } = props.message;
-  initialImageGalleryStateStore.openImageGallery({
-    message: props.message,
+  imageGalleryStateStore.openImageGallery({
+    messages: [props.message],
     selectedAttachmentUrl: attachments?.[0]?.asset_url || attachments?.[0]?.image_url || '',
   });
 
-  const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
-
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
       <ImageGalleryContext.Provider

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Text, View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
@@ -38,17 +38,26 @@ jest.mock('../../../native.ts', () => {
 });
 
 const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
-  const initialImageGalleryStateStore = new ImageGalleryStateStore();
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
+
+  useEffect(() => {
+    const unsubscribe = imageGalleryStateStore.registerSubscriptions();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [imageGalleryStateStore]);
+
   const attachment = generateVideoAttachment({ type: 'video' });
-  initialImageGalleryStateStore.openImageGallery({
-    message: generateMessage({
-      attachments: [attachment],
-    }) as unknown as LocalMessage,
-    selectedAttachmentUrl: attachment.url,
+  imageGalleryStateStore.openImageGallery({
+    messages: [
+      generateMessage({
+        attachments: [attachment],
+      }) as unknown as LocalMessage,
+    ],
+    selectedAttachmentUrl: attachment.asset_url,
   });
 
-  const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
-
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
       <ImageGalleryContext.Provider
@@ -65,16 +74,25 @@ const ImageGalleryComponentImage = (
     attachment: Attachment;
   },
 ) => {
-  const initialImageGalleryStateStore = new ImageGalleryStateStore();
-  initialImageGalleryStateStore.openImageGallery({
-    message: generateMessage({
-      attachments: [props.attachment],
-    }) as unknown as LocalMessage,
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
+
+  useEffect(() => {
+    const unsubscribe = imageGalleryStateStore.registerSubscriptions();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [imageGalleryStateStore]);
+
+  imageGalleryStateStore.openImageGallery({
+    messages: [
+      generateMessage({
+        attachments: [props.attachment],
+      }) as unknown as LocalMessage,
+    ],
     selectedAttachmentUrl: props.attachment.image_url as string,
   });
 
-  const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
-
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
       <ImageGalleryContext.Provider

package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Text, View } from 'react-native';
 
@@ -7,7 +7,6 @@ import { SharedValue } from 'react-native-reanimated';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { LocalMessage } from '../../../../../../stream-chat-js/dist/types/types';
-import * as imageGalleryContext from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -21,20 +20,23 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store';
 import { ImageGrid, ImageGridType } from '../components/ImageGrid';
 
-const imageGalleryStoreSetup = (message: LocalMessage) => {
-  const initialImageGalleryStateStore = new ImageGalleryStateStore();
-  initialImageGalleryStateStore.openImageGallery({
-    message,
+const ImageGalleryGridComponent = (props: Partial<ImageGridType> & { message: LocalMessage }) => {
+  const { message } = props;
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
+
+  useEffect(() => {
+    const unsubscribe = imageGalleryStateStore.registerSubscriptions();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [imageGalleryStateStore]);
+
+  imageGalleryStateStore.openImageGallery({
+    messages: [message],
     selectedAttachmentUrl:
       message.attachments?.[0]?.asset_url || message.attachments?.[0]?.image_url || '',
   });
-  return initialImageGalleryStateStore;
-};
-
-const ImageGalleryGridComponent = (props: Partial<ImageGridType> & { message: LocalMessage }) => {
-  const initialImageGalleryStateStore = imageGalleryStoreSetup(props.message);
-
-  const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
@@ -52,11 +54,6 @@ describe('ImageGalleryOverlay', () => {
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateImageAttachment()],
     }) as unknown as LocalMessage;
-    const stateStore = imageGalleryStoreSetup(message);
-
-    jest.spyOn(imageGalleryContext, 'useImageGalleryContext').mockReturnValue({
-      imageGalleryStateStore: stateStore,
-    } as unknown as ImageGalleryContextValue);
 
     render(<ImageGalleryGridComponent message={message} />);
 
@@ -67,11 +64,6 @@ describe('ImageGalleryOverlay', () => {
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
     }) as unknown as LocalMessage;
-    const stateStore = imageGalleryStoreSetup(message);
-
-    jest.spyOn(imageGalleryContext, 'useImageGalleryContext').mockReturnValue({
-      imageGalleryStateStore: stateStore,
-    } as unknown as ImageGalleryContextValue);
 
     render(<ImageGalleryGridComponent message={message} />);
 
@@ -89,12 +81,6 @@ describe('ImageGalleryOverlay', () => {
       attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
     }) as unknown as LocalMessage;
 
-    const stateStore = imageGalleryStoreSetup(message);
-
-    jest.spyOn(imageGalleryContext, 'useImageGalleryContext').mockReturnValue({
-      imageGalleryStateStore: stateStore,
-    } as unknown as ImageGalleryContextValue);
-
     render(<ImageGalleryGridComponent imageComponent={CustomImageComponent} message={message} />);
 
     expect(screen.queryAllByText('Image Attachment')).toHaveLength(2);
@@ -106,11 +92,6 @@ describe('ImageGalleryOverlay', () => {
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
     }) as unknown as LocalMessage;
-    const stateStore = imageGalleryStoreSetup(message);
-
-    jest.spyOn(imageGalleryContext, 'useImageGalleryContext').mockReturnValue({
-      imageGalleryStateStore: stateStore,
-    } as unknown as ImageGalleryContextValue);
 
     render(<ImageGalleryGridComponent closeGridView={closeGridViewMock} message={message} />);
 

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Text, View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
@@ -33,16 +33,20 @@ jest.mock('../../../native.ts', () => {
 });
 
 const ImageGalleryComponent = (props: ImageGalleryProps) => {
-  const initialImageGalleryStateStore = new ImageGalleryStateStore();
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
   const attachment = generateImageAttachment();
-  initialImageGalleryStateStore.openImageGallery({
-    message: generateMessage({
-      attachments: [attachment],
-    }) as unknown as LocalMessage,
+  imageGalleryStateStore.openImageGallery({
+    messages: [generateMessage({ attachments: [attachment] }) as unknown as LocalMessage],
     selectedAttachmentUrl: attachment.url,
   });
 
-  const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
+  useEffect(() => {
+    const unsubscribe = imageGalleryStateStore.registerSubscriptions();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [imageGalleryStateStore]);
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>