Fix remaining components tests

Author: kraenhansen

packages/compass-components/src/components/content-with-fallback.spec.tsx

@@ -58,14 +58,17 @@ describe('ContentWithFallback', function () {
       { container }
     );
 
-    expect(container.children.length).to.equal(2);
-    const [contentContainer, contextMenuContainer] = Array.from(
-      container.children
-    );
+    expect(container.children.length).to.equal(3);
+    const [contentContainer, contextMenuContainer, confirmationModal] =
+      Array.from(container.children);
     expect(contentContainer.children.length).to.equal(0);
     expect(contextMenuContainer.getAttribute('data-testid')).to.equal(
       'context-menu-container'
     );
+    expect(confirmationModal.getAttribute('data-testid')).to.equal(
+      // TODO: Change to 'confirmation-modal' when https://github.com/mongodb/leafygreen-ui/pull/3183 gets released
+      'lg-confirmation_modal'
+    );
   });
 
   it('should render fallback when the timeout passes', async function () {

packages/compass-components/src/components/modals/confirmation-modal.spec.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { render, screen, cleanup } from '@mongodb-js/testing-library-compass';
+import {
+  render,
+  screen,
+  cleanup,
+  within,
+} from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 
 import ConfirmationModal from './confirmation-modal';
@@ -23,8 +28,8 @@ describe('ConfirmationModal Component', function () {
   });
 
   it('should show the modal button', function () {
-    renderModal();
-    const button = screen.getByText('Confirm').closest('button');
+    const { container } = renderModal();
+    const button = within(container).getByText('Confirm').closest('button');
     expect(button).to.not.match('disabled');
   });
 

packages/compass-components/src/hooks/use-confirmation.spec.tsx

@@ -2,7 +2,6 @@ import {
   render,
   screen,
   waitFor,
-  waitForElementToBeRemoved,
   within,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
@@ -34,7 +33,8 @@ describe('use-confirmation', function () {
       );
       userEvent.click(screen.getByText('Open Modal'));
       await waitFor(() => {
-        modal = screen.getByTestId('confirmation-modal');
+        // TODO: Change to 'confirmation-modal' when https://github.com/mongodb/leafygreen-ui/pull/3183 gets released
+        modal = screen.getByTestId('lg-confirmation_modal');
       });
     });
 
@@ -49,18 +49,14 @@ describe('use-confirmation', function () {
 
     it('handles cancel action', async function () {
       userEvent.click(within(modal).getByText('Cancel'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
+      await waitFor(() => expect(modal).to.not.be.displayed);
       const confirmed = await response;
       expect(confirmed).to.be.false;
     });
 
     it('handles confirm action', async function () {
       userEvent.click(within(modal).getByText('Yes'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
+      await waitFor(() => expect(modal).to.not.be.displayed);
       const confirmed = await response;
       expect(confirmed).to.be.true;
     });