chore(e2e): add connectionName support to more helpers COMPASS-8002 (#…

…6033)

* add connectionName support to more helpers

* ignore toast that doesn't exist

* fix duplicate test name

* not exclusive

* disambiguate the connection when selecting a database or collection in the sidebar

* more closeWorkspaceTabs tweaks

* closeTab retry

* can't calculate the connectionId for single connections

* comment

* comment

* work around a flake

* flake workaround

* throw if we didn't find exactly one connection

* rather do the check inside the function

* another flake workaround

* missed one

* as a drive-by to try and fix some flakes, use more accurate sidebar filters and fix a small bug in there

* extract and fix selectCollectionMenuItem

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

@@ -1,9 +1,11 @@
+import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
+import type { WorkspaceTabSelectorOptions } from '../selectors';
 
 async function navigateToCollection(
   browser: CompassBrowser,
-  // TODO(COMPASS-8002): take connectionName into account
+  connectionName: string,
   dbName: string,
   collectionName: string,
 
@@ -12,7 +14,10 @@ async function navigateToCollection(
   // state of Schema, and Validation tabs without re-connecting.
   closeExistingTabs = true
 ): Promise<void> {
+  const connectionId = await browser.getConnectionIdByName(connectionName);
+
   const collectionSelector = Selectors.sidebarCollection(
+    connectionId,
     dbName,
     collectionName
   );
@@ -23,19 +28,27 @@ async function navigateToCollection(
 
   // search for the collection and wait for the collection to be there and visible
   await browser.clickVisible(Selectors.SidebarFilterInput);
-  await browser.setValueVisible(Selectors.SidebarFilterInput, collectionName);
+  await browser.setValueVisible(
+    Selectors.SidebarFilterInput,
+    `^(${dbName}|${collectionName})$`
+  );
   const collectionElement = await browser.$(collectionSelector);
 
   await collectionElement.waitForDisplayed();
 
   // click it and wait for the collection header to become visible
   await browser.clickVisible(collectionSelector);
-  await waitUntilActiveCollectionTab(browser, dbName, collectionName);
+  await waitUntilActiveCollectionTab(
+    browser,
+    connectionName,
+    dbName,
+    collectionName
+  );
 }
 
 export async function navigateToCollectionTab(
   browser: CompassBrowser,
-  // TODO(COMPASS-8002): take connectionName into account
+  connectionName: string,
   dbName: string,
   collectionName: string,
   tabName:
@@ -48,6 +61,7 @@ export async function navigateToCollectionTab(
 ): Promise<void> {
   await navigateToCollection(
     browser,
+    connectionName,
     dbName,
     collectionName,
     closeExistingTabs
@@ -57,7 +71,6 @@ export async function navigateToCollectionTab(
 
 export async function navigateWithinCurrentCollectionTabs(
   browser: CompassBrowser,
-  // TODO(COMPASS-8002): take connectionName into account
   tabName:
     | 'Documents'
     | 'Aggregations'
@@ -77,9 +90,9 @@ export async function navigateWithinCurrentCollectionTabs(
   await waitUntilActiveCollectionSubTab(browser, tabName);
 }
 
-export async function waitUntilActiveCollectionTab(
+async function waitUntilActiveCollectionTab(
   browser: CompassBrowser,
-  // TODO(COMPASS-8002): take connectionName into account
+  connectionName: string,
   dbName: string,
   collectionName: string,
   tabName:
@@ -90,17 +103,24 @@ export async function waitUntilActiveCollectionTab(
     | 'Validation'
     | null = null
 ) {
-  await browser
-    .$(Selectors.collectionWorkspaceTab(`${dbName}.${collectionName}`, true))
-    .waitForDisplayed();
+  const options: WorkspaceTabSelectorOptions = {
+    namespace: `${dbName}.${collectionName}`,
+    active: true,
+  };
+  // Only add the connectionName for multiple connections because for some
+  // reason this sometimes flakes in single connections even though the tab is
+  // definitely there in the screenshot.
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    options.connectionName = connectionName;
+  }
+  await browser.$(Selectors.workspaceTab(options)).waitForDisplayed();
   if (tabName) {
     await waitUntilActiveCollectionSubTab(browser, tabName);
   }
 }
 
 export async function waitUntilActiveCollectionSubTab(
   browser: CompassBrowser,
-  // TODO(COMPASS-8002): take connectionName into account
   tabName:
     | 'Documents'
     | 'Aggregations'

packages/compass-e2e-tests/helpers/commands/connection-workspaces.ts

@@ -1,6 +1,7 @@
 import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
+import type { WorkspaceTabSelectorOptions } from '../selectors';
 
 export async function navigateToConnectionTab(
   browser: CompassBrowser,
@@ -30,8 +31,13 @@ export async function waitUntilActiveConnectionTab(
   connectionName: string,
   tabName: 'Performance' | 'Databases'
 ) {
-  // TODO(COMPASS-8002): we should differentiate by connectionName somehow
-  await browser
-    .$(Selectors.connectionWorkspaceTab(tabName, true))
-    .waitForDisplayed();
+  const options: WorkspaceTabSelectorOptions = { title: tabName, active: true };
+
+  // Only add the connectionName for multiple connections because for some
+  // reason this sometimes flakes in single connections even though the tab is
+  // definitely there in the screenshot.
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    options.connectionName = connectionName;
+  }
+  await browser.$(Selectors.workspaceTab(options)).waitForDisplayed();
 }

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

@@ -1,5 +1,7 @@
+import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
+import type { WorkspaceTabSelectorOptions } from '../selectors';
 
 export async function navigateToDatabaseCollectionsTab(
   browser: CompassBrowser,
@@ -16,8 +18,14 @@ export async function waitUntilActiveDatabaseTab(
   connectionName: string,
   dbName: string
 ) {
-  // TODO(COMPASS-8002): check that the connectionName matches too
-  await browser
-    .$(Selectors.databaseWorkspaceTab(dbName, true))
-    .waitForDisplayed();
+  const options: WorkspaceTabSelectorOptions = { title: dbName, active: true };
+
+  // Only add the connectionName for multiple connections because for some
+  // reason this sometimes flakes in single connections even though the tab is
+  // definitely there in the screenshot.
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    options.connectionName = connectionName;
+  }
+
+  await browser.$(Selectors.workspaceTab(options)).waitForDisplayed();
 }

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

@@ -65,9 +65,13 @@ export async function disconnectAll(
       // toast by now. If so, just close it otherwise the next test or connection
       // attempt will be confused by it.
       if (await browser.$(Selectors.LGToastCloseButton).isExisting()) {
-        const toastText = await browser.$('#lg-toast-region').getText();
-        debug('Closing toast', toastText);
-        await browser.clickVisible(Selectors.LGToastCloseButton);
+        try {
+          const toastText = await browser.$('#lg-toast-region').getText();
+          debug('Closing toast', toastText);
+          await browser.clickVisible(Selectors.LGToastCloseButton);
+        } catch (error) {
+          debug('ignoring', error);
+        }
       }
     }
 

packages/compass-e2e-tests/helpers/commands/drop-collection-from-sidebar.ts

@@ -3,40 +3,25 @@ import * as Selectors from '../selectors';
 
 export async function dropCollectionFromSidebar(
   browser: CompassBrowser,
-  dbName: string,
+  connectionName: string,
+  databaseName: string,
   collectionName: string
 ): Promise<void> {
-  // search for the collecton in the sidebar filter
-  await browser.clickVisible(Selectors.SidebarFilterInput);
-  await browser.setValueVisible(Selectors.SidebarFilterInput, collectionName);
-  const dbElement = await browser.$(Selectors.sidebarDatabase(dbName));
-  await dbElement.waitForDisplayed();
+  await browser.selectCollectionMenuItem(
+    connectionName,
+    databaseName,
+    collectionName,
+    'drop-collection'
+  );
+  await browser.dropNamespace(collectionName);
 
-  // wait for the collection to become displayed
+  // wait for it to be gone
+  const connectionId = await browser.getConnectionIdByName(connectionName);
   const collectionSelector = Selectors.sidebarCollection(
-    dbName,
+    connectionId,
+    databaseName,
     collectionName
   );
-  await browser.scrollToVirtualItem(
-    Selectors.SidebarNavigationTree,
-    collectionSelector,
-    'tree'
-  );
   const collectionElement = await browser.$(collectionSelector);
-  await collectionElement.waitForDisplayed();
-
-  // open the drop collection modal from the sidebar
-  await browser.hover(collectionSelector);
-
-  // NOTE: if the menu was already open for another collection this could get
-  // confusing. Also this selector is just for the actions button and it is
-  // assumed that at this point it is the only one. But the drop confirmation
-  // usually catches that.
-  await browser.clickVisible(Selectors.SidebarNavigationItemShowActionsButton);
-  await browser.clickVisible(Selectors.DropCollectionButton);
-
-  await browser.dropNamespace(collectionName);
-
-  // wait for it to be gone
   await collectionElement.waitForExist({ reverse: true });
 }

packages/compass-e2e-tests/helpers/commands/drop-database-from-sidebar.ts

@@ -3,22 +3,27 @@ import * as Selectors from '../selectors';
 
 export async function dropDatabaseFromSidebar(
   browser: CompassBrowser,
+  connectionName: string,
   dbName: string
 ): Promise<void> {
+  const connectionId = await browser.getConnectionIdByName(connectionName);
+
   // search for the database in the sidebar filter
   await browser.clickVisible(Selectors.SidebarFilterInput);
   await browser.setValueVisible(Selectors.SidebarFilterInput, dbName);
-  await browser.$(Selectors.sidebarDatabase(dbName)).waitForDisplayed();
+  await browser
+    .$(Selectors.sidebarDatabase(connectionId, dbName))
+    .waitForDisplayed();
 
   // open the drop database modal from the sidebar
-  await browser.hover(Selectors.sidebarDatabase(dbName));
+  await browser.hover(Selectors.sidebarDatabase(connectionId, dbName));
 
   await browser.clickVisible(Selectors.DropDatabaseButton);
 
   await browser.dropNamespace(dbName);
 
   // wait for it to be gone
   await browser
-    .$(Selectors.sidebarDatabase(dbName))
+    .$(Selectors.sidebarDatabase(connectionId, dbName))
     .waitForExist({ reverse: true });
 }

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

@@ -41,8 +41,7 @@ export * from './get-feature';
 export * from './set-feature';
 export * from './save-favorite';
 export * from './save-connection-string-as-favorite';
-export * from './select-connection';
-export * from './select-connection-menu-item';
+export * from './sidebar-connection';
 export * from './select-connections-menu-item';
 export * from './open-settings-modal';
 export * from './wait-for-connection-result';
@@ -67,4 +66,4 @@ export * from './drop-index';
 export * from './hide-index';
 export * from './unhide-index';
 export * from './hide-visible-toasts';
-export * from './remove-connection';
+export * from './sidebar-collection';