Add new modal specific commands

Author: kraenhansen

packages/compass-e2e-tests/helpers/commands/get-open-modals.ts

@@ -0,0 +1,29 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+import Debug from 'debug';
+
+const debug = Debug('compass-e2e-tests');
+
+// TODO: Wait for any animation to settle before resolving?
+export function getOpenModals(
+  browser: CompassBrowser,
+  selector: Parameters<CompassBrowser['$$']>[0] = Selectors.LGModal
+): Promise<WebdriverIO.Element[]> {
+  return browser.$$(selector).filter(async (element) => {
+    try {
+      const tagName = await element.getTagName();
+      if (tagName !== 'dialog') {
+        throw new Error(
+          `Expected selector to match dialogs, matched '${tagName}'`
+        );
+      }
+      const open = await element.getAttribute('open');
+      return open === 'true';
+    } catch (err) {
+      // Most likely, the element disappeared after it got selected
+      debug('ignoring', err instanceof Error ? err.stack : err);
+      return false;
+    }
+  });
+}

packages/compass-e2e-tests/helpers/commands/index.ts

@@ -67,3 +67,7 @@ export * from './read-stage-operators';
 export * from './click-confirmation-action';
 export * from './get-input-by-label';
 export * from './resize-window';
+export * from './get-open-modals';
+export * from './is-modal-open';
+export * from './is-modal-eventually-open';
+export * from './wait-for-open-modal';

packages/compass-e2e-tests/helpers/commands/is-modal-eventually-open.ts

@@ -0,0 +1,16 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function isModalEventuallyOpen(
+  browser: CompassBrowser,
+  selector: Parameters<CompassBrowser['$$']>[0] = Selectors.LGModal,
+  timeout?: number
+): Promise<boolean> {
+  try {
+    await browser.waitForOpenModal(selector, { timeout });
+    // return true if it opens before the timeout expires
+    return true;
+  } catch {
+    return false;
+  }
+}

packages/compass-e2e-tests/helpers/commands/is-modal-open.ts

@@ -0,0 +1,10 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function isModalOpen(
+  browser: CompassBrowser,
+  selector: Parameters<CompassBrowser['$$']>[0] = Selectors.LGModal
+): Promise<boolean> {
+  const modals = await browser.getOpenModals(selector);
+  return modals.length > 0;
+}

packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts

@@ -0,0 +1,23 @@
+import { inspect } from 'node:util';
+import type { WaitForOptions } from 'webdriverio';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function waitForOpenModal(
+  browser: CompassBrowser,
+  selector: Parameters<CompassBrowser['$$']>[0],
+  { reverse = false, ...options }: WaitForOptions = {}
+): Promise<void> {
+  await browser.waitUntil(
+    async () => {
+      const open = await browser.isModalOpen(selector);
+      return reverse ? !open : open;
+    },
+    {
+      timeout: 2_000,
+      timeoutMsg: `Timeout waiting for modal '${inspect(selector)}' to ${
+        reverse ? 'close' : 'open'
+      }`,
+      ...options,
+    }
+  );
+}