fix: add renderWithQueryBar hook

gagik · gagik · commit 56f6f82dbebb · 2025-07-08T15:32:14.000+02:00
diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
@@ -1,22 +1,11 @@
 import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
-import {
-  render,
-  screen,
-  cleanup,
-  within,
-  userEvent,
-} from '@mongodb-js/testing-library-compass';
+import { screen, within, userEvent } from '@mongodb-js/testing-library-compass';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 import { CrudToolbar } from './crud-toolbar';
-import { PreferencesProvider } from 'compass-preferences-model/provider';
-import QueryBarPlugin from '@mongodb-js/compass-query-bar';
-import {
-  compassFavoriteQueryStorageAccess,
-  compassRecentQueryStorageAccess,
-} from '@mongodb-js/my-queries-storage';
+import { renderWithQueryBar } from '../../test/render-with-query-bar';
 
 const noop = () => {
   /* noop */
@@ -25,21 +14,6 @@ const noop = () => {
 const testOutdatedMessageId = 'crud-outdated-message-id';
 const testErrorMessageId = 'document-list-error-summary';
 
-const MockQueryBarPlugin = QueryBarPlugin.withMockServices({
-  dataService: {
-    sample() {
-      return Promise.resolve([]);
-    },
-    getConnectionString() {
-      return { hosts: [] } as any;
-    },
-  },
-  instance: { on() {}, removeListener() {} } as any,
-  favoriteQueryStorageAccess: compassFavoriteQueryStorageAccess,
-  recentQueryStorageAccess: compassRecentQueryStorageAccess,
-  atlasAiService: {} as any,
-});
-
 const addDataText = 'Add Data';
 const updateDataText = 'Update';
 const deleteDataText = 'Delete';
@@ -50,50 +24,41 @@ describe('CrudToolbar Component', function () {
   function renderCrudToolbar(
     props?: Partial<React.ComponentProps<typeof CrudToolbar>>
   ) {
-    const queryBarProps = {};
-
-    return render(
-      <PreferencesProvider value={preferences}>
-        <MockQueryBarPlugin {...(queryBarProps as any)}>
-          <CrudToolbar
-            activeDocumentView="List"
-            count={55}
-            end={20}
-            getPage={noop}
-            insertDataHandler={noop}
-            loadingCount={false}
-            isFetching={false}
-            docsPerPage={25}
-            isWritable
-            instanceDescription=""
-            onApplyClicked={noop}
-            onResetClicked={noop}
-            onUpdateButtonClicked={noop}
-            onDeleteButtonClicked={noop}
-            onExpandAllClicked={noop}
-            onCollapseAllClicked={noop}
-            openExportFileDialog={noop}
-            outdated={false}
-            page={0}
-            readonly={false}
-            refreshDocuments={noop}
-            resultId="123"
-            start={0}
-            viewSwitchHandler={noop}
-            updateMaxDocumentsPerPage={noop}
-            queryLimit={0}
-            querySkip={0}
-            {...props}
-          />
-        </MockQueryBarPlugin>
-      </PreferencesProvider>
+    return renderWithQueryBar(
+      <CrudToolbar
+        activeDocumentView="List"
+        count={55}
+        end={20}
+        getPage={noop}
+        insertDataHandler={noop}
+        loadingCount={false}
+        isFetching={false}
+        docsPerPage={25}
+        isWritable
+        instanceDescription=""
+        onApplyClicked={noop}
+        onResetClicked={noop}
+        onUpdateButtonClicked={noop}
+        onDeleteButtonClicked={noop}
+        onExpandAllClicked={noop}
+        onCollapseAllClicked={noop}
+        openExportFileDialog={noop}
+        outdated={false}
+        page={0}
+        readonly={false}
+        refreshDocuments={noop}
+        resultId="123"
+        start={0}
+        viewSwitchHandler={noop}
+        updateMaxDocumentsPerPage={noop}
+        queryLimit={0}
+        querySkip={0}
+        {...props}
+      />,
+      { preferences }
     );
   }
 
-  afterEach(function () {
-    cleanup();
-  });
-
   beforeEach(async function () {
     preferences = await createSandboxFromDefaultPreferences();
   });
@@ -732,7 +697,6 @@ describe('CrudToolbar Component', function () {
 
         const contextMenu = screen.getByTestId('context-menu');
         expect(within(contextMenu).queryByText('Bulk update')).to.not.exist;
-        expect(within(contextMenu).queryByText('Bulk delete')).to.not.exist;
       });
 
       it('should not show bulk operations when query has skip', function () {
diff --git a/packages/compass-crud/src/components/document-list-view-item.spec.tsx b/packages/compass-crud/src/components/document-list-view-item.spec.tsx
@@ -1,33 +1,13 @@
 import React from 'react';
-import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import HadronDocument from 'hadron-document';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
-import { PreferencesProvider } from 'compass-preferences-model/provider';
-import QueryBarPlugin from '@mongodb-js/compass-query-bar';
-import {
-  compassFavoriteQueryStorageAccess,
-  compassRecentQueryStorageAccess,
-} from '@mongodb-js/my-queries-storage';
+import { renderWithQueryBar } from '../../test/render-with-query-bar';
 import { DocumentListViewItem } from './document-list-view-item';
 
-const MockQueryBarPlugin = QueryBarPlugin.withMockServices({
-  dataService: {
-    sample() {
-      return Promise.resolve([]);
-    },
-    getConnectionString() {
-      return { hosts: [] } as any;
-    },
-  },
-  instance: { on() {}, removeListener() {} } as any,
-  favoriteQueryStorageAccess: compassFavoriteQueryStorageAccess,
-  recentQueryStorageAccess: compassRecentQueryStorageAccess,
-  atlasAiService: {} as any,
-});
-
 describe('DocumentListViewItem', function () {
   let doc: HadronDocument;
   let copyToClipboardStub: sinon.SinonStub;
@@ -37,22 +17,19 @@ describe('DocumentListViewItem', function () {
   function renderDocumentListViewItem(
     props?: Partial<React.ComponentProps<typeof DocumentListViewItem>>
   ) {
-    const queryBarProps = {};
-
-    return render(
-      <PreferencesProvider value={preferences}>
-        <MockQueryBarPlugin {...(queryBarProps as any)}>
-          <DocumentListViewItem
-            doc={doc}
-            docRef={null}
-            docIndex={0}
-            isEditable={true}
-            copyToClipboard={copyToClipboardStub}
-            openInsertDocumentDialog={openInsertDocumentDialogStub}
-            {...props}
-          />
-        </MockQueryBarPlugin>
-      </PreferencesProvider>
+    return renderWithQueryBar(
+      <DocumentListViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+        {...props}
+      />,
+      {
+        preferences,
+      }
     );
   }
 
diff --git a/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx b/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import { expect } from 'chai';
 import HadronDocument from 'hadron-document';
 import {
-  render,
   screen,
-  cleanup,
   within,
   act,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
 import { type VirtualListRef } from '@mongodb-js/compass-components';
+import type { PreferencesAccess } from 'compass-preferences-model';
+import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
+import { renderWithQueryBar } from '../../test/render-with-query-bar';
 
 import VirtualizedDocumentListView from './virtualized-document-list-view';
 
@@ -36,12 +37,17 @@ const getDocs = () => [
 ];
 
 describe('VirtualizedDocumentListView', function () {
-  afterEach(function () {
-    cleanup();
+  let preferences: PreferencesAccess;
+
+  beforeEach(async function () {
+    preferences = await createSandboxFromDefaultPreferences();
   });
 
   it('renders the list of provided BSON objects', function () {
-    render(<VirtualizedDocumentListView docs={getDocs()} isEditable={false} />);
+    renderWithQueryBar(
+      <VirtualizedDocumentListView docs={getDocs()} isEditable={false} />,
+      { preferences }
+    );
 
     expect(screen.getByTitle('1')).to.be.visible;
     expect(screen.getByTitle('Doc1')).to.be.visible;
@@ -50,11 +56,12 @@ describe('VirtualizedDocumentListView', function () {
   });
 
   it('renders the list of provided HadronDocuments', function () {
-    render(
+    renderWithQueryBar(
       <VirtualizedDocumentListView
         docs={getDocs().map((doc) => new HadronDocument(doc))}
         isEditable={false}
-      />
+      />,
+      { preferences }
     );
 
     expect(screen.getByTitle('1')).to.be.visible;
@@ -64,22 +71,24 @@ describe('VirtualizedDocumentListView', function () {
   });
 
   it('renders a readonly list when isEditable is false', function () {
-    render(
+    renderWithQueryBar(
       <VirtualizedDocumentListView
         docs={getDocs().map((doc) => new HadronDocument(doc))}
         isEditable={false}
-      />
+      />,
+      { preferences }
     );
 
     expect(screen.getAllByTestId('readonly-document')).to.have.lengthOf(2);
   });
 
   it('renders an editable list when isEditable is true', function () {
-    render(
+    renderWithQueryBar(
       <VirtualizedDocumentListView
         docs={getDocs().map((doc) => new HadronDocument(doc))}
         isEditable={true}
-      />
+      />,
+      { preferences }
     );
 
     expect(screen.getAllByTestId('editable-document')).to.have.lengthOf(2);
@@ -91,14 +100,16 @@ describe('VirtualizedDocumentListView', function () {
       (_, idx) => new HadronDocument(createBigDocument(idx))
     );
     const listRef: VirtualListRef = React.createRef();
-    render(
+
+    renderWithQueryBar(
       <VirtualizedDocumentListView
         docs={bigDocuments}
         isEditable={true}
         listRef={listRef}
         __TEST_OVERSCAN_COUNT={0}
         __TEST_LIST_HEIGHT={178}
-      />
+      />,
+      { preferences }
     );
 
     const firstDocument = bigDocuments[0];
@@ -152,12 +163,13 @@ describe('VirtualizedDocumentListView', function () {
   });
 
   it('discards the state of document when the underlying document changes', function () {
-    const { rerender } = render(
+    const { rerender } = renderWithQueryBar(
       <VirtualizedDocumentListView
         docs={[new HadronDocument(createBigDocument(1))]}
         isEditable={true}
         __TEST_LIST_HEIGHT={178}
-      />
+      />,
+      { preferences }
     );
 
     let [documentElement] = screen.getAllByTestId('editable-document');
diff --git a/packages/compass-crud/test/render-with-query-bar.tsx b/packages/compass-crud/test/render-with-query-bar.tsx
@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from 'react';
+import { render } from '@mongodb-js/testing-library-compass';
+import type { PreferencesAccess } from 'compass-preferences-model';
+import { PreferencesProvider } from 'compass-preferences-model/provider';
+import QueryBarPlugin from '@mongodb-js/compass-query-bar';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import {
+  compassFavoriteQueryStorageAccess,
+  compassRecentQueryStorageAccess,
+} from '@mongodb-js/my-queries-storage';
+
+export const MockQueryBarPlugin: typeof QueryBarPlugin =
+  QueryBarPlugin.withMockServices({
+    dataService: {
+      sample() {
+        return Promise.resolve([]);
+      },
+      getConnectionString() {
+        return { hosts: [] } as any;
+      },
+    },
+    instance: { on() {}, removeListener() {} } as any,
+    favoriteQueryStorageAccess: compassFavoriteQueryStorageAccess,
+    recentQueryStorageAccess: compassRecentQueryStorageAccess,
+    atlasAiService: {} as any,
+  });
+
+export const renderWithQueryBar = (
+  component: React.ReactElement,
+  { preferences }: { preferences: PreferencesAccess }
+) => {
+  const queryBarProps = {};
+
+  return render(component, {
+    wrapper: ({ children }: PropsWithChildren<unknown>) => (
+      <PreferencesProvider value={preferences}>
+        <MockQueryBarPlugin {...(queryBarProps as any)}>
+          {children}
+        </MockQueryBarPlugin>
+      </PreferencesProvider>
+    ),
+  });
+};
