stream-chat-react-native-core 4.11.1-beta.4 → 4.12.0-beta.3

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

@@ -0,0 +1,190 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act, ReactTestInstance } from 'react-test-renderer';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { Chat } from '../../../components/Chat/Chat';
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    deleteFile: jest.fn(),
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    saveFile: jest.fn(),
+    shareImage: jest.fn(),
+    Video: View,
+  };
+});
+
+describe('ImageGalleryFooter', () => {
+  it('render image gallery footer component with custom component footer props', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const CustomFooterLeftElement = () => (
+      <View>
+        <Text>Left element</Text>
+      </View>
+    );
+
+    const CustomFooterRightElement = () => (
+      <View>
+        <Text>Right element</Text>
+      </View>
+    );
+
+    const CustomFooterCenterElement = () => (
+      <View>
+        <Text>Center element</Text>
+      </View>
+    );
+
+    const CustomFooterVideoControlElement = () => (
+      <View>
+        <Text>Video Control element</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      <OverlayProvider>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateVideoAttachment({ type: 'video' })],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery
+              imageGalleryCustomComponents={
+                {
+                  footer: {
+                    centerElement: CustomFooterCenterElement,
+                    leftElement: CustomFooterLeftElement,
+                    rightElement: CustomFooterRightElement,
+                    videoControlElement: CustomFooterVideoControlElement,
+                  },
+                } as ImageGalleryCustomComponents['imageGalleryCustomComponents']
+              }
+              overlayOpacity={{ value: 1 } as SharedValue<number>}
+            />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayProvider>,
+    );
+    expect(queryAllByText('Left element')).toHaveLength(1);
+    expect(queryAllByText('Right element')).toHaveLength(1);
+    expect(queryAllByText('Center element')).toHaveLength(1);
+    expect(queryAllByText('Video Control element')).toHaveLength(1);
+  });
+
+  it('render image gallery footer component with custom component footer Grid Icon and Share Icon component', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const CustomShareIconElement = () => (
+      <View>
+        <Text>Share Icon element</Text>
+      </View>
+    );
+
+    const CustomGridIconElement = () => (
+      <View>
+        <Text>Grid Icon element</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      <OverlayProvider>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateVideoAttachment({ type: 'video' })],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery
+              imageGalleryCustomComponents={
+                {
+                  footer: {
+                    GridIcon: <CustomGridIconElement />,
+                    ShareIcon: <CustomShareIconElement />,
+                  },
+                } as ImageGalleryCustomComponents['imageGalleryCustomComponents']
+              }
+              overlayOpacity={{ value: 1 } as SharedValue<number>}
+            />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayProvider>,
+    );
+    expect(queryAllByText('Share Icon element')).toHaveLength(1);
+    expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+  });
+
+  it('should trigger the share button onPress Handler', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    const saveFileMock = jest.spyOn(NativeUtils, 'saveFile');
+    const shareImageMock = jest.spyOn(NativeUtils, 'shareImage');
+    const deleteFileMock = jest.spyOn(NativeUtils, 'deleteFile');
+
+    const { queryByA11yLabel } = render(
+      <OverlayProvider>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateImageAttachment()],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery overlayOpacity={{ value: 1 } as SharedValue<number>} />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      fireEvent(queryByA11yLabel('Share Button') as ReactTestInstance, 'onPress');
+    });
+
+    await waitFor(() => {
+      expect(saveFileMock).toHaveBeenCalled();
+      expect(shareImageMock).toHaveBeenCalled();
+      expect(deleteFileMock).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../../contexts/translationContext/TranslationContext';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { ImageGrid, ImageGridType } from '../components/ImageGrid';
+
+jest.mock('@gorhom/bottom-sheet', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  const FlatList = require('react-native/Libraries/Lists/FlatList');
+  return {
+    BottomSheetFlatList: FlatList,
+    TouchableOpacity: View,
+  };
+});
+
+const getComponent = (props: Partial<ImageGridType> = {}) => {
+  const t = jest.fn((key) => key);
+
+  return (
+    <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
+      <ThemeProvider style={defaultTheme}>
+        <ImageGrid {...(props as unknown as ImageGridType)} />
+      </ThemeProvider>
+    </TranslationProvider>
+  );
+};
+
+describe('ImageGalleryOverlay', () => {
+  it('should render ImageGalleryGrid', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({ photos: [generateImageAttachment(), generateImageAttachment()] }),
+    );
+
+    expect(queryAllByA11yLabel('Image Grid')).toHaveLength(1);
+  });
+
+  it('should render ImageGalleryGrid individual images', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({
+        photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
+      }),
+    );
+
+    expect(queryAllByA11yLabel('Grid Image')).toHaveLength(2);
+  });
+
+  it('should render ImageGalleryGrid with custom image component', () => {
+    const CustomImageComponent = () => (
+      <View>
+        <Text>Image Attachment</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      getComponent({
+        imageComponent: CustomImageComponent,
+        photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
+      }),
+    );
+
+    expect(queryAllByText('Image Attachment')).toHaveLength(2);
+  });
+
+  it('should trigger the selectAndClose when the Image item is pressed', () => {
+    const closeGridViewMock = jest.fn();
+    const setImageMock = jest.fn();
+
+    const { getAllByA11yLabel } = render(
+      getComponent({
+        closeGridView: closeGridViewMock,
+        photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
+        setImage: setImageMock,
+      }),
+    );
+
+    const component = getAllByA11yLabel('Grid Image');
+
+    act(() => {
+      fireEvent(component[0], 'onPress');
+    });
+
+    expect(closeGridViewMock).toHaveBeenCalledTimes(1);
+    expect(setImageMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../../contexts/translationContext/TranslationContext';
+import {
+  ImageGalleryGridHandleCustomComponentProps,
+  ImageGridHandle,
+} from '../components/ImageGridHandle';
+
+type ImageGridHandleProps = ImageGalleryGridHandleCustomComponentProps & {
+  closeGridView: () => void;
+};
+
+jest.mock('@gorhom/bottom-sheet', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    TouchableOpacity: View,
+  };
+});
+
+const getComponent = (props: Partial<ImageGridHandleProps> = {}) => {
+  const t = jest.fn((key) => key);
+
+  return (
+    <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
+      <ThemeProvider style={defaultTheme}>
+        <ImageGridHandle {...(props as unknown as ImageGridHandleProps)} />
+      </ThemeProvider>
+    </TranslationProvider>
+  );
+};
+
+describe('ImageGalleryOverlay', () => {
+  it('should render ImageGalleryGridHandle', () => {
+    const { queryAllByA11yLabel } = render(getComponent());
+
+    expect(queryAllByA11yLabel('Image Grid Handle')).toHaveLength(1);
+  });
+
+  it('should render the custom components', () => {
+    const CustomLeftComponent = () => (
+      <View>
+        <Text>Left Element</Text>
+      </View>
+    );
+
+    const CustomRightComponent = () => (
+      <View>
+        <Text>Right Element</Text>
+      </View>
+    );
+
+    const CustomCenterComponent = () => (
+      <View>
+        <Text>Center Element</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      getComponent({
+        centerComponent: CustomCenterComponent,
+        leftComponent: CustomLeftComponent,
+        rightComponent: CustomRightComponent,
+      }),
+    );
+
+    expect(queryAllByText('Left Element')).toHaveLength(1);
+    expect(queryAllByText('Right Element')).toHaveLength(1);
+    expect(queryAllByText('Center Element')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,172 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act, ReactTestInstance } from 'react-test-renderer';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { Chat } from '../../../components/Chat/Chat';
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import {
+  OverlayContext,
+  OverlayContextValue,
+} from '../../../contexts/overlayContext/OverlayContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Video: View,
+  };
+});
+
+describe('ImageGalleryHeader', () => {
+  it('render image gallery header component with custom component header props', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const CustomHeaderLeftElement = () => (
+      <View>
+        <Text>Left element</Text>
+      </View>
+    );
+
+    const CustomHeaderRightElement = () => (
+      <View>
+        <Text>Right element</Text>
+      </View>
+    );
+
+    const CustomHeaderCenterElement = () => (
+      <View>
+        <Text>Center element</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      <OverlayProvider>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateImageAttachment()],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery
+              imageGalleryCustomComponents={
+                {
+                  header: {
+                    centerElement: CustomHeaderCenterElement,
+                    leftElement: CustomHeaderLeftElement,
+                    rightElement: CustomHeaderRightElement,
+                  },
+                } as ImageGalleryCustomComponents['imageGalleryCustomComponents']
+              }
+              overlayOpacity={{ value: 1 } as SharedValue<number>}
+            />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayProvider>,
+    );
+    expect(queryAllByText('Left element')).toHaveLength(1);
+    expect(queryAllByText('Right element')).toHaveLength(1);
+    expect(queryAllByText('Center element')).toHaveLength(1);
+  });
+
+  it('render image gallery header component with custom Close Icon component', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const CustomCloseIconElement = () => (
+      <View>
+        <Text>Close Icon element</Text>
+      </View>
+    );
+
+    const { queryAllByText } = render(
+      <OverlayProvider>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateVideoAttachment({ type: 'video' })],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery
+              imageGalleryCustomComponents={
+                {
+                  header: {
+                    CloseIcon: <CustomCloseIconElement />,
+                  },
+                } as ImageGalleryCustomComponents['imageGalleryCustomComponents']
+              }
+              overlayOpacity={{ value: 1 } as SharedValue<number>}
+            />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayProvider>,
+    );
+    expect(queryAllByText('Close Icon element')).toHaveLength(1);
+  });
+
+  it('should trigger the hideOverlay function on button onPress', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    const setOverlayMock = jest.fn();
+
+    const { queryByA11yLabel } = render(
+      <OverlayContext.Provider
+        value={{ setOverlay: setOverlayMock } as unknown as OverlayContextValue}
+      >
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateImageAttachment()],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGallery overlayOpacity={{ value: 1 } as SharedValue<number>} />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayContext.Provider>,
+    );
+
+    act(() => {
+      fireEvent(queryByA11yLabel('Hide Overlay') as ReactTestInstance, 'onPress');
+    });
+
+    await waitFor(() => {
+      expect(setOverlayMock).toHaveBeenCalledWith('none');
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { State } from 'react-native-gesture-handler';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { Chat } from '../../../components/Chat/Chat';
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import {
+  OverlayContext,
+  OverlayContextValue,
+} from '../../../contexts/overlayContext/OverlayContext';
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
+
+describe('ImageGalleryOverlay', () => {
+  jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(() => true);
+
+  it('should have currentBottomSheetIndex as a prop', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    const setOverlayMock = jest.fn();
+
+    const { queryByTestId } = render(
+      <OverlayContext.Provider
+        value={{ setOverlay: setOverlayMock } as unknown as OverlayContextValue}
+      >
+        <ImageGalleryContext.Provider
+          value={
+            {
+              images: [
+                generateMessage({
+                  attachments: [generateImageAttachment()],
+                }),
+              ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <Chat client={chatClient}>
+            <ImageGalleryOverlay
+              animatedBottomSheetIndex={{ value: 1 } as SharedValue<number>}
+              closeGridView={jest.fn()}
+              currentBottomSheetIndex={1}
+            />
+          </Chat>
+        </ImageGalleryContext.Provider>
+      </OverlayContext.Provider>,
+    );
+
+    await waitFor(() => {
+      const view = queryByTestId('image-gallery-overlay');
+      expect(view).not.toBeUndefined();
+    });
+  });
+
+  it('should trigger tapEvent on handler state change', async () => {
+    const closeGridViewMock = jest.fn();
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const { getByTestId } = render(
+      <Chat client={chatClient}>
+        <ImageGalleryOverlay
+          animatedBottomSheetIndex={{ value: 1 } as SharedValue<number>}
+          closeGridView={closeGridViewMock}
+          currentBottomSheetIndex={1}
+        />
+      </Chat>,
+    );
+
+    const view = getByTestId('image-gallery-overlay');
+
+    act(() => {
+      fireEvent(view, 'onHandlerStateChange', {
+        nativeEvent: {
+          state: State.END,
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(closeGridViewMock).toHaveBeenCalled();
+    });
+  });
+});