chore(e2e): un-skip import/export connections tests for multiple connections COMPASS-8007 (#5970)

* un-skip import/export connections tests for multiple connections

* shorten labels

Author: lerouxb

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

@@ -43,7 +43,7 @@ export * from './save-favorite';
 export * from './save-connection-string-as-favorite';
 export * from './select-connection';
 export * from './select-connection-menu-item';
-export * from './select-favorites-menu-item';
+export * from './select-connections-menu-item';
 export * from './open-settings-modal';
 export * from './wait-for-connection-result';
 export * from './screenshot';

packages/compass-e2e-tests/helpers/commands/select-connections-menu-item.ts

@@ -0,0 +1,32 @@
+import { TEST_MULTIPLE_CONNECTIONS } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function selectConnectionsMenuItem(
+  browser: CompassBrowser,
+  itemSelector: string
+) {
+  const Sidebar = TEST_MULTIPLE_CONNECTIONS
+    ? Selectors.Multiple
+    : Selectors.Single;
+
+  if (!TEST_MULTIPLE_CONNECTIONS) {
+    // In the single connection world the button only appears on hover
+
+    const selector = Selectors.Single.FavoriteConnectionsHeader;
+    await browser.$(selector).waitForDisplayed();
+
+    // workaround for weirdness in the ItemActionControls menu opener icon
+    await browser.clickVisible(Selectors.Single.ConnectionsTitle);
+
+    // Hover over an arbitrary other element to ensure that the second hover will
+    // actually be a fresh one. This otherwise breaks if this function is called
+    // twice in a row.
+    await browser.hover(`*:not(${selector}, ${selector} *)`);
+    await browser.hover(selector);
+  }
+
+  await browser.clickVisible(Sidebar.ConnectionsMenuButton);
+  await browser.$(Sidebar.ConnectionsMenu).waitForDisplayed();
+  await browser.clickVisible(itemSelector);
+}

packages/compass-e2e-tests/helpers/commands/select-favorites-menu-item.ts

@@ -229,14 +229,19 @@ export const Single = {
   SidebarNewConnectionButton: '[data-testid="new-connection-button"]',
   FavoriteConnections: '[data-testid="favorite-connection"]',
   FavoriteConnectionsHeader: '[data-testid="favorite-connections-list-header"]',
-  FavoriteConnectionsMenuButton: `[data-testid="favorite-connections-list-header"] button[title="Show actions"]`,
-  FavoriteConnectionsMenu: '[data-testid="favorites-menu"]',
   ConnectionMenu: '[data-testid="connection-menu"]',
   CopyConnectionStringItem: `[data-testid="connection-menu-copy-connection-string-action"]`,
   EditConnectionItem: `[data-testid="connection-menu-edit-connection-action"]`,
   DuplicateConnectionItem: `[data-testid="connection-menu-duplicate-connection-action"]`,
   RemoveConnectionItem: `[data-testid="connection-menu-remove-connection-action"]`,
   RecentConnections: '[data-testid="recent-connection"]',
+
+  ConnectionsMenuButton: `[data-testid="favorite-connections-list-header"] button[title="Show actions"]`,
+  ConnectionsMenu: '[data-testid="favorites-menu"]',
+  ExportConnectionsModalOpen:
+    '[data-testid="favorites-menu-export-saved-connections-action"]',
+  ImportConnectionsModalOpen:
+    '[data-testid="favorites-menu-import-saved-connections-action"]',
 };
 
 // Multiple Connections sidebar
@@ -264,6 +269,14 @@ export const Multiple = {
     '[data-testid="sidebar-navigation-item-actions-connection-toggle-favorite-action"]',
   DuplicateConnectionItem: `[data-testid="sidebar-navigation-item-actions-duplicate-connection-action"]`,
   RemoveConnectionItem: `[data-testid="sidebar-navigation-item-actions-remove-connection-action"]`,
+
+  ConnectionsMenuButton:
+    '[data-testid="connections-list-title-actions-show-actions"]',
+  ConnectionsMenu: '[data-testid="connections-list-title-actions"]',
+  ExportConnectionsModalOpen:
+    '[data-testid="connections-list-title-actions-export-saved-connections-action"]',
+  ImportConnectionsModalOpen:
+    '[data-testid="connections-list-title-actions-import-saved-connections-action"]',
 };
 
 // Rename Collection Modal
@@ -646,8 +659,6 @@ export const BulkDeleteSuccessToast = `[data-testid="toast-bulk-delete-toast"]`;
 export const BulkDeleteSuccessToastDismissButton = `[data-testid="toast-bulk-delete-toast"] [data-testid="lg-toast-dismiss-button"]`;
 
 // Connection import/export modals
-export const ExportConnectionsModalOpen =
-  '[data-testid="favorites-menu-export-saved-connections-action"]';
 export const ExportConnectionsModal = '[data-testid="connection-export-modal"]';
 export const ExportConnectionsSubmit = `${ExportConnectionsModal} [data-testid="submit-button"]`;
 export const ExportConnectionsPassphrase =
@@ -656,8 +667,6 @@ export const ExportConnectionsRemoveSecrets =
   '[data-testid="connection-export-remove-secrets"]';
 export const ExportConnectionsSucceededToast =
   '[data-testid="toast-compass-connection-import-export--export-succeeded"]';
-export const ImportConnectionsModalOpen =
-  '[data-testid="favorites-menu-import-saved-connections-action"]';
 export const ImportConnectionsModal = '[data-testid="connection-import-modal"]';
 export const ImportConnectionsPassphrase =
   '[data-testid="conn-import-export-passphrase-input"]';

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

@@ -49,11 +49,6 @@ describe('Connection Import / Export', function () {
 
   before(function () {
     skipForWeb(this, 'export connections not available in compass-web');
-
-    // TODO(COMPASS-8007): port this test file to multiple connections
-    if (TEST_MULTIPLE_CONNECTIONS) {
-      this.skip();
-    }
   });
 
   beforeEach(async function () {
@@ -309,6 +304,10 @@ describe('Connection Import / Export', function () {
 
     for (const variant of variants) {
       it(`supports exporting and importing connections in ${variant} mode`, async function () {
+        const Sidebar = TEST_MULTIPLE_CONNECTIONS
+          ? Selectors.Multiple
+          : Selectors.Single;
+
         {
           // Make sure file exists so that the file picker works. We could also do work
           // similar to what we do for collection data export, where we add special listeners
@@ -320,8 +319,8 @@ describe('Connection Import / Export', function () {
 
         // Open export modal
         {
-          await browser.selectFavoritesMenuItem(
-            Selectors.ExportConnectionsModalOpen
+          await browser.selectConnectionsMenuItem(
+            Sidebar.ExportConnectionsModalOpen
           );
           await browser.$(Selectors.ExportConnectionsModal).waitForDisplayed();
         }
@@ -382,8 +381,8 @@ describe('Connection Import / Export', function () {
 
         // Open import modal
         {
-          await browser.selectFavoritesMenuItem(
-            Selectors.ImportConnectionsModalOpen
+          await browser.selectConnectionsMenuItem(
+            Sidebar.ImportConnectionsModalOpen
           );
           await browser.$(Selectors.ImportConnectionsModal).waitForDisplayed();
         }

packages/compass-e2e-tests/tests/import-export-connections.test.ts

@@ -236,12 +236,12 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
         actions.push(
           {
             action: 'import-saved-connections',
-            label: 'Import saved connections',
+            label: 'Import connections',
             icon: 'Download',
           },
           {
             action: 'export-saved-connections',
-            label: 'Export saved connections',
+            label: 'Export connections',
             icon: 'Export',
           }
         );

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -217,8 +217,8 @@ describe('Multiple Connections Sidebar Component', function () {
           expect(screen.getByLabelText('Show actions')).to.be.visible;
 
           userEvent.click(screen.getByLabelText('Show actions'));
-          expect(screen.getByText('Import saved connections')).to.be.visible;
-          expect(screen.getByText('Export saved connections')).to.be.visible;
+          expect(screen.getByText('Import connections')).to.be.visible;
+          expect(screen.getByText('Export connections')).to.be.visible;
         });
       }
     );