Wait for crud elements to become visible before interacting

Author: kraenhansen

packages/compass-crud/src/components/bulk-update-modal.spec.tsx

@@ -218,15 +218,16 @@ describe('BulkUpdateModal Component', function () {
     expect(onUpdateSpy).to.have.been.calledOnce;
   });
 
-  it('saves the query when a name is provided', function () {
+  it('saves the query when a name is provided', async function () {
     const saveUpdateQuerySpy = sinon.spy();
-    renderBulkUpdateModal({ saveUpdateQuery: saveUpdateQuerySpy });
+    renderBulkUpdateModal({
+      saveUpdateQuery: saveUpdateQuerySpy,
+    });
 
     userEvent.click(screen.getByTestId('inline-save-query-modal-opener'));
-    userEvent.type(
-      screen.getByTestId('inline-save-query-modal-input'),
-      'MySavedQuery'
-    );
+    const inputElement = screen.getByTestId('inline-save-query-modal-input');
+    await waitFor(() => expect(inputElement).to.be.visible);
+    userEvent.type(inputElement, 'MySavedQuery');
 
     userEvent.click(screen.getByTestId('inline-save-query-modal-submit'));
     expect(saveUpdateQuerySpy).to.have.been.calledOnceWith('MySavedQuery');

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -6,6 +6,7 @@ import {
   within,
   userEvent,
   renderWithConnections,
+  waitFor,
 } from '@mongodb-js/testing-library-compass';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
@@ -20,6 +21,7 @@ const noop = () => {
 
 const testOutdatedMessageId = 'crud-outdated-message-id';
 const testErrorMessageId = 'document-list-error-summary';
+const testDocumentsPerPageId = 'crud-document-per-page-selector';
 
 const addDataText = 'Add Data';
 const updateDataText = 'Update';
@@ -480,20 +482,24 @@ describe('CrudToolbar Component', function () {
   });
 
   describe('documents per page select', function () {
-    it('should render a select to update documents fetched per page', function () {
+    it('should render a select to update documents fetched per page', async function () {
       renderCrudToolbar();
-      expect(screen.getByLabelText('Update number of documents per page')).to.be
-        .visible;
+
+      await waitFor(
+        () => expect(screen.getByTestId(testDocumentsPerPageId)).to.be.visible
+      );
     });
 
-    it('should call updateDocumentsPerPage when select value changes', function () {
+    it('should call updateDocumentsPerPage when select value changes', async function () {
       const stub = sinon.stub();
       renderCrudToolbar({
         updateMaxDocumentsPerPage: stub,
       });
-      userEvent.click(
-        screen.getByLabelText('Update number of documents per page')
-      );
+
+      const selector = screen.getByTestId(testDocumentsPerPageId);
+
+      await waitFor(() => expect(selector).to.be.visible);
+      userEvent.click(selector);
       userEvent.click(screen.getByText('75'));
       expect(stub).to.be.calledWithExactly(75);
     });

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -394,6 +394,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
         </div>
         <div className={toolbarRightActionStyles}>
           <Select
+            data-testid="crud-document-per-page-selector"
             size="xsmall"
             disabled={isFetching}
             allowDeselect={false}