fix: enforce no nesting, adjsut enzyme test and move setup to testing-library

Author: gagik

configs/testing-library-compass/src/index.tsx

@@ -45,7 +45,10 @@ import {
   ReadOnlyPreferenceAccess,
 } from 'compass-preferences-model/provider';
 import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
-import { CompassComponentsProvider } from '@mongodb-js/compass-components';
+import {
+  CompassComponentsProvider,
+  ContextMenuProvider,
+} from '@mongodb-js/compass-components';
 import {
   TestEnvCurrentConnectionContext,
   ConnectionInfoProvider,
@@ -349,41 +352,43 @@ function createWrapper(
             <PreferencesProvider value={wrapperState.preferences}>
               <LoggerProvider value={logger}>
                 <TelemetryProvider options={telemetryOptions}>
-                  <ConnectionStorageProvider
-                    value={wrapperState.connectionStorage}
-                  >
-                    <ConnectFnProvider connect={wrapperState.connect}>
-                      <CompassConnections
-                        appName={options.appName ?? 'TEST'}
-                        onFailToLoadConnections={
-                          options.onFailToLoadConnections ??
-                          (() => {
-                            // noop
-                          })
-                        }
-                        onExtraConnectionDataRequest={
-                          options.onExtraConnectionDataRequest ??
-                          (() => {
-                            return Promise.resolve([{}, null] as [any, null]);
-                          })
-                        }
-                        onAutoconnectInfoRequest={
-                          options.onAutoconnectInfoRequest
-                        }
-                        preloadStorageConnectionInfos={connections}
-                      >
-                        <StoreGetter>
-                          <TestEnvCurrentConnectionContext.Provider
-                            value={TEST_ENV_CURRENT_CONNECTION}
-                          >
-                            <TestingLibraryWrapper {...props}>
-                              {children}
-                            </TestingLibraryWrapper>
-                          </TestEnvCurrentConnectionContext.Provider>
-                        </StoreGetter>
-                      </CompassConnections>
-                    </ConnectFnProvider>
-                  </ConnectionStorageProvider>
+                  <ContextMenuProvider>
+                    <ConnectionStorageProvider
+                      value={wrapperState.connectionStorage}
+                    >
+                      <ConnectFnProvider connect={wrapperState.connect}>
+                        <CompassConnections
+                          appName={options.appName ?? 'TEST'}
+                          onFailToLoadConnections={
+                            options.onFailToLoadConnections ??
+                            (() => {
+                              // noop
+                            })
+                          }
+                          onExtraConnectionDataRequest={
+                            options.onExtraConnectionDataRequest ??
+                            (() => {
+                              return Promise.resolve([{}, null] as [any, null]);
+                            })
+                          }
+                          onAutoconnectInfoRequest={
+                            options.onAutoconnectInfoRequest
+                          }
+                          preloadStorageConnectionInfos={connections}
+                        >
+                          <StoreGetter>
+                            <TestEnvCurrentConnectionContext.Provider
+                              value={TEST_ENV_CURRENT_CONNECTION}
+                            >
+                              <TestingLibraryWrapper {...props}>
+                                {children}
+                              </TestingLibraryWrapper>
+                            </TestEnvCurrentConnectionContext.Provider>
+                          </StoreGetter>
+                        </CompassConnections>
+                      </ConnectFnProvider>
+                    </ConnectionStorageProvider>
+                  </ContextMenuProvider>
                 </TelemetryProvider>
               </LoggerProvider>
             </PreferencesProvider>

packages/compass-context-menu/src/context-menu-provider.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import { ContextMenuProvider } from './context-menu-provider';
+import type { ContextMenuWrapperProps } from './types';
+
+describe('ContextMenuProvider', function () {
+  const TestMenu: React.FC<ContextMenuWrapperProps> = () => (
+    <div data-testid="test-menu">Test Menu</div>
+  );
+
+  const TestComponent = () => (
+    <div data-testid="test-content">Test Content</div>
+  );
+
+  describe('when nested', function () {
+    it('throws an error when providers are nested', function () {
+      expect(() => {
+        render(
+          <ContextMenuProvider wrapper={TestMenu}>
+            <div>
+              <ContextMenuProvider wrapper={TestMenu}>
+                <TestComponent />
+              </ContextMenuProvider>
+            </div>
+          </ContextMenuProvider>
+        );
+      }).to.throw(
+        'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+      );
+    });
+  });
+
+  describe('when not nested', function () {
+    it('renders without error', function () {
+      render(
+        <ContextMenuProvider wrapper={TestMenu}>
+          <TestComponent />
+        </ContextMenuProvider>
+      );
+
+      expect(document.querySelector('[data-testid="test-content"]')).to.exist;
+    });
+  });
+});

packages/compass-context-menu/src/context-menu-provider.tsx

@@ -4,6 +4,7 @@ import React, {
   useState,
   useMemo,
   createContext,
+  useContext,
 } from 'react';
 import type { ContextMenuContext, ContextMenuState } from './types';
 import type { EnhancedMouseEvent } from './context-menu-content';
@@ -20,6 +21,9 @@ export function ContextMenuProvider({
     menu: ContextMenuState & { close: () => void };
   }>;
 }) {
+  // Check if there's already a parent context menu provider
+  const parentContext = useContext(Context);
+
   const [menu, setMenu] = useState<ContextMenuState>({
     isOpen: false,
     itemGroups: [],
@@ -37,6 +41,11 @@ export function ContextMenuProvider({
   );
 
   useEffect(() => {
+    // If there's a parent provider, don't add event listeners
+    if (parentContext) {
+      return;
+    }
+
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
 
@@ -64,7 +73,7 @@ export function ContextMenuProvider({
       document.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
     };
-  }, [handleClosingEvent]);
+  }, [handleClosingEvent, parentContext]);
 
   const value = useMemo(
     () => ({
@@ -73,6 +82,13 @@ export function ContextMenuProvider({
     [close]
   );
 
+  // Prevent accidental nested providers
+  if (parentContext) {
+    throw new Error(
+      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+    );
+  }
+
   const Wrapper = wrapper ?? React.Fragment;
 
   return (

packages/compass-crud/src/components/document-list-view.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { ReactWrapper, mount } from 'enzyme';
 import HadronDocument from 'hadron-document';
 import { expect } from 'chai';
 
@@ -11,14 +11,21 @@ describe('<DocumentListView />', function () {
     context('when the documents have objects for ids', function () {
       const docs = [{ _id: { name: 'test-1' } }, { _id: { name: 'test-2' } }];
       const hadronDocs = docs.map((doc) => new HadronDocument(doc));
-      const component = mount(
-        <DocumentListView
-          docs={hadronDocs}
-          isEditable={false}
-          isTimeSeries={false}
-        />,
-        { wrappingComponent: ContextMenuProvider }
-      );
+      let component: ReactWrapper;
+      beforeEach(function () {
+        component = mount(
+          <DocumentListView
+            docs={hadronDocs}
+            isEditable={false}
+            isTimeSeries={false}
+          />,
+          { wrappingComponent: ContextMenuProvider }
+        );
+      });
+
+      afterEach(function () {
+        component?.unmount();
+      });
 
       it('renders all the documents', function () {
         const wrapper = component.find('[data-testid="readonly-document"]');