From 5cab9cb63b25790bb70eb66a563074f32dbe2c16 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Thu, 2 Nov 2023 09:49:23 -0700
Subject: [PATCH] [EuiContextMenu] Add RTL test helper (#7335)

---
 .../__snapshots__/context_menu.test.tsx.snap  | 133 ------------------
 .../context_menu/context_menu.test.tsx        |  37 +++--
 src/test/rtl/component_helpers.d.ts           |   2 +
 src/test/rtl/component_helpers.ts             |  26 +++-
 4 files changed, 49 insertions(+), 149 deletions(-)

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
index 52bf1735b16..87edd6a8653 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -28,139 +28,6 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
 </div>
 `;
 
-exports[`EuiContextMenu props panels and initialPanelId navigates back to the previous panel when clicking the title button 1`] = `
-<div
-  class="euiContextMenu emotion-euiContextMenu"
-  style="height: 0px;"
->
-  <div
-    class="euiContextMenuPanel emotion-euiContextMenuPanel-euiContextMenu__panel"
-    tabindex="-1"
-  >
-    <button
-      class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__icon emotion-euiContextMenu__icon"
-        color="inherit"
-        data-euiicon-type="arrowLeft"
-      />
-      <span
-        class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-      >
-        2
-      </span>
-    </button>
-    <div>
-      <div>
-        2
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiContextMenu props panels and initialPanelId navigates back to the previous panel when clicking the title button 2`] = `
-<div
-  class="euiContextMenu emotion-euiContextMenu"
-  style="height: 0px; width: 400px;"
->
-  <div
-    class="euiContextMenuPanel emotion-euiContextMenuPanel-transitioning-out-euiContextMenu__panel"
-    tabindex="-1"
-  >
-    <button
-      class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__icon emotion-euiContextMenu__icon"
-        color="inherit"
-        data-euiicon-type="arrowLeft"
-      />
-      <span
-        class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-      >
-        2
-      </span>
-    </button>
-    <div>
-      <div>
-        2
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiContextMenuPanel emotion-euiContextMenuPanel-transitioning-in-euiContextMenu__panel"
-    tabindex="-1"
-  >
-    <button
-      class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__icon emotion-euiContextMenu__icon"
-        color="inherit"
-        data-euiicon-type="arrowLeft"
-      />
-      <span
-        class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-      >
-        1
-      </span>
-    </button>
-    <div>
-      <button
-        class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
-        type="button"
-      >
-        <span
-          class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-        >
-          2a
-        </span>
-        <span
-          class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
-          data-euiicon-type="arrowRight"
-        />
-      </button>
-      <button
-        class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
-        type="button"
-      >
-        <span
-          class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-        >
-          2b
-        </span>
-        <span
-          class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
-          data-euiicon-type="arrowRight"
-        />
-      </button>
-      <button
-        class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
-        type="button"
-      >
-        <span
-          class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
-        >
-          2c
-        </span>
-        <span
-          class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
-          data-euiicon-type="arrowRight"
-        />
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`EuiContextMenu props panels and initialPanelId renders the referenced panel 1`] = `
 <div
   class="euiContextMenu emotion-euiContextMenu"
diff --git a/src/components/context_menu/context_menu.test.tsx b/src/components/context_menu/context_menu.test.tsx
index b3627cd7fac..7300f3397b6 100644
--- a/src/components/context_menu/context_menu.test.tsx
+++ b/src/components/context_menu/context_menu.test.tsx
@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import { act, fireEvent } from '@testing-library/react';
-import { render } from '../../test/rtl';
+import { fireEvent } from '@testing-library/react';
+import { render, waitForEuiContextMenuPanelTransition } from '../../test/rtl';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test';
 
@@ -64,9 +64,6 @@ const panel0 = {
 
 const panels = [panel0, panel1, panel2, panel3];
 
-export const tick = (ms = 0) =>
-  act(() => new Promise((resolve) => setTimeout(resolve, ms)));
-
 describe('EuiContextMenu', () => {
   shouldRenderCustomStyles(<EuiContextMenu />);
 
@@ -139,26 +136,36 @@ describe('EuiContextMenu', () => {
         expect(container.firstChild).toMatchSnapshot();
       });
 
-      it('navigates back to the previous panel when clicking the title button', async () => {
+      it('navigates to the next panel', async () => {
         const onPanelChange = jest.fn();
-        const { container, getByTestSubject } = render(
+        const { getByText } = render(
           <EuiContextMenu
             panels={panels}
-            initialPanelId={2}
+            initialPanelId={1}
             onPanelChange={onPanelChange}
           />
         );
+        fireEvent.click(getByText('2a'));
+        await waitForEuiContextMenuPanelTransition();
 
-        await tick(20);
-
-        expect(container.firstChild).toMatchSnapshot();
+        expect(onPanelChange).toHaveBeenCalledWith({
+          panelId: 2,
+          direction: 'next',
+        });
+      });
 
-        // Navigate to a different panel.
+      it('navigates back to the previous panel when clicking the title button', async () => {
+        const onPanelChange = jest.fn();
+        const { getByTestSubject } = render(
+          <EuiContextMenu
+            panels={panels}
+            initialPanelId={2}
+            onPanelChange={onPanelChange}
+          />
+        );
         fireEvent.click(getByTestSubject('contextMenuPanelTitleButton'));
+        await waitForEuiContextMenuPanelTransition();
 
-        await tick(20);
-
-        expect(container.firstChild).toMatchSnapshot();
         expect(onPanelChange).toHaveBeenCalledWith({
           panelId: 1,
           direction: 'previous',
diff --git a/src/test/rtl/component_helpers.d.ts b/src/test/rtl/component_helpers.d.ts
index 13dc28dcb6c..1c984f5b14b 100644
--- a/src/test/rtl/component_helpers.d.ts
+++ b/src/test/rtl/component_helpers.d.ts
@@ -10,3 +10,5 @@ export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
 
 export declare const showEuiComboBoxOptions: () => Promise<void>;
+
+export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;
diff --git a/src/test/rtl/component_helpers.ts b/src/test/rtl/component_helpers.ts
index 66611572cd6..4351f43e2a6 100644
--- a/src/test/rtl/component_helpers.ts
+++ b/src/test/rtl/component_helpers.ts
@@ -46,8 +46,9 @@ export const waitForEuiToolTipHidden = async () =>
   });
 
 /**
- * Doot doo
+ * EuiComboBox
  */
+
 export const showEuiComboBoxOptions = async () => {
   fireEvent.click(screen.getByTestSubject('comboBoxToggleListButton'));
   await waitForEuiPopoverOpen();
@@ -55,3 +56,26 @@ export const showEuiComboBoxOptions = async () => {
     expect(screen.getByRole('listbox')).toBeInTheDocument();
   });
 };
+
+/**
+ * EuiContextMenu
+ */
+
+export const waitForEuiContextMenuPanelTransition = async () => {
+  // Used document instead of container or screen due to context menus living in portals
+  const getPanels = () => document.querySelectorAll('.euiContextMenuPanel');
+
+  // 2 panels will appear for the transition animation
+  await waitFor(() => {
+    expect(getPanels().length).toEqual(2);
+  });
+
+  // Outgoing panel will be removed on animation end
+  fireEvent.animationEnd(getPanels()[0]);
+  if (getPanels().length > 1) {
+    fireEvent.animationEnd(getPanels()[1]);
+  }
+
+  // Transition/animation is done once we're back to 1 panel
+  expect(getPanels().length).toEqual(1);
+};