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

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();
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { act, ReactTestInstance } from 'react-test-renderer';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import type { ImageGalleryFooterVideoControlProps } from '../components/ImageGalleryFooter';
+import { ImageGalleryVideoControl } from '../components/ImageGalleryVideoControl';
+
+dayjs.extend(duration);
+
+const getComponent = (props: Partial<ImageGalleryFooterVideoControlProps>) => (
+  <ThemeProvider theme={defaultTheme}>
+    <ImageGalleryVideoControl {...(props as unknown as ImageGalleryFooterVideoControlProps)} />
+  </ThemeProvider>
+);
+
+describe('ImageGalleryOverlay', () => {
+  it('should trigger the onPlayPause when play/pause button is pressed', async () => {
+    const onPlayPauseMock = jest.fn();
+
+    const { queryByA11yLabel } = render(getComponent({ onPlayPause: onPlayPauseMock }));
+
+    const component = queryByA11yLabel('Play Pause Button') as ReactTestInstance;
+
+    act(() => {
+      fireEvent(component, 'onPress');
+    });
+
+    await waitFor(() => {
+      expect(component).not.toBeUndefined();
+      expect(onPlayPauseMock).toHaveBeenCalled();
+    });
+  });
+
+  it('should render the play icon when paused prop is true', async () => {
+    const { queryByA11yLabel } = render(getComponent({ paused: true }));
+
+    const component = queryByA11yLabel('Play Icon') as ReactTestInstance;
+
+    await waitFor(() => {
+      expect(component).not.toBeUndefined();
+    });
+  });
+
+  it('should calculate the videoDuration and progressDuration when they are greater than or equal to 3600', () => {
+    jest.spyOn(dayjs, 'duration');
+
+    const { queryByA11yLabel } = render(
+      getComponent({
+        duration: 3600,
+        progress: 1,
+      }),
+    );
+
+    const videoDurationComponent = queryByA11yLabel('Video Duration') as ReactTestInstance;
+    const progressDurationComponent = queryByA11yLabel('Progress Duration') as ReactTestInstance;
+
+    expect(videoDurationComponent.children[0]).toBe('01:00:00');
+    expect(progressDurationComponent.children[0]).toBe('01:00:00');
+  });
+
+  it('should calculate the videoDuration and progressDuration when they are less than 3600', () => {
+    jest.spyOn(dayjs, 'duration');
+
+    const { queryByA11yLabel } = render(
+      getComponent({
+        duration: 60,
+        progress: 0.5,
+      }),
+    );
+
+    const videoDurationComponent = queryByA11yLabel('Video Duration') as ReactTestInstance;
+    const progressDurationComponent = queryByA11yLabel('Progress Duration') as ReactTestInstance;
+
+    expect(videoDurationComponent.children[0]).toBe('01:00');
+    expect(progressDurationComponent.children[0]).toBe('00:30');
+  });
+});

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -10,6 +10,7 @@ const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 type Props = {
+  accessibilityLabel: string;
   index: number;
   offsetScale: Animated.SharedValue<number>;
   photo: { uri: string };
@@ -26,6 +27,7 @@ type Props = {
 export const AnimatedGalleryImage: React.FC<Props> = React.memo(
   (props) => {
     const {
+      accessibilityLabel,
       index,
       offsetScale,
       photo,
@@ -83,6 +85,7 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
 
     return (
       <Animated.Image
+        accessibilityLabel={accessibilityLabel}
         resizeMode={'contain'}
         source={{ uri: photo.uri }}
         style={[

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -19,7 +19,7 @@ const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
-type Props = {
+export type AnimatedGalleryVideoType = {
   handleEnd: () => void;
   handleLoad: (payload: VideoPayloadData) => void;
   handleProgress: (data: VideoProgressData) => void;
@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
+export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.memo(
   (props) => {
     const [opacity, setOpacity] = useState<number>(1);
     const {
@@ -154,11 +154,17 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
      * load on memory.
      */
     if (!shouldRender) {
-      return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
+      return (
+        <View
+          accessibilityLabel='Empty View Image Gallery'
+          style={[style, { transform: [{ scale: oneEighth }] }]}
+        />
+      );
     }
 
     return (
       <Animated.View
+        accessibilityLabel='Image Gallery Video'
         style={[
           style,
           animatedViewStyles,
@@ -185,11 +191,13 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
             paused={paused}
             resizeMode='contain'
             style={style}
+            testID='video-player'
             uri={source.uri}
             videoRef={videoRef}
           />
         )}
         <Animated.View
+          accessibilityLabel='Spinner'
           style={[
             styles.activityIndicator,
             {

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

@@ -64,7 +64,7 @@ export type ImageGalleryFooterCustomComponent<
 
 export type ImageGalleryFooterVideoControlProps = {
   duration: number;
-  onPlayPause: () => void;
+  onPlayPause: (status?: boolean) => void;
   onProgressDrag: (progress: number) => void;
   paused: boolean;
   progress: number;
@@ -92,6 +92,7 @@ export type ImageGalleryFooterCustomComponentProps<
 type ImageGalleryFooterPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
+  accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
   onProgressDrag: (progress: number) => void;
@@ -111,6 +112,7 @@ export const ImageGalleryFooterWithContext = <
   props: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
+    accessibilityLabel,
     centerElement,
     duration,
     GridIcon,
@@ -182,6 +184,7 @@ export const ImageGalleryFooterWithContext = <
 
   return (
     <Animated.View
+      accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
@@ -204,7 +207,11 @@ export const ImageGalleryFooterWithContext = <
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (
-            <TouchableOpacity disabled={shareMenuOpen} onPress={share}>
+            <TouchableOpacity
+              accessibilityLabel='Share Button'
+              disabled={shareMenuOpen}
+              onPress={share}
+            >
               <View style={[styles.leftContainer, leftContainer]}>
                 {ShareIcon ? ShareIcon : <ShareIconDefault pathFill={black} />}
               </View>

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

@@ -167,7 +167,7 @@ export const ImageGalleryHeader = <
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
-            <TouchableOpacity onPress={hideOverlay}>
+            <TouchableOpacity accessibilityLabel='Hide Overlay' onPress={hideOverlay}>
               <View style={[styles.leftContainer, leftContainer]}>
                 {CloseIcon ? CloseIcon : <Close />}
               </View>

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

@@ -74,7 +74,12 @@ export const ImageGalleryOverlay: React.FC<Props> = (props) => {
   }
 
   return (
-    <TapGestureHandler maxDeltaX={16} maxDeltaY={16} onHandlerStateChange={tapEvent}>
+    <TapGestureHandler
+      maxDeltaX={16}
+      maxDeltaY={16}
+      onHandlerStateChange={tapEvent}
+      testID='image-gallery-overlay'
+    >
       <Animated.View
         style={[
           StyleSheet.absoluteFillObject,