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

package/src/components/ImageGallery/ImageGallery.tsx

@@ -471,17 +471,21 @@ export const ImageGallery = <
     }
   };
 
-  const handlePlayPause = () => {
-    // React Native Video for RN CLI has seek as an API to move to a particular location in the video
-    if (progress === 1 && videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(0);
-    }
-    // Expo AV for Expo has replayAsync as an API to move to a starting of the video
-    if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-      videoRef.current.replayAsync();
-    }
+  const handlePlayPause = (status?: boolean) => {
+    if (status === undefined) {
+      // React Native Video for RN CLI has seek as an API to move to a particular location in the video
+      if (progress === 1 && videoRef.current && videoRef.current.seek) {
+        videoRef.current.seek(0);
+      }
+      // Expo AV for Expo has replayAsync as an API to move to a starting of the video
+      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
+        videoRef.current.replayAsync();
+      }
 
-    setPaused((state) => !state);
+      setPaused((state) => !state);
+    } else {
+      setPaused(status);
+    }
   };
 
   const onProgressDrag = (progress: number) => {
@@ -497,7 +501,11 @@ export const ImageGallery = <
   };
 
   return (
-    <Animated.View pointerEvents={'auto'} style={[StyleSheet.absoluteFillObject, showScreenStyle]}>
+    <Animated.View
+      accessibilityLabel='Image Gallery'
+      pointerEvents={'auto'}
+      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+    >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <TapGestureHandler
         minPointers={1}
@@ -577,6 +585,7 @@ export const ImageGallery = <
                             />
                           ) : (
                             <AnimatedGalleryImage
+                              accessibilityLabel={'Image Item'}
                               index={i}
                               key={`${photo.uri}-${i}`}
                               offsetScale={offsetScale}
@@ -615,6 +624,7 @@ export const ImageGallery = <
         {...imageGalleryCustomComponents?.header}
       />
       <ImageGalleryFooter<StreamChatGenerics>
+        accessibilityLabel={'Image Gallery Footer'}
         duration={duration}
         onPlayPause={handlePlayPause}
         onProgressDrag={onProgressDrag}

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

@@ -0,0 +1,241 @@
+import React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+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 { AnimatedGalleryVideo, AnimatedGalleryVideoType } from '../components/AnimatedGalleryVideo';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Video: View,
+  };
+});
+
+const getComponent = (props: Partial<AnimatedGalleryVideoType>) => (
+  <ThemeProvider theme={defaultTheme}>
+    <AnimatedGalleryVideo {...(props as unknown as AnimatedGalleryVideoType)} />
+  </ThemeProvider>
+);
+
+describe('ImageGallery', () => {
+  it('render image gallery component with video rendered', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+  });
+
+  it('render empty view when shouldRender is false', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: false,
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    expect(getByA11yLabel('Empty View Image Gallery')).not.toBeUndefined();
+  });
+
+  it('trigger onEnd and onProgress events handlers of Video component', () => {
+    const handleEndMock = jest.fn();
+    const handleProgressMock = jest.fn();
+
+    const { getByTestId } = render(
+      getComponent({
+        handleEnd: handleEndMock,
+        handleProgress: handleProgressMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+
+    act(() => {
+      fireEvent(videoComponent, 'onEnd');
+      fireEvent(videoComponent, 'onProgress');
+    });
+
+    expect(handleEndMock).toHaveBeenCalled();
+    expect(handleProgressMock).toHaveBeenCalled();
+  });
+
+  it('trigger onLoadStart event handler of Video component', () => {
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onLoadStart');
+    });
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+  });
+
+  it('trigger onLoad event handler of Video component', () => {
+    const handleLoadMock = jest.fn();
+
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        handleLoad: handleLoadMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onLoad');
+    });
+
+    expect(handleLoadMock).toHaveBeenCalled();
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+  });
+
+  it('trigger onBuffer event handler of Video component', () => {
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onBuffer', {
+        isBuffering: false,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+
+    act(() => {
+      fireEvent(videoComponent, 'onBuffer', {
+        isBuffering: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+  });
+
+  it('trigger onPlaybackStatusUpdate event handler of Video component', () => {
+    jest.spyOn(console, 'error');
+    const handleLoadMock = jest.fn();
+    const handleProgressMock = jest.fn();
+    const handleEndMock = jest.fn();
+
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        handleEnd: handleEndMock,
+        handleLoad: handleLoadMock,
+        handleProgress: handleProgressMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        error: true,
+        isLoaded: false,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+    expect(console.error).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isLoaded: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+    expect(handleLoadMock).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isLoaded: true,
+        isPlaying: true,
+      });
+    });
+
+    expect(handleProgressMock).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isBuffering: true,
+        isLoaded: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        didJustFinish: true,
+        isLoaded: true,
+        isLooping: false,
+      });
+    });
+
+    expect(handleEndMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,192 @@
+import React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  generateGiphyAttachment,
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import { ImageGallery } 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,
+  };
+});
+
+const getComponent = (props: Partial<ImageGalleryContextValue>) => (
+  <OverlayProvider>
+    <ImageGalleryContext.Provider value={{ ...(props as unknown as ImageGalleryContextValue) }}>
+      <ThemeProvider theme={defaultTheme}>
+        <ImageGallery overlayOpacity={{ value: 1 } as SharedValue<number>} />
+      </ThemeProvider>
+    </ImageGalleryContext.Provider>
+  </OverlayProvider>
+);
+
+describe('ImageGallery', () => {
+  it('render image gallery component', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [
+              generateImageAttachment(),
+              generateGiphyAttachment(),
+              generateVideoAttachment({ type: 'video' }),
+            ],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+    expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
+    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+  });
+
+  it('handle handleLoad function when video item present and payload duration is available', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+    });
+
+    const videoDurationComponent = getByA11yLabel('Video Duration');
+    expect(videoDurationComponent.children[0]).toBe('00:10');
+  });
+
+  it('handle handleLoad function when video item present and payload duration is undefined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: undefined,
+      });
+    });
+
+    const videoDurationComponent = getByA11yLabel('Video Duration');
+    expect(videoDurationComponent.children[0]).toBe('00:00');
+  });
+
+  it('handle handleProgress function when video item present and payload is well defined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleProgress', {
+        currentTime: 3,
+        seekableDuration: 10,
+      });
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+
+    expect(progressDurationComponent.children[0]).toBe('00:03');
+  });
+
+  it('handle handleProgress function when video item present and payload is not defined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleProgress', {
+        currentTime: undefined,
+        seekableDuration: undefined,
+      });
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+
+    expect(progressDurationComponent.children[0]).toBe('00:00');
+  });
+
+  it('handle handleEnd function when video item present', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleEnd');
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+    expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
+    expect(progressDurationComponent.children[0]).toBe('00:10');
+  });
+});

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