Add new modal specific commands

Author: kraenhansen

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

@@ -0,0 +1,11 @@
+import type { ChainablePromiseArray } from 'webdriverio';
+
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export function getOpenModals(
+  browser: CompassBrowser,
+  selector: string = Selectors.LGModal
+): ChainablePromiseArray {
+  return browser.custom$$('dialogOpen', selector);
+}

packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts

@@ -15,7 +15,9 @@ export async function hideVisibleModal(browser: CompassBrowser): Promise<void> {
     const waitOptions = { timeout: 2_000 };
     try {
       await browser.clickVisible(Selectors.LGModalClose, waitOptions);
-      await browser.$(Selectors.LGModal).waitForDisplayed({ reverse: true });
+      await browser
+        .$(Selectors.LGModal)
+        .waitForDisplayed({ reverse: true, ...waitOptions });
     } catch (err) {
       // if the modal disappears by itself in the meantime, that's fine
       debug('ignoring', err);

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: string = 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,11 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function isModalOpen(
+  browser: CompassBrowser,
+  selector: string = Selectors.LGModal
+): Promise<boolean> {
+  const modals = await browser.getOpenModals(selector);
+  const count = await modals.length;
+  return count > 0;
+}

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

@@ -0,0 +1,36 @@
+import { inspect } from 'node:util';
+import type { WaitForOptions } from 'webdriverio';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function waitForOpenModal(
+  browser: CompassBrowser,
+  selector: string,
+  { reverse = false, ...options }: WaitForOptions = {}
+): Promise<void> {
+  await browser.waitUntil(
+    async () => {
+      const modals = await browser.getOpenModals(selector);
+      const count = await modals.length;
+      if (reverse) {
+        return count === 0;
+      } else if (count === 0) {
+        return false;
+      } else {
+        for (const modal of modals) {
+          // Ensure any modals are interactable if open
+          await modal.waitForClickable({
+            timeoutMsg: 'Timeout waiting for open modal to become clickable',
+            ...options,
+          });
+        }
+        return true;
+      }
+    },
+    {
+      timeoutMsg: `Timeout waiting for modal '${inspect(selector)}' to ${
+        reverse ? 'close' : 'open'
+      }`,
+      ...options,
+    }
+  );
+}

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

@@ -44,6 +44,7 @@ import treeKill from 'tree-kill';
 import { downloadPath } from './downloads';
 import path from 'path';
 import { globalFixturesAbortController } from './test-runner-global-fixtures';
+import { dialogOpenLocator } from './dialog-open-locator-strategy';
 
 const killAsync = async (pid: number, signal?: string) => {
   return new Promise<void>((resolve, reject) => {
@@ -200,6 +201,9 @@ export class Compass {
       }
     );
 
+    // Adding a custom locator strategy to help locate open dialogs from a selector synchronously
+    browser.addLocatorStrategy('dialogOpen', dialogOpenLocator);
+
     this.addDebugger();
   }
 

packages/compass-e2e-tests/helpers/dialog-open-locator-strategy.ts

@@ -0,0 +1,17 @@
+export function dialogOpenLocator(selector: string) {
+  // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+  const result: HTMLDialogElement[] = [];
+  // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+  const elements = document.querySelectorAll(selector);
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    if (
+      // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+      element instanceof HTMLDialogElement &&
+      element.open
+    ) {
+      result.push(element);
+    }
+  }
+  return result;
+}