Update E2E tests to use new modal commands instead of waitForDisplayed

Author: kraenhansen

packages/compass-e2e-tests/helpers/commands/add-collection.ts

@@ -34,8 +34,7 @@ export async function addCollection(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = browser.$(Selectors.CreateCollectionModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal);
 
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
@@ -216,5 +215,7 @@ export async function addCollection(
   }
 
   await browser.clickVisible(Selectors.CreateCollectionCreateButton);
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal, {
+    reverse: true,
+  });
 }

packages/compass-e2e-tests/helpers/commands/add-database.ts

@@ -10,8 +10,7 @@ export async function addDatabase(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = browser.$(Selectors.CreateDatabaseModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal);
   await browser.setValueVisible(Selectors.CreateDatabaseDatabaseName, dbName);
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
@@ -25,5 +24,7 @@ export async function addDatabase(
   }
 
   await createButton.click();
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal, {
+    reverse: true,
+  });
 }

packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts

@@ -9,8 +9,7 @@ export async function clickConfirmationAction(
 ) {
   await browser.clickVisible(actionButtonSelector);
 
-  const confirmationModal = browser.$(Selectors.ConfirmationModal);
-  await confirmationModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ConfirmationModal);
 
   if (confirmationText) {
     await browser.setValueVisible(
@@ -24,5 +23,7 @@ export async function clickConfirmationAction(
   }
 
   await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-  await confirmationModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConfirmationModal, {
+    reverse: true,
+  });
 }

packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts

@@ -4,16 +4,11 @@ import * as Selectors from '../selectors';
 export async function closeSettingsModal(
   browser: CompassBrowser
 ): Promise<void> {
-  if (!(await browser.existsEventually(Selectors.SettingsModal))) {
+  if (!(await browser.isModalEventuallyOpen(Selectors.SettingsModal))) {
     return;
   }
 
-  const settingsModalElement = browser.$(Selectors.SettingsModal);
-
-  await settingsModalElement.waitForDisplayed();
-
+  await browser.waitForOpenModal(Selectors.SettingsModal);
   await browser.clickVisible(Selectors.CloseSettingsModalButton);
-  await settingsModalElement.waitForDisplayed({
-    reverse: true,
-  });
+  await browser.waitForOpenModal(Selectors.SettingsModal, { reverse: true });
 }

packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts

@@ -4,17 +4,13 @@ import * as Selectors from '../selectors';
 export async function closeWelcomeModal(
   browser: CompassBrowser
 ): Promise<void> {
-  if (!(await browser.existsEventually(Selectors.WelcomeModal))) {
+  if (!(await browser.isModalEventuallyOpen(Selectors.WelcomeModal))) {
     return;
   }
 
-  const welcomeModalElement = browser.$(Selectors.WelcomeModal);
-  await welcomeModalElement.waitForDisplayed();
-
+  await browser.waitForOpenModal(Selectors.WelcomeModal);
   await browser.clickVisible(Selectors.CloseWelcomeModalButton);
-  await welcomeModalElement.waitForDisplayed({
-    reverse: true,
-  });
+  await browser.waitForOpenModal(Selectors.WelcomeModal, { reverse: true });
 
   // By setting a feature after closing the welcome modal we know that
   // preferences will have been saved to disk and therefore showedNetworkOptIn

packages/compass-e2e-tests/helpers/commands/connect-form.ts

@@ -13,16 +13,11 @@ import { getConnectionTitle } from '@mongodb-js/connection-info';
 const debug = Debug('compass-e2e-tests');
 
 export async function resetConnectForm(browser: CompassBrowser): Promise<void> {
-  if (await browser.$(Selectors.ConnectionModal).isDisplayed()) {
+  if (await browser.isModalOpen(Selectors.ConnectionModal)) {
     await browser.clickVisible(Selectors.ConnectionModalCloseButton);
   }
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForClickable({ reverse: true });
 
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
   await browser.clickVisible(Selectors.SidebarNewConnectionButton);
 
   const connectionTitleSelector = Selectors.ConnectionModalTitle;
@@ -922,9 +917,7 @@ export async function saveConnection(
 ): Promise<void> {
   await browser.setConnectFormState(state);
   await browser.clickVisible(Selectors.ConnectionModalSaveButton);
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
 }
 
 let screenshotCounter = 0;

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

@@ -63,9 +63,7 @@ export async function connectWithConnectionString(
 
   // if the modal is still animating away when we're connecting again, things
   // are going to get confused
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
 
   // if a connection with this name already exists, remove it otherwise we'll
   // add a duplicate and things will get complicated fast
@@ -77,7 +75,7 @@ export async function connectWithConnectionString(
   }
 
   await browser.clickVisible(Selectors.SidebarNewConnectionButton);
-  await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ConnectionModal);
 
   await browser.setValueVisible(
     Selectors.ConnectionFormStringInput,

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

@@ -51,8 +51,8 @@ export async function createIndex(
   } else {
     await browser.clickVisible(Selectors.CreateIndexButton);
   }
-  const createModal = browser.$(Selectors.CreateIndexModal);
-  await createModal.waitForDisplayed();
+
+  await browser.waitForOpenModal(Selectors.CreateIndexModal);
 
   // Select / type field name
   await browser.setComboBoxValue(
@@ -114,7 +114,7 @@ export async function createIndex(
   await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
   // Assert that modal goes away
-  await createModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateIndexModal, { reverse: true });
 
   // Assert that index does come in table
   const indexComponentSelector = Selectors.indexComponent(indexName);

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

@@ -15,8 +15,7 @@ export async function dropIndex(
     `${indexComponentSelector} ${Selectors.IndexesTableDropIndexButton}`
   );
 
-  const dropModal = browser.$(Selectors.DropIndexModal);
-  await dropModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.DropIndexModal);
 
   await browser.setValueVisible(
     Selectors.DropIndexModalConfirmNameInput,
@@ -29,7 +28,7 @@ export async function dropIndex(
 
   await browser.clickVisible(Selectors.DropIndexModalConfirmButton);
 
-  await dropModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.DropIndexModal, { reverse: true });
 
   await indexComponent.waitForDisplayed({ reverse: true });
 }

packages/compass-e2e-tests/helpers/commands/drop-namespace.ts

@@ -5,8 +5,7 @@ export async function dropNamespace(
   browser: CompassBrowser,
   collectionName: string
 ): Promise<void> {
-  const dropModalElement = browser.$(Selectors.DropNamespaceModal);
-  await dropModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.DropNamespaceModal);
   await browser.setValueVisible(
     Selectors.DropNamespaceConfirmNameInput,
     collectionName
@@ -15,6 +14,9 @@ export async function dropNamespace(
   await confirmButton.waitForEnabled();
 
   await confirmButton.click();
+  await browser.waitForOpenModal(Selectors.DropNamespaceModal, {
+    reverse: true,
+  });
 
   const successToast = browser.$(Selectors.DropNamespaceSuccessToast);
   await successToast.waitForDisplayed();