From d45459b7672f59e2135a8d578a51c18a10d4634b Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 5 Sep 2024 15:38:06 +0200
Subject: [PATCH] test: fix tests rendering message actions

---
 .../Message/__tests__/MessageOptions.test.js  |  49 ++++----
 .../MessageList/VirtualizedMessageList.tsx    |   2 +-
 .../VirtualizedMessageListComponents.test.js  | 108 ++++++++++++++++--
 .../VirtualizedMessageList.test.js.snap       |  11 ++
 ...tualizedMessageListComponents.test.js.snap |  54 +++++++++
 5 files changed, 192 insertions(+), 32 deletions(-)

diff --git a/src/components/Message/__tests__/MessageOptions.test.js b/src/components/Message/__tests__/MessageOptions.test.js
index fb3ce9b8ad..4a6571980c 100644
--- a/src/components/Message/__tests__/MessageOptions.test.js
+++ b/src/components/Message/__tests__/MessageOptions.test.js
@@ -21,6 +21,7 @@ import {
   generateUser,
   getTestClientWithUser,
 } from '../../../mock-builders';
+import { DialogsManagerProvider } from '../../../context';
 
 const MESSAGE_ACTIONS_TEST_ID = 'message-actions';
 
@@ -55,32 +56,34 @@ async function renderMessageOptions({
 
   return render(
     <ChatProvider value={{ client }}>
-      <ChannelStateProvider value={{ channel, ...channelStateOpts }}>
-        <ChannelActionProvider
-          value={{
-            openThread: jest.fn(),
-            removeMessage: jest.fn(),
-            updateMessage: jest.fn(),
-          }}
-        >
-          <ComponentProvider
+      <DialogsManagerProvider id='message-options-dialogs-provider'>
+        <ChannelStateProvider value={{ channel, ...channelStateOpts }}>
+          <ChannelActionProvider
             value={{
-              Attachment,
-              // eslint-disable-next-line react/display-name
-              Message: () => (
-                <MessageSimple
-                  channelConfig={channelConfig}
-                  onReactionListClick={customMessageProps?.onReactionListClick}
-                />
-              ),
+              openThread: jest.fn(),
+              removeMessage: jest.fn(),
+              updateMessage: jest.fn(),
             }}
           >
-            <Message {...defaultMessageProps} {...customMessageProps}>
-              <MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
-            </Message>
-          </ComponentProvider>
-        </ChannelActionProvider>
-      </ChannelStateProvider>
+            <ComponentProvider
+              value={{
+                Attachment,
+                // eslint-disable-next-line react/display-name
+                Message: () => (
+                  <MessageSimple
+                    channelConfig={channelConfig}
+                    onReactionListClick={customMessageProps?.onReactionListClick}
+                  />
+                ),
+              }}
+            >
+              <Message {...defaultMessageProps} {...customMessageProps}>
+                <MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
+              </Message>
+            </ComponentProvider>
+          </ChannelActionProvider>
+        </ChannelStateProvider>
+      </DialogsManagerProvider>
     </ChatProvider>,
   );
 }
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index 89a5566231..1b2b7157ce 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -428,7 +428,7 @@ const VirtualizedMessageListWithContext = <
   return (
     <>
       <MessageListMainPanel>
-        <DialogsManagerProvider>
+        <DialogsManagerProvider id='virtualized-message-list-dialogs-manager'>
           {!threadList && showUnreadMessagesNotification && (
             <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
           )}
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
index 9230ade0ad..b900ecf854 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
@@ -20,6 +20,7 @@ import {
   ChannelStateProvider,
   ChatProvider,
   ComponentProvider,
+  DialogsManagerProvider,
   TranslationProvider,
   useMessageContext,
 } from '../../../context';
@@ -38,7 +39,11 @@ const Wrapper = ({ children, componentContext = {} }) => (
   <ChatProvider value={{ client }}>
     <ChannelStateProvider value={{ channel }}>
       <ChannelActionProvider value={{ addNotification: jest.fn() }}>
-        <ComponentProvider value={componentContext}>{children}</ComponentProvider>
+        <ComponentProvider value={componentContext}>
+          <DialogsManagerProvider id='vml-components-dialogs-manager'>
+            {children}
+          </DialogsManagerProvider>
+        </ComponentProvider>
       </ChannelActionProvider>
     </ChannelStateProvider>
   </ChatProvider>
@@ -84,7 +89,16 @@ describe('VirtualizedMessageComponents', () => {
     const CustomLoadingIndicator = () => <div>Custom Loading Indicator</div>;
     it('should render empty div in Header when not loading more messages', () => {
       const { container } = renderElements(<Header />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
 
     it('should render LoadingIndicator in Header when loading more messages', () => {
@@ -106,6 +120,12 @@ describe('VirtualizedMessageComponents', () => {
               Custom Loading Indicator
             </div>
           </div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
         </div>
       `);
     });
@@ -113,7 +133,16 @@ describe('VirtualizedMessageComponents', () => {
     it('should not render custom LoadingIndicator in Header when not loading more messages', () => {
       const componentContext = { LoadingIndicator: CustomLoadingIndicator };
       const { container } = renderElements(<Header />, componentContext);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
 
     // FIXME: this is a crazy pattern of having to set LoadingIndicator to null so that additionalVirtuosoProps.head can be rendered.
@@ -135,6 +164,12 @@ describe('VirtualizedMessageComponents', () => {
           <div>
             Custom head
           </div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
         </div>
       `);
     });
@@ -142,7 +177,16 @@ describe('VirtualizedMessageComponents', () => {
     it('should not render custom head in Header when not loading more messages', () => {
       const context = { head };
       const { container } = renderElements(<Header context={context} />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
 
     it('should render custom LoadingIndicator instead of head when loading more', () => {
@@ -158,6 +202,12 @@ describe('VirtualizedMessageComponents', () => {
               Custom Loading Indicator
             </div>
           </div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
         </div>
       `);
     });
@@ -176,7 +226,16 @@ describe('VirtualizedMessageComponents', () => {
 
     it('should render empty for thread by default', () => {
       const { container } = renderElements(<EmptyPlaceholder context={{ threadList: true }} />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
     it('should render custom EmptyStateIndicator for main message list', () => {
       const { container } = renderElements(<EmptyPlaceholder />, componentContext);
@@ -194,7 +253,16 @@ describe('VirtualizedMessageComponents', () => {
     it('should render empty if EmptyStateIndicator nullified', () => {
       const componentContext = { EmptyStateIndicator: NullEmptyStateIndicator };
       const { container } = renderElements(<EmptyPlaceholder />, componentContext);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
 
     it('should render empty in thread if EmptyStateIndicator nullified', () => {
@@ -203,14 +271,32 @@ describe('VirtualizedMessageComponents', () => {
         <EmptyPlaceholder context={{ threadList: true }} />,
         componentContext,
       );
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
   });
 
   describe('Footer', () => {
     it('should render nothing in Footer by default', () => {
       const { container } = renderElements(<Footer />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
+        </div>
+      `);
     });
     it('should render custom TypingIndicator in Footer', () => {
       const TypingIndicator = () => <div>Custom TypingIndicator</div>;
@@ -221,6 +307,12 @@ describe('VirtualizedMessageComponents', () => {
           <div>
             Custom TypingIndicator
           </div>
+          <div
+            class="str-chat__dialog-overlay"
+            data-str-chat__portal-id="vml-components-dialogs-manager"
+            data-testid="str-chat__dialog-overlay"
+            style="--str-chat__dialog-overlay-height: 0;"
+          />
         </div>
       `);
     });
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
index 4ea760c01f..052d5d589b 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
@@ -65,6 +65,17 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
         </div>
       </div>
     </div>
+    <div
+      className="str-chat__dialog-overlay"
+      data-str-chat__portal-id="virtualized-message-list-dialogs-manager"
+      data-testid="str-chat__dialog-overlay"
+      onClick={[Function]}
+      style={
+        Object {
+          "--str-chat__dialog-overlay-height": "0",
+        }
+      }
+    />
     <div
       className="str-chat__list-notifications"
     />
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
index 47619c06a3..0ab1b8f655 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
@@ -7,6 +7,12 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render custom Empt
   >
     Custom EmptyStateIndicator
   </div>
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -17,6 +23,12 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render custom Empt
   >
     Custom EmptyStateIndicator
   </div>
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -45,6 +57,12 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
       No chats here yet…
     </p>
   </div>
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -94,6 +112,12 @@ exports[`VirtualizedMessageComponents Header should not render custom head in He
       </svg>
     </div>
   </div>
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -143,6 +167,12 @@ exports[`VirtualizedMessageComponents Header should render LoadingIndicator in H
       </svg>
     </div>
   </div>
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -152,6 +182,12 @@ exports[`VirtualizedMessageComponents Item should render wrapper with custom cla
     class="XXX"
     data-item-index="10000000"
   />
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -161,6 +197,12 @@ exports[`VirtualizedMessageComponents Item should render wrapper with custom cla
     class="XXX"
     data-item-index="10000000"
   />
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -170,6 +212,12 @@ exports[`VirtualizedMessageComponents Item should render wrapper without custom
     class="str-chat__virtual-list-message-wrapper str-chat__li str-chat__li--single"
     data-item-index="10000000"
   />
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;
 
@@ -179,5 +227,11 @@ exports[`VirtualizedMessageComponents Item should render wrapper without custom
     class="str-chat__virtual-list-message-wrapper str-chat__li"
     data-item-index="10000000"
   />
+  <div
+    class="str-chat__dialog-overlay"
+    data-str-chat__portal-id="vml-components-dialogs-manager"
+    data-testid="str-chat__dialog-overlay"
+    style="--str-chat__dialog-overlay-height: 0;"
+  />
 </div>
 `;