From ef46f8e1647a95f025d2afec319f64445d3afb80 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Fri, 29 Nov 2024 12:57:21 -0500
Subject: [PATCH] MM-61560 Make it so that Menu.Items can be tested without a
 Menu (#29427)

* MM-61650 Make it so that Menu.Items can be tested without a Menu

* Rename file to stop Jest from complaining
---
 .../core_menu_options.test.tsx                | 23 ++++---------
 .../src/components/menu/menu_context_test.tsx | 32 +++++++++++++++++++
 2 files changed, 39 insertions(+), 16 deletions(-)
 create mode 100644 webapp/channels/src/components/menu/menu_context_test.tsx

diff --git a/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/core_menu_options.test.tsx b/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/core_menu_options.test.tsx
index 3e9f565b0c..2352686a46 100644
--- a/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/core_menu_options.test.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/send_button/send_post_options/core_menu_options.test.tsx
@@ -5,23 +5,12 @@ import {DateTime} from 'luxon';
 import React from 'react';
 
 import useTimePostBoxIndicator from 'components/advanced_text_editor/use_post_box_indicator';
+import {WithTestMenuContext} from 'components/menu/menu_context_test';
 
 import {renderWithContext, fireEvent, screen} from 'tests/react_testing_utils';
 
 import CoreMenuOptions from './core_menu_options';
 
-jest.mock('components/menu', () => ({
-    __esModule: true,
-    Item: jest.fn(({labels, trailingElements, children, ...props}) => (
-        <div {...props}>
-            {labels}
-            {children}
-            {trailingElements}
-        </div>
-    )),
-    Separator: jest.fn(() => <div className='menu-separator'/>),
-}));
-
 jest.mock('components/advanced_text_editor/use_post_box_indicator');
 const mockedUseTimePostBoxIndicator = jest.mocked(useTimePostBoxIndicator);
 
@@ -75,10 +64,12 @@ describe('CoreMenuOptions Component', () => {
 
     function renderComponent(state = initialState, handleOnSelectOverride = handleOnSelect) {
         renderWithContext(
-            <CoreMenuOptions
-                handleOnSelect={handleOnSelectOverride}
-                channelId='channelId'
-            />,
+            <WithTestMenuContext>
+                <CoreMenuOptions
+                    handleOnSelect={handleOnSelectOverride}
+                    channelId='channelId'
+                />
+            </WithTestMenuContext>,
             state,
         );
     }
diff --git a/webapp/channels/src/components/menu/menu_context_test.tsx b/webapp/channels/src/components/menu/menu_context_test.tsx
new file mode 100644
index 0000000000..f0e9021d65
--- /dev/null
+++ b/webapp/channels/src/components/menu/menu_context_test.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect, useState} from 'react';
+
+import {MenuContext, useMenuContextValue} from './menu_context';
+
+type Props = {
+    children: React.ReactNode;
+}
+
+export function WithTestMenuContext({
+    children,
+}: Props) {
+    const [show, setShow] = useState(true);
+    const menuContextValue = useMenuContextValue(() => setShow(false), show);
+
+    useEffect(() => {
+        if (!show) {
+            menuContextValue.handleClosed();
+        }
+
+        // We only want to call this when the menu is closed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [show]);
+
+    return (
+        <MenuContext.Provider value={menuContextValue}>
+            {children}
+        </MenuContext.Provider>
+    );
+}