chore(e2e): port most e2e tests to multiple connections COMPASS-7925 C…

…OMPASS-8001 (#5878)

.evergreen/buildvariants-and-tasks.in.yml

@@ -246,6 +246,14 @@ buildvariants:
     - name: e2e-coverage-<%= group.number %>
     <% } %>
 
+  - name: e2e-multiple-connections
+    display_name: E2E Multiple Connections
+    run_on: ubuntu2004-large
+    tasks:
+    <% for(const group of E2E_TEST_GROUPS) { %>
+    - name: e2e-multiple-connections-<%= group.number %>
+    <% } %>
+
   - name: csfle-tests
     display_name: CSFLE Tests
     run_on: ubuntu2004-large
@@ -332,6 +340,20 @@ tasks:
           debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'
 <% } %>
 
+<% for(const group of E2E_TEST_GROUPS) { %>
+  - name: e2e-multiple-connections-<%= group.number %>
+    tags: ['required-for-publish', 'run-on-pr']
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+      - func: test-multiple-connections
+        vars:
+          e2e_test_groups: <%= E2E_TEST_GROUPS.length %>
+          e2e_test_group: <%= group.number %>
+          debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'
+<% } %>
+
   - name: generate-vulnerability-report
     tags: ['required-for-publish', 'run-on-pr']
     commands:

.evergreen/buildvariants-and-tasks.yml

@@ -220,6 +220,13 @@ buildvariants:
       - name: e2e-coverage-1
       - name: e2e-coverage-2
       - name: e2e-coverage-3
+  - name: e2e-multiple-connections
+    display_name: E2E Multiple Connections
+    run_on: ubuntu2004-large
+    tasks:
+      - name: e2e-multiple-connections-1
+      - name: e2e-multiple-connections-2
+      - name: e2e-multiple-connections-3
   - name: csfle-tests
     display_name: CSFLE Tests
     run_on: ubuntu2004-large
@@ -331,6 +338,45 @@ tasks:
           e2e_test_groups: 3
           e2e_test_group: 3
           debug: compass-e2e-tests*,electron*,hadron*,mongo*
+  - name: e2e-multiple-connections-1
+    tags:
+      - required-for-publish
+      - run-on-pr
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+      - func: test-multiple-connections
+        vars:
+          e2e_test_groups: 3
+          e2e_test_group: 1
+          debug: compass-e2e-tests*,electron*,hadron*,mongo*
+  - name: e2e-multiple-connections-2
+    tags:
+      - required-for-publish
+      - run-on-pr
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+      - func: test-multiple-connections
+        vars:
+          e2e_test_groups: 3
+          e2e_test_group: 2
+          debug: compass-e2e-tests*,electron*,hadron*,mongo*
+  - name: e2e-multiple-connections-3
+    tags:
+      - required-for-publish
+      - run-on-pr
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+      - func: test-multiple-connections
+        vars:
+          e2e_test_groups: 3
+          e2e_test_group: 3
+          debug: compass-e2e-tests*,electron*,hadron*,mongo*
   - name: generate-vulnerability-report
     tags:
       - required-for-publish

.evergreen/functions.yml

@@ -581,6 +581,30 @@ functions:
 
           tar czf coverage.tgz packages/compass-e2e-tests/coverage
 
+  test-multiple-connections:
+    - command: shell.exec
+      # Fail the task if it's idle for 10 mins
+      timeout_secs: 600
+      params:
+        working_dir: src
+        shell: bash
+        env:
+          <<: *compass-env
+          DEBUG: ${debug|}
+          MONGODB_VERSION: ${mongodb_version|}
+          MONGODB_RUNNER_VERSION: ${mongodb_version|}
+          E2E_TEST_GROUPS: ${e2e_test_groups}
+          E2E_TEST_GROUP: ${e2e_test_group}
+        script: |
+          set -e
+          # Load environment variables
+          eval $(.evergreen/print-compass-env.sh)
+
+          echo "Running E2E tests for multiple connections"
+
+          npm run --unsafe-perm --workspace compass-e2e-tests test-ci -- -- --test-multiple-connections
+
+
   test-packaged-app:
     - command: shell.exec
       # Fail the task if it's idle for 10 mins

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -110,7 +110,7 @@ export function NavigationItem({
     if (item.type === 'connection') {
       return {
         'data-connection-id': item.connectionInfo.id,
-        'data-connection-name': item.connectionInfo.favorite?.name,
+        'data-connection-name': item.name,
       };
     }
     if (item.type === 'database') {

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

@@ -3,6 +3,7 @@ import * as Selectors from '../selectors';
 
 async function navigateToCollection(
   browser: CompassBrowser,
+  // TODO(COMPASS-8002): take connectionName into account
   dbName: string,
   collectionName: string
 ): Promise<void> {
@@ -30,6 +31,7 @@ async function navigateToCollection(
 
 export async function navigateToCollectionTab(
   browser: CompassBrowser,
+  // TODO(COMPASS-8002): take connectionName into account
   dbName: string,
   collectionName: string,
   tabName:
@@ -45,6 +47,7 @@ export async function navigateToCollectionTab(
 
 export async function navigateWithinCurrentCollectionTabs(
   browser: CompassBrowser,
+  // TODO(COMPASS-8002): take connectionName into account
   tabName:
     | 'Documents'
     | 'Aggregations'
@@ -66,6 +69,7 @@ export async function navigateWithinCurrentCollectionTabs(
 
 export async function waitUntilActiveCollectionTab(
   browser: CompassBrowser,
+  // TODO(COMPASS-8002): take connectionName into account
   dbName: string,
   collectionName: string,
   tabName:
@@ -86,6 +90,7 @@ export async function waitUntilActiveCollectionTab(
 
 export async function waitUntilActiveCollectionSubTab(
   browser: CompassBrowser,
+  // TODO(COMPASS-8002): take connectionName into account
   tabName:
     | 'Documents'
     | 'Aggregations'

packages/compass-e2e-tests/helpers/commands/connect-with-connection-string.ts

@@ -1,4 +1,8 @@
-import { DEFAULT_CONNECTION_STRING } from '../compass';
+import {
+  DEFAULT_CONNECTION_STRING,
+  TEST_MULTIPLE_CONNECTIONS,
+  connectionNameFromString,
+} from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
 
@@ -8,14 +12,66 @@ export async function connectWithConnectionString(
   connectionStatus: 'success' | 'failure' | 'either' = 'success',
   timeout?: number
 ): Promise<void> {
-  const sidebar = await browser.$(Selectors.Sidebar);
-  if (await sidebar.isDisplayed()) {
-    await browser.disconnect();
+  await browser.disconnect();
+
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    // 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 });
+
+    // if a connection with this name already exists, remove it otherwise we'll
+    // add a duplicate and things will get complicated fast
+    const connectionName = connectionNameFromString(connectionString);
+
+    // make sure there's no filter because if the connection is not displayed then we can't remove it
+    if (await browser.$(Selectors.SidebarFilterInput).isExisting()) {
+      await browser.clickVisible(Selectors.SidebarFilterInput);
+      await browser.setValueVisible(Selectors.SidebarFilterInput, '');
+
+      // wait for a connection to appear. It must because if there are no
+      // connections the filter field wouldn't exist in the first place
+      await browser.$(Selectors.SidebarTreeItems).waitForDisplayed();
+    }
+
+    const selector = Selectors.sidebarConnection(connectionName);
+    if (await browser.$(selector).isExisting()) {
+      await browser.selectConnectionMenuItem(
+        connectionName,
+        Selectors.Multiple.RemoveConnectionItem
+      );
+      await browser.$(selector).waitForExist({ reverse: true });
+    }
+
+    await browser.clickVisible(Selectors.Multiple.SidebarNewConnectionButton);
+    await browser.$(Selectors.ConnectionModal).waitForDisplayed();
   }
 
   await browser.setValueVisible(
-    Selectors.ConnectionStringInput,
+    Selectors.ConnectionFormStringInput,
     connectionString
   );
   await browser.doConnect(connectionStatus, timeout);
+
+  // Ideally this would be part of browser.doConnect() and
+  // browser.waitForConnectionResult(), but that requires the context of
+  // connectionName there. Which is easy enough for connectWithConnectionString,
+  // but not so easy right now for connectWithConnectionForm.
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    // There's a potential problem here: The list of connections is virtual, so
+    // the new connection might not be rendered. By searching for it if possible
+    // we can guarantee that it will be on screen. The search box won't exist
+    // for the first connection, but that's OK because once connected it will be
+    // the only connection so should be rendered.
+    if (await browser.$(Selectors.SidebarFilterInput).isExisting()) {
+      await browser.clickVisible(Selectors.SidebarFilterInput);
+      await browser.setValueVisible(Selectors.SidebarFilterInput, '');
+    }
+
+    // some connection should be expanded (ie. connected) by now
+    await browser
+      .$(`${Selectors.SidebarTreeItems} [aria-expanded=true]`)
+      .waitForExist({ reverse: true });
+  }
 }

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

@@ -0,0 +1,34 @@
+import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function navigateToConnectionTab(
+  browser: CompassBrowser,
+  connectionName: string,
+  tabName: 'Performance' | 'Databases'
+): Promise<void> {
+  if (TEST_MULTIPLE_CONNECTIONS) {
+    if (tabName === 'Databases') {
+      await browser.clickVisible(Selectors.sidebarConnection(connectionName));
+    } else {
+      // TODO(COMPASS-8002): click the three dots menu then the relevant option. (View performance metrics)
+    }
+
+    await waitUntilActiveConnectionTab(browser, connectionName, tabName);
+  } else {
+    const itemSelector = Selectors.sidebarInstanceNavigationItem(tabName);
+    await browser.clickVisible(itemSelector);
+    await waitUntilActiveConnectionTab(browser, connectionName, tabName);
+  }
+}
+
+export async function waitUntilActiveConnectionTab(
+  browser: CompassBrowser,
+  connectionName: string,
+  tabName: 'Performance' | 'Databases'
+) {
+  // TODO(COMPASS-8002): we should differentiate by connectionName somehow
+  await browser
+    .$(Selectors.instanceWorkspaceTab(tabName, true))
+    .waitForDisplayed();
+}

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

@@ -3,17 +3,20 @@ import * as Selectors from '../selectors';
 
 export async function navigateToDatabaseCollectionsTab(
   browser: CompassBrowser,
+  connectionName: string,
   dbName: string
 ): Promise<void> {
-  await browser.navigateToInstanceTab('Databases');
+  await browser.navigateToConnectionTab(connectionName, 'Databases');
   await browser.clickVisible(Selectors.databaseCardClickable(dbName));
-  await waitUntilActiveDatabaseTab(browser, dbName);
+  await waitUntilActiveDatabaseTab(browser, connectionName, dbName);
 }
 
 export async function waitUntilActiveDatabaseTab(
   browser: CompassBrowser,
+  connectionName: string,
   dbName: string
 ) {
+  // TODO(COMPASS-8002): check that the connectionName matches too
   await browser
     .$(Selectors.databaseWorkspaceTab(dbName, true))
     .waitForDisplayed();