test: start making message composition tests work

Author: MartinCupela

examples/vite/src/App.tsx

@@ -21,6 +21,8 @@ import {
   useCreateChatClient,
   VirtualizedMessageList as MessageList,
   Window,
+  SendButtonProps,
+  useMessageComposer,
 } from 'stream-chat-react';
 import { createTextComposerEmojiMiddleware } from 'stream-chat-react/emojis';
 import { init, SearchIndex } from 'emoji-mart';
@@ -47,14 +49,28 @@ const userId = parseUserIdFromToken(userToken);
 const filters: ChannelFilters = {
   members: { $in: [userId] },
   type: 'messaging',
-  archived: false,
+  // archived: false,
 };
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
 // @ts-ignore
 const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 
+const Btn = ({ sendMessage }: SendButtonProps) => {
+  const messageComposer = useMessageComposer();
+  return (
+    <button
+      onClick={(e) => {
+        messageComposer.customDataManager.setData({ a: 'b' });
+        sendMessage(e);
+      }}
+    >
+      Submit
+    </button>
+  );
+};
+
 const App = () => {
   const chatClient = useCreateChatClient({
     apiKey,
@@ -70,9 +86,13 @@ const App = () => {
         middleware: [
           createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware,
         ],
-        position: { before: 'stream-io/mentions-middleware' },
+        position: { before: 'stream-io/text-composer/mentions-middleware' },
         unique: true,
       });
+      composer.attachmentManager.setCustomUploadFn(async (fileLike) => {
+        return composer.attachmentManager.doDefaultUploadRequest(fileLike);
+      });
+      // composer.customDataManager =
     });
   }, [chatClient]);
 
@@ -91,7 +111,7 @@ const App = () => {
             showChannelSearch
             additionalChannelSearchProps={{ searchForChannels: true }}
           />
-          <Channel emojiSearchIndex={SearchIndex}>
+          <Channel emojiSearchIndex={SearchIndex} SendButton={Btn}>
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />

jest.env.setup.js

@@ -11,3 +11,38 @@ Object.defineProperty(globalThis, 'crypto', {
     },
   },
 });
+
+// Mock proper File API behavior
+if (typeof File === 'undefined') {
+  class File extends Blob {
+    constructor(bits, name, options = {}) {
+      super(bits, options);
+      this.name = name;
+      this.lastModified = options.lastModified || Date.now();
+    }
+  }
+  global.File = File;
+}
+
+// Ensure FileReader is available
+if (typeof FileReader === 'undefined') {
+  class FileReader {
+    readAsDataURL(blob) {
+      const result = `data:${blob.type};base64,${Buffer.from(blob).toString('base64')}`;
+      setTimeout(() => {
+        this.result = result;
+        this.onload?.();
+      }, 0);
+    }
+  }
+  global.FileReader = FileReader;
+}
+
+// Mock URL.createObjectURL
+if (typeof URL.createObjectURL === 'undefined') {
+  URL.createObjectURL = (file) => `blob:${file.name}`;
+}
+// Mock URL.createObjectURL
+if (typeof URL.revokeObjectURL === 'undefined') {
+  URL.revokeObjectURL = () => null;
+}

src/components/Message/MessageSimple.tsx

@@ -45,7 +45,7 @@ const EditMessageModal = ({
   additionalMessageInputProps,
 }: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => {
   const { EditMessageInput = DefaultEditMessageForm } = useComponentContext();
-  const { clearEditingState, message } = useMessageContext();
+  const { clearEditingState } = useMessageContext();
   const messageComposer = useMessageComposer();
   const onEditModalClose = useCallback(() => {
     clearEditingState();
@@ -63,7 +63,6 @@ const EditMessageModal = ({
         grow
         hideSendButton
         Input={EditMessageInput}
-        message={message}
         {...additionalMessageInputProps}
       />
     </Modal>

src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx

@@ -47,7 +47,7 @@ export const FileAttachmentPreview = ({
         <CloseIcon />
       </button>
 
-      {uploadState === 'failed' && !!handleRetry && (
+      {['blocked', 'failed'].includes(uploadState) && !!handleRetry && (
         <button
           className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
           data-testid='file-preview-item-retry-button'

src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx

@@ -40,7 +40,7 @@ export const ImageAttachmentPreview = ({
         <CloseIcon />
       </button>
 
-      {uploadState === 'failed' && (
+      {['blocked', 'failed'].includes(uploadState) && (
         <button
           className='str-chat__attachment-preview-error str-chat__attachment-preview-error-image'
           data-testid='image-preview-item-retry-button'

src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx

@@ -44,7 +44,7 @@ export const UnsupportedAttachmentPreview = ({
       </button>
 
       {isLocalUploadAttachment(attachment) &&
-        attachment.localMetadata?.uploadState === 'failed' &&
+        ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
         !!handleRetry && (
           <button
             className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'

src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx

@@ -44,15 +44,16 @@ export const VoiceRecordingPreview = ({
         <CloseIcon />
       </button>
 
-      {attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (
-        <button
-          className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
-          data-testid='file-preview-item-retry-button'
-          onClick={() => handleRetry(attachment)}
-        >
-          <RetryIcon />
-        </button>
-      )}
+      {['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
+        !!handleRetry && (
+          <button
+            className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
+            data-testid='file-preview-item-retry-button'
+            onClick={() => handleRetry(attachment)}
+          >
+            <RetryIcon />
+          </button>
+        )}
 
       <div className='str-chat__attachment-preview-metadata'>
         <div className='str-chat__attachment-preview-file-name' title={attachment.title}>

src/components/MessageInput/AttachmentSelector.tsx

@@ -99,7 +99,7 @@ export const DefaultAttachmentSelectorComponents = {
     return (
       <DialogMenuButton
         className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button'
-        disabled={!isUploadEnabled} // todo: add styles
+        disabled={!isUploadEnabled} // todo: add styles for disabled state
         onClick={() => {
           if (fileInput) fileInput.click();
           closeMenu();

src/components/MessageInput/EditMessageForm.tsx

@@ -2,11 +2,11 @@ import React, { useCallback, useEffect } from 'react';
 import { MessageInputFlat } from './MessageInputFlat';
 
 import { useMessageInputContext, useTranslationContext } from '../../context';
-import { useComposerHasSendableData, useMessageComposer } from './hooks';
+import { useMessageComposer, useMessageComposerHasSendableData } from './hooks';
 
 const EditMessageFormSendButton = () => {
-  const { t } = useTranslationContext('EditMessageForm');
-  const hasSendableData = useComposerHasSendableData();
+  const { t } = useTranslationContext();
+  const hasSendableData = useMessageComposerHasSendableData();
   return (
     <button
       className='str-chat__edit-message-send'

src/components/MessageInput/MessageInput.tsx

@@ -1,6 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { useEffect } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { MessageInputFlat } from './MessageInputFlat';
 import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
@@ -14,18 +13,18 @@ import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 
 import type {
-  BaseLocalAttachmentMetadata,
   Channel,
   LinkPreviewsManagerConfig,
   LocalAttachmentUploadMetadata,
   LocalMessage,
+  Message,
   SendFileAPIResponse,
+  SendMessageOptions,
 } from 'stream-chat';
 
 import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
 
-// todo: move to a relevant place
 export type EmojiSearchIndexResult = {
   id: string;
   name: string;
@@ -70,13 +69,6 @@ export type MessageInputProps = {
   ) => Promise<SendFileAPIResponse>;
   /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
-  // todo: document how to subscribe to notifications to handle errors
-  /** Custom error handler function to be called with a file/image upload fails */
-  errorHandler?: (
-    error: Error,
-    type: string,
-    file: LocalAttachmentUploadMetadata['file'] & BaseLocalAttachmentMetadata,
-  ) => void;
   /** If true, focuses the text input on component mount */
   focus?: boolean;
   /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */
@@ -95,15 +87,21 @@ export type MessageInputProps = {
   mentionAllAppUsers?: boolean;
   /** Object containing filters/sort/options overrides for an @mention user query */
   mentionQueryParams?: SearchQueryParams['userFilters'];
-  /** If provided, the existing message will be edited on submit */
-  message?: LocalMessage;
   /** Min number of rows the underlying `textarea` will start with. The `grow` on MessageInput prop has to be enabled for `minRows` to take effect. */
   minRows?: number;
+  /** Function to override the default message sending process. Not message updating process. */
+  overrideSubmitHandler?: (params: {
+    cid: string;
+    localMessage: LocalMessage;
+    message: Message;
+    sendOptions: SendMessageOptions;
+  }) => Promise<void> | void;
   /** When replying in a thread, the parent message object */
   parent?: LocalMessage;
+  // todo: X document change in configuration
   /** If true, triggers typing events on text input keystroke */
   publishTypingEvent?: boolean;
-  // todo: document the change of transliterate prop
+  // todo: X document the change of transliterate prop
   /** If true, will use an optional dependency to support transliteration in the input for mentions, default is false. See: https://github.com/getstream/transliterate */
   /**
    * Currently, `Enter` is the default submission key and  `Shift`+`Enter` is the default combination for the new line.
@@ -125,6 +123,7 @@ const MessageInputProvider = (props: PropsWithChildren<MessageInputProps>) => {
   const messageInputState = useMessageInputState(props);
   const { emojiSearchIndex } = useComponentContext('MessageInput');
 
+  // todo: X document how to disable publishTypingEvents
   // if (typeof props.publishTypingEvent !== 'undefined') {
   //   messageComposer.config.publishTypingEvents = props.publishTypingEvent;
   // }