tests: add tests

Author: khushal87

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -40,23 +40,27 @@ export type AttachmentPickerProps = Pick<
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
-   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
+   * **Default**
+   * [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
    */
   AttachmentPickerError: React.ComponentType<AttachmentPickerErrorProps>;
   /**
    * Custom UI component to render error image for attachment picker
    *
-   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
+   * **Default**
+   * [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
    */
   AttachmentPickerErrorImage: React.ComponentType;
   /**
    * Custom UI Component to render select more photos for selected gallery access in iOS.
    */
   AttachmentPickerIOSSelectMorePhotos: React.ComponentType;
   /**
-   * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
+   * Custom UI component to render overlay component, that shows up on top of [selected
+   * image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
    *
-   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
+   * **Default**
+   * [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
   attachmentPickerErrorButtonText?: string;
@@ -157,7 +161,8 @@ export const AttachmentPicker = React.forwardRef(
       if (!NativeHandlers.oniOS14GalleryLibrarySelectionChange) {
         return;
       }
-      // ios 14 library selection change event is fired when user reselects the images that are permitted to be readable by the app
+      // ios 14 library selection change event is fired when user reselects the images that are permitted to be
+      // readable by the app
       const { unsubscribe } = NativeHandlers.oniOS14GalleryLibrarySelectionChange(() => {
         // we reset the cursor and has next page to true to facilitate fetching of the first page of photos again
         hasNextPageRef.current = true;
@@ -232,7 +237,8 @@ export const AttachmentPicker = React.forwardRef(
         !loadingPhotos
       ) {
         getMorePhotos();
-        // we do this only once on open for avoiding to request permissions in rationale dialog again and again on Android
+        // we do this only once on open for avoiding to request permissions in rationale dialog again and again on
+        // Android
         attemptedToLoadPhotosOnOpenRef.current = true;
       }
     }, [currentIndex, selectedPicker, getMorePhotos, loadingPhotos]);
@@ -301,6 +307,7 @@ export const AttachmentPicker = React.forwardRef(
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={photoError ? undefined : getMorePhotos}
             renderItem={renderAttachmentPickerItem}
+            testID={'attachment-picker-list'}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (

package/src/components/Channel/hooks/useCreateOwnCapabilitiesContext.ts

@@ -22,7 +22,7 @@ export const useCreateOwnCapabilitiesContext = ({
     ? JSON.stringify(Object.values(overrideCapabilities))
     : null;
 
-  // Effect to watch for changes in channel.data?.own_capabilities and update the own_capabilties state accordingly.
+  // Effect to watch for changes in channel.data?.own_capabilities and update the own_capabilities state accordingly.
   useEffect(() => {
     setOwnCapabilites(JSON.stringify(channel.data?.own_capabilities as Array<string>));
   }, [channel.data?.own_capabilities]);

package/src/components/MessageInput/AttachButton.tsx

@@ -5,14 +5,14 @@ import { Pressable } from 'react-native';
 import { NativeAttachmentPicker } from './components/NativeAttachmentPicker';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
-import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
 import { isImageMediaLibraryAvailable } from '../../native';
 
-type AttachButtonPropsWithContext = Pick<ChannelContextValue, 'disabled'> & {
+type AttachButtonPropsWithContext = {
+  disabled?: boolean;
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
   selectedPicker?: 'images';
@@ -21,7 +21,7 @@ type AttachButtonPropsWithContext = Pick<ChannelContextValue, 'disabled'> & {
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
   const [showAttachButtonPicker, setShowAttachButtonPicker] = useState<boolean>(false);
   const [attachButtonLayoutRectangle, setAttachButtonLayoutRectangle] = useState<LayoutRectangle>();
-  const { disabled, handleOnPress, selectedPicker } = props;
+  const { disabled = false, handleOnPress, selectedPicker } = props;
   const {
     theme: {
       colors: { accent_blue, grey },
@@ -51,6 +51,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
   };
 
   const onPressHandler = () => {
+    if (disabled) {
+      return;
+    }
     if (handleOnPress) {
       handleOnPress();
       return;
@@ -71,7 +74,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
       <Pressable
         disabled={disabled}
         onLayout={onAttachButtonLayout}
-        onPress={disabled ? () => null : onPressHandler}
+        onPress={onPressHandler}
         style={[attachButton]}
         testID='attach-button'
       >

package/src/components/MessageInput/CommandsButton.tsx

@@ -1,43 +1,24 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import type { GestureResponderEvent, PressableProps } from 'react-native';
-import { Pressable, View } from 'react-native';
-
-import { SearchSourceState, TextComposerState } from 'stream-chat';
+import { Pressable } from 'react-native';
 
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useStateStore } from '../../hooks/useStateStore';
 import { Lightning } from '../../icons/Lightning';
 
 export type CommandsButtonProps = {
-  /** Function that opens commands selector */
+  /** Function that opens commands selector. */
   handleOnPress?: PressableProps['onPress'];
   /**
-   * Determins if the text input has text
+   * Determines if the text input has text
    */
   hasText?: boolean;
 };
 
-const textComposerStateSelector = (state: TextComposerState) => ({
-  suggestions: state.suggestions,
-  text: state.text,
-});
-
-const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
-  items: nextValue.items,
-});
-
 export const CommandsButton = (props: CommandsButtonProps) => {
   const { handleOnPress, hasText } = props;
   const messageComposer = useMessageComposer();
   const { textComposer } = messageComposer;
-  const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
-  const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
-  const trigger = suggestions?.trigger;
-
-  const commandsButtonEnabled = useMemo(() => {
-    return items && items?.length > 0 && trigger === '/';
-  }, [items, trigger]);
 
   const onPressHandler = useCallback(
     async (event: GestureResponderEvent) => {
@@ -59,8 +40,8 @@ export const CommandsButton = (props: CommandsButtonProps) => {
 
   const {
     theme: {
-      colors: { accent_blue, grey },
-      messageInput: { commandsButton, commandsButtonContainer },
+      colors: { grey },
+      messageInput: { commandsButton },
     },
   } = useTheme();
 
@@ -69,11 +50,9 @@ export const CommandsButton = (props: CommandsButtonProps) => {
   }
 
   return (
-    <View style={[commandsButtonContainer]}>
-      <Pressable onPress={onPressHandler} style={[commandsButton]} testID='commands-button'>
-        <Lightning fill={commandsButtonEnabled ? accent_blue : grey} size={32} />
-      </Pressable>
-    </View>
+    <Pressable onPress={onPressHandler} style={[commandsButton]} testID='commands-button'>
+      <Lightning fill={grey} size={32} />
+    </Pressable>
   );
 };
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -61,7 +61,7 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
     return attachments.filter(
       (attachment) =>
         isLocalFileAttachment(attachment) ||
-        isLocalFileAttachment(attachment) ||
+        isLocalAudioAttachment(attachment) ||
         isLocalVoiceRecordingAttachment(attachment) ||
         isLocalVideoAttachment(attachment),
     );
@@ -89,7 +89,8 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploads]);
 
-  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here
+  // and the duration is set.
   const onLoad = useCallback((index: string, duration: number) => {
     setAudioAttachmentsStateMap((prevState) => ({
       ...prevState,
@@ -100,7 +101,8 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
     }));
   }, []);
 
-  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The
+  // progressed duration is set here.
   const onProgress = useCallback((index: string, progress: number) => {
     setAudioAttachmentsStateMap((prevState) => ({
       ...prevState,
@@ -255,6 +257,7 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
       ref={flatListRef}
       renderItem={renderItem}
       style={[styles.flatList, flatList]}
+      testID={'file-upload-preview'}
     />
   );
 };

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -31,9 +31,7 @@ const UnmemoizedImageUploadPreview = (props: ImageUploadPreviewPropsWithContext)
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
 
-  const imageOrVideoUploads = attachments.filter((attachment) =>
-    isLocalImageAttachment(attachment),
-  );
+  const imageUploads = attachments.filter((attachment) => isLocalImageAttachment(attachment));
 
   const {
     theme: {
@@ -60,13 +58,13 @@ const UnmemoizedImageUploadPreview = (props: ImageUploadPreviewPropsWithContext)
     ],
   );
 
-  if (!imageOrVideoUploads.length) {
+  if (!imageUploads.length) {
     return null;
   }
 
   return (
     <FlatList
-      data={imageOrVideoUploads}
+      data={imageUploads}
       getItemLayout={(_, index) => ({
         index,
         length: IMAGE_PREVIEW_SIZE + 8,

package/src/components/MessageInput/InputButtons.tsx

@@ -3,7 +3,11 @@ import { StyleSheet, View } from 'react-native';
 
 import { TextComposerState } from 'stream-chat';
 
-import { AttachmentPickerContextValue, useAttachmentPickerContext } from '../../contexts';
+import {
+  AttachmentPickerContextValue,
+  OwnCapabilitiesContextValue,
+  useAttachmentPickerContext,
+} from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -27,7 +31,8 @@ export type InputButtonsWithContextProps = Pick<
   | 'MoreOptionsButton'
   | 'toggleAttachmentPicker'
 > &
-  Pick<AttachmentPickerContextValue, 'selectedPicker'>;
+  Pick<AttachmentPickerContextValue, 'selectedPicker'> &
+  Pick<OwnCapabilitiesContextValue, 'uploadFile'>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   command: state.command,
@@ -43,6 +48,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
     hasFilePicker,
     hasImagePicker,
     MoreOptionsButton,
+    uploadFile: ownCapabilitiesUploadFile,
   } = props;
   const { textComposer } = useMessageComposer();
   const { command, text } = useStateStore(textComposer.state, textComposerStateSelector);
@@ -67,24 +73,29 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
     setShowMoreOptions(true);
   }, [setShowMoreOptions]);
 
-  const ownCapabilities = useOwnCapabilitiesContext();
+  const hasAttachmentUploadCapabilities =
+    (hasCameraPicker || hasFilePicker || hasImagePicker) && ownCapabilitiesUploadFile;
 
   if (command) {
     return null;
   }
 
-  return !showMoreOptions && (hasCameraPicker || hasImagePicker || hasFilePicker) && hasCommands ? (
+  if (!hasAttachmentUploadCapabilities && !hasCommands) {
+    return null;
+  }
+
+  return !showMoreOptions ? (
     <MoreOptionsButton handleOnPress={handleShowMoreOptions} />
   ) : (
     <>
-      {(hasCameraPicker || hasImagePicker || hasFilePicker) && ownCapabilities.uploadFile && (
+      {hasAttachmentUploadCapabilities ? (
         <View
           style={[hasCommands ? styles.attachButtonContainer : undefined, attachButtonContainer]}
         >
           <AttachButton />
         </View>
-      )}
-      {hasCommands && <CommandsButton hasText={hasText} />}
+      ) : null}
+      {hasCommands ? <CommandsButton hasText={hasText} /> : null}
     </>
   );
 };
@@ -149,6 +160,7 @@ export const InputButtons = (props: InputButtonsProps) => {
     toggleAttachmentPicker,
   } = useMessageInputContext();
   const { selectedPicker } = useAttachmentPickerContext();
+  const { uploadFile } = useOwnCapabilitiesContext();
 
   return (
     <MemoizedInputButtonsWithContext
@@ -162,6 +174,7 @@ export const InputButtons = (props: InputButtonsProps) => {
         MoreOptionsButton,
         selectedPicker,
         toggleAttachmentPicker,
+        uploadFile,
       }}
       {...props}
     />