Improve tests

Author: tsullivan

packages/eui/src/components/flyout/manager/__mocks__/index.ts

@@ -0,0 +1,95 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { LEVEL_MAIN } from '../const';
+
+/**
+ * Centralized test utilities for flyout manager tests.
+ * Eliminates redundant mock setup and provides single source of truth.
+ */
+
+// Shared mock functions - reused across all mocks
+export const mockCloseFlyout = jest.fn();
+
+export const createMockFunctions = () => ({
+  dispatch: jest.fn(),
+  addFlyout: jest.fn(),
+  closeFlyout: mockCloseFlyout,
+  setActiveFlyout: jest.fn(),
+  setFlyoutWidth: jest.fn(),
+  goBack: jest.fn(),
+  goToFlyout: jest.fn(),
+  getHistoryItems: jest.fn(() => []),
+});
+
+// Shared state object - single source of truth
+export const createMockState = () => ({
+  sessions: [],
+  flyouts: [],
+  layoutMode: 'side-by-side' as const,
+});
+
+/**
+ * Factory for creating flyout manager API mock.
+ * Used consistently across hooks, selectors, and provider mocks.
+ */
+export const createFlyoutManagerMock = () => ({
+  state: createMockState(),
+  ...createMockFunctions(),
+});
+
+/**
+ * Factory for creating flyout manager reducer mock.
+ * Includes additional reducer-specific properties.
+ */
+export const createFlyoutManagerReducerMock = () => ({
+  state: createMockState(),
+  ...createMockFunctions(),
+});
+
+/**
+ * Helper for creating dynamic test state.
+ * Useful for tests that need to simulate state changes.
+ */
+export const createTestState = (
+  overrides: Partial<ReturnType<typeof createMockState>> = {}
+) => ({
+  ...createMockState(),
+  ...overrides,
+});
+
+/**
+ * Helper for creating test session data.
+ */
+export const createTestSession = (
+  main: string,
+  title: string,
+  child: string | null = null
+) => ({
+  main,
+  title,
+  child,
+});
+
+/**
+ * Helper for creating test flyout data.
+ */
+export const createTestFlyout = (
+  flyoutId: string,
+  level: string = LEVEL_MAIN
+) => ({
+  flyoutId,
+  level,
+});
+
+/**
+ * Reset all mocks. Call this in beforeEach.
+ */
+export const resetFlyoutMocks = () => {
+  jest.clearAllMocks();
+};

packages/eui/src/components/flyout/manager/flyout_managed.test.tsx

@@ -46,29 +46,33 @@ jest.mock('../flyout.component', () => {
   };
 });
 
-// Mock hooks that would otherwise depend on ResizeObserver or animation timing
+// Shared mock functions - must be defined in module scope for Jest
 const mockCloseFlyout = jest.fn();
+const createMockState = () => ({
+  sessions: [],
+  flyouts: [],
+  layoutMode: 'side-by-side' as const,
+});
+const createMockFunctions = () => ({
+  dispatch: jest.fn(),
+  addFlyout: jest.fn(),
+  closeFlyout: mockCloseFlyout,
+  setActiveFlyout: jest.fn(),
+  setFlyoutWidth: jest.fn(),
+  goBack: jest.fn(),
+  goToFlyout: jest.fn(),
+  getHistoryItems: jest.fn(() => []),
+});
 
+// Mock hooks that would otherwise depend on ResizeObserver or animation timing
 jest.mock('./hooks', () => ({
   useFlyoutManagerReducer: () => ({
-    state: { sessions: [], flyouts: [], layoutMode: 'side-by-side' },
-    dispatch: jest.fn(),
-    addFlyout: jest.fn(),
-    closeFlyout: mockCloseFlyout,
-    setActiveFlyout: jest.fn(),
-    setFlyoutWidth: jest.fn(),
-    goBack: jest.fn(),
-    goToFlyout: jest.fn(),
-    getHistoryItems: jest.fn(() => []),
+    state: createMockState(),
+    ...createMockFunctions(),
   }),
   useFlyoutManager: () => ({
-    state: { sessions: [], flyouts: [], layoutMode: 'side-by-side' },
-    addFlyout: jest.fn(),
-    closeFlyout: mockCloseFlyout,
-    setFlyoutWidth: jest.fn(),
-    goBack: jest.fn(),
-    goToFlyout: jest.fn(),
-    getHistoryItems: jest.fn(() => []),
+    state: createMockState(),
+    ...createMockFunctions(),
   }),
   useIsFlyoutActive: () => true,
   useHasChildFlyout: () => false,
@@ -104,13 +108,8 @@ jest.mock('./validation', () => ({
 jest.mock('./provider', () => ({
   ...jest.requireActual('./provider'),
   useFlyoutManager: () => ({
-    state: { sessions: [], flyouts: [], layoutMode: 'side-by-side' },
-    addFlyout: jest.fn(),
-    closeFlyout: mockCloseFlyout,
-    setFlyoutWidth: jest.fn(),
-    goBack: jest.fn(),
-    goToFlyout: jest.fn(),
-    getHistoryItems: jest.fn(() => []),
+    state: createMockState(),
+    ...createMockFunctions(),
   }),
 }));
 
@@ -119,6 +118,19 @@ jest.mock('../../observer/resize_observer', () => ({
   useResizeObserver: () => ({ width: 480 }),
 }));
 
+// Import test utilities after mocks
+import {
+  createTestState,
+  createTestSession,
+  createTestFlyout,
+} from './__mocks__';
+
+// Helper functions for tests - these can reference the mock functions defined above
+const createFlyoutManagerMock = () => ({
+  state: createMockState(),
+  ...createMockFunctions(),
+});
+
 describe('EuiManagedFlyout', () => {
   const renderInProvider = (ui: React.ReactElement) =>
     render(<EuiFlyoutManager>{ui}</EuiFlyoutManager>);
@@ -285,7 +297,7 @@ describe('EuiManagedFlyout', () => {
   });
 
   describe('onClose callback behavior', () => {
-    it('calls onClose callback during component cleanup/unmount', () => {
+    it('does not call onClose callback during component cleanup/unmount', () => {
       const onClose = jest.fn();
 
       const { unmount } = renderInProvider(
@@ -305,9 +317,9 @@ describe('EuiManagedFlyout', () => {
         unmount();
       });
 
-      // onClose should be called during cleanup
-      expect(onClose).toHaveBeenCalledTimes(1);
-      expect(onClose).toHaveBeenCalledWith(expect.any(MouseEvent));
+      // onClose should NOT be called during cleanup (intentional design)
+      expect(onClose).not.toHaveBeenCalled();
+      expect(mockCloseFlyout).toHaveBeenCalledWith('cleanup-test');
     });
 
     it('does not call onClose multiple times (double-firing prevention)', () => {

packages/eui/src/components/flyout/manager/flyout_managed.tsx

@@ -126,9 +126,6 @@ export const EuiManagedFlyout = ({
   const isActive = useIsFlyoutActive(flyoutId);
   const currentSession = useCurrentSession();
 
-  // Remove automatic close effect - let user actions control state
-  // This was causing cascading closes in multi-session scenarios
-
   // Stabilize the onClose callback
   const onCloseCallbackRef = useRef<((e?: CloseEvent) => void) | undefined>();
   onCloseCallbackRef.current = (e) => {
@@ -138,7 +135,7 @@ export const EuiManagedFlyout = ({
     }
   };
 
-  // Stabilize the onActive callback to prevent unnecessary re-registrations
+  // Stabilize the onActive callback
   const onActiveCallbackRef = useRef<(() => void) | undefined>();
   onActiveCallbackRef.current = onActiveProp;
 
@@ -205,7 +202,7 @@ export const EuiManagedFlyout = ({
     'width'
   );
 
-  // Pass a wrapper of onClose to Flyout with logging
+  // Pass the stabilized onClose callback to the flyout menu context
   const onClose = (e?: CloseEvent) => {
     onCloseCallbackRef.current?.(e);
   };
@@ -222,8 +219,6 @@ export const EuiManagedFlyout = ({
     level,
   });
 
-  // Log activity stage changes
-
   // Note: history controls are only relevant for main flyouts
   const historyItems = useMemo(() => {
     return level === LEVEL_MAIN ? getHistoryItems() : undefined;