Update existing tests to handle dialog elements remaining in the DOM

Author: kraenhansen

configs/testing-library-compass/src/assertions.ts

@@ -0,0 +1,41 @@
+import { Assertion, util } from 'chai';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace Chai {
+    interface Assertion {
+      /** Asserts that a dialog is open */
+      get open(): Assertion;
+      /** Asserts that a dialog is closed */
+      get closed(): Assertion;
+    }
+  }
+}
+
+util.addProperty(
+  Assertion.prototype,
+  'open',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      true,
+      'Expected dialog to be open'
+    );
+  }
+);
+
+util.addProperty(
+  Assertion.prototype,
+  'closed',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      false,
+      'Expected dialog to be closed'
+    );
+  }
+);

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

@@ -73,6 +73,8 @@ import { expect } from 'chai';
 import { Provider } from 'react-redux';
 import ConnectionString from 'mongodb-connection-string-url';
 
+import './assertions';
+
 function wait(ms: number) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);

packages/compass-assistant/src/compass-assistant-provider.spec.tsx

@@ -5,7 +5,6 @@ import {
   screen,
   userEvent,
   waitFor,
-  waitForElementToBeRemoved,
   within,
 } from '@mongodb-js/testing-library-compass';
 import {
@@ -568,8 +567,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -580,9 +580,11 @@ describe('CompassAssistantProvider', function () {
         const confirmButton = within(modal).getByText('Clear chat');
         userEvent.click(confirmButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         expect(mockChat.messages).to.be.empty;
         expect(screen.queryByTestId('assistant-message-1')).to.not.exist;
@@ -598,8 +600,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -610,9 +613,11 @@ describe('CompassAssistantProvider', function () {
         const cancelButton = within(modal).getByText('Cancel');
         userEvent.click(cancelButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         expect(mockChat.messages).to.deep.equal(mockMessages);
         expect(screen.getByTestId('assistant-message-1')).to.exist;
@@ -630,8 +635,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -644,9 +650,11 @@ describe('CompassAssistantProvider', function () {
         const confirmButton = within(modal).getByText('Clear chat');
         userEvent.click(confirmButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         // The non-genuine warning message should still be in the chat
         expect(screen.getByTestId('assistant-message-non-genuine-warning')).to

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx

@@ -133,23 +133,23 @@ describe('MockDataGeneratorModal', () => {
     it('renders the modal when isOpen is true', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
     });
 
     it('does not render the modal when isOpen is false', async () => {
       await renderModal({ isOpen: false });
 
-      expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed;
     });
 
     it('closes the modal when the close button is clicked', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByLabelText('Close modal'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 
@@ -171,11 +171,11 @@ describe('MockDataGeneratorModal', () => {
     it('closes the modal when the cancel button is clicked', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByText('Cancel'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 
@@ -1097,11 +1097,11 @@ describe('MockDataGeneratorModal', () => {
         },
       });
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByText('Done'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+
+import { Modal } from './modal';
+
+describe('Modal Component', function () {
+  it('opens and closes', () => {
+    const { rerender } = render(
+      <Modal data-testid="modal" open={false}>
+        <p data-testid="modal-content">The content!</p>
+      </Modal>
+    );
+
+    expect(screen.getByTestId('modal')).to.be.closed;
+
+    rerender(
+      <Modal data-testid="modal" open={true}>
+        <p data-testid="modal-content">The content!</p>
+      </Modal>
+    );
+
+    expect(screen.getByTestId('modal')).to.be.open;
+  });
+});

packages/compass-welcome/src/components/modal.spec.tsx

@@ -25,7 +25,7 @@ describe('WelcomeModal', function () {
     expect(startButton).to.be.visible;
     userEvent.click(startButton);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
   });
 
@@ -36,7 +36,7 @@ describe('WelcomeModal', function () {
     const closeButton = screen.getByLabelText('Close modal');
     userEvent.click(closeButton);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
   });
 
@@ -48,7 +48,7 @@ describe('WelcomeModal', function () {
     const settingsLink = screen.getByText('Settings');
     userEvent.click(settingsLink);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
     expect(emitSpy).to.have.been.called;
   });