chore(components): upgrade LeafyGreen modal components COMPASS-9642

configs/mocha-config-compass/register/jsdom-extra-mocks-register.js

@@ -35,6 +35,25 @@ Object.assign(tabbable, {
     origTabbable.isTabbable(node, { ...options, displayCheck: 'none' }),
 });
 
+// Workaround for missing HTMLDialogElement in jsdom
+// See https://github.com/jsdom/jsdom/issues/3294
+
+Object.assign(HTMLDialogElement.prototype, {
+  show() {
+    this.open = true;
+    this.style.display = '';
+  },
+  showModal() {
+    this.open = true;
+    this.style.display = '';
+  },
+  close(returnValue) {
+    this.open = false;
+    this.returnValue = returnValue;
+    this.style.display = 'none';
+  },
+});
+
 // leafygreen (through `clipboard` library) uses deprecated API check that is
 // not working in jsdom if copy / paste APIs are supported
 if (!window.document.queryCommandSupported) {

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

@@ -0,0 +1,43 @@
+import { Assertion, util } from 'chai';
+
+// TODO(COMPASS-10119): Move declaration into a separate .d.ts and implementation into a *-register.js file as we do with other global patching code intended for tests.
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- We're following a pattern established in the `@types/chai-as-promised` package to add a Chai assertion property.
+  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);