Add test ensuring the right connect button is displayed

Author: kraenhansen

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

@@ -75,12 +75,12 @@ declare global {
   }
 }
 
-/*
-A helper so we can easily find all the tests we're skipping in compass-web.
-Reason is there so you can fill it in and have it show up in search results
-in a scannable manner. It is not being output at present because the tests will
-be logged as pending anyway.
-*/
+/**
+ * A helper so we can easily find all the tests we're skipping in compass-web.
+ * Reason is there so you can fill it in and have it show up in search results
+ * in a scannable manner. It is not being output at present because the tests will
+ * be logged as pending anyway.
+ */
 export function skipForWeb(
   test: Mocha.Runnable | Mocha.Context,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -244,8 +244,9 @@ export const ConenctionToastCancelConnectionButton =
 // Connections sidebar
 export const ConnectionsTitle = '[data-testid="connections-header"]';
 export const SidebarNewConnectionButton = '[data-action="add-new-connection"]';
-export const ConnectDropdownButton =
-  '[data-testid="sidebar-navigation-item-actions-connection-connect-action"] + button';
+export const ConnectButton =
+  '[data-testid="sidebar-navigation-item-actions-connection-connect-action"]';
+export const ConnectDropdownButton = `${ConnectButton} [data-testid="lg-split_button-trigger"]`;
 export const ConnectInNewWindowButton =
   '[data-action="connection-connect-in-new-window"]';
 export const ConnectionMenu = '[data-testid="sidebar-navigation-item-actions"]';
@@ -372,9 +373,7 @@ export const sidebarConnectionButton = (connectionName: string): string => {
 export const sidebarConnectionDropdownButton = (
   connectionName: string
 ): string => {
-  return `${sidebarConnection(connectionName)} ${
-    Multiple.ConnectDropdownButton
-  }`;
+  return `${sidebarConnection(connectionName)} ${ConnectDropdownButton}`;
 };
 
 export const sidebarConnectionActionButton = (

packages/compass-e2e-tests/tests/connection.test.ts

@@ -20,7 +20,10 @@ import {
 import type { Compass } from '../helpers/compass';
 import type { ConnectFormState } from '../helpers/connect-form-state';
 import * as Selectors from '../helpers/selectors';
-import { DEFAULT_CONNECTION_NAMES } from '../helpers/test-runner-context';
+import {
+  DEFAULT_CONNECTION_NAMES,
+  isTestingWeb,
+} from '../helpers/test-runner-context';
 
 async function disconnect(browser: CompassBrowser) {
   try {
@@ -660,6 +663,7 @@ describe('Connect in a new window', () => {
 
   it('can connect in new window', async function (this) {
     skipForWeb(this, 'connecting in new window is not supported on web');
+
     const connectionName = DEFAULT_CONNECTION_NAMES[0];
     const connectionSelector = Selectors.sidebarConnection(connectionName);
     await browser.hover(connectionSelector);
@@ -683,7 +687,17 @@ describe('Connect in a new window', () => {
     });
   });
 
-  // TODO: Add a test for we to ensure the SplitButton isn't visible on Web
+  it('shows correct connect button', async function (this) {
+    const connectionName = DEFAULT_CONNECTION_NAMES[0];
+    const connectionSelector = Selectors.sidebarConnection(connectionName);
+    await browser.hover(connectionSelector);
+
+    const connectionElement = browser.$(connectionSelector);
+    await connectionElement.$(Selectors.ConnectButton).waitForDisplayed();
+    await connectionElement.$(Selectors.ConnectDropdownButton).waitForExist({
+      reverse: isTestingWeb(),
+    });
+  });
 });
 
 describe('Connection form', function () {