chore: add e2e tests for relationship management COMPASS-9479 (#7154)

Author: paula-stacho

package-lock.json

@@ -92,6 +92,8 @@ import {
   ComboboxGroup,
 } from '@leafygreen-ui/combobox';
 
+export { getLgIds as getDrawerIds } from './drawer';
+
 // 2. Wrap and make any changes/workaround to leafygreen components.
 const Icon = ({
   size,

packages/compass-components/src/components/leafygreen.tsx

@@ -498,10 +498,10 @@ export async function setConnectFormState(
   }
 
   if (state.connectionColor) {
-    await browser.selectOption(
-      Selectors.ConnectionFormConnectionColor,
-      colorValueToName(state.connectionColor)
-    );
+    await browser.selectOption({
+      selectSelector: Selectors.ConnectionFormConnectionColor,
+      optionText: colorValueToName(state.connectionColor),
+    });
   }
 
   if (state.connectionFavorite) {

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

@@ -0,0 +1,11 @@
+import type { ChainablePromiseElement } from 'webdriverio';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function getInputByLabel(
+  browser: CompassBrowser,
+  label: ChainablePromiseElement
+): Promise<ChainablePromiseElement> {
+  await label.waitForDisplayed();
+  const inputId = await label.getAttribute('for');
+  return browser.$(`[id="${inputId}"]`);
+}

packages/compass-e2e-tests/helpers/commands/get-input-by-label.ts

@@ -65,3 +65,4 @@ export * from './switch-pipeline-mode';
 export * from './read-first-document-content';
 export * from './read-stage-operators';
 export * from './click-confirmation-action';
+export * from './get-input-by-label';

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

@@ -14,7 +14,10 @@ export async function saveFavorite(
     Selectors.ConnectionFormConnectionName,
     favoriteName
   );
-  await browser.selectOption(Selectors.ConnectionFormConnectionColor, color);
+  await browser.selectOption({
+    selectSelector: Selectors.ConnectionFormConnectionColor,
+    optionText: color,
+  });
 
   await browser.clickVisible(Selectors.ConnectionModalSaveButton);
   await browser.$(Selectors.ConnectionModal).waitForExist({ reverse: true });

packages/compass-e2e-tests/helpers/commands/save-favorite.ts

@@ -1,14 +1,25 @@
+import type { ChainablePromiseElement } from 'webdriverio';
 import type { CompassBrowser } from '../compass-browser';
 
+type SelectOptionOptions = {
+  selectSelector: string | ChainablePromiseElement;
+} & (
+  | {
+      optionText: string;
+      optionSelector?: never;
+    }
+  | {
+      optionSelector: string;
+      optionText?: never;
+    }
+);
+
 export async function selectOption(
   browser: CompassBrowser,
-  // selector must match an element (like a div) that contains the leafygreen
-  // select we want to operate on
-  selector: string,
-  optionText: string
+  { selectSelector, optionText, optionSelector }: SelectOptionOptions
 ): Promise<void> {
   // click the field's button
-  const selectButton = browser.$(`${selector}`);
+  const selectButton = browser.$(selectSelector);
   await selectButton.waitForDisplayed();
   await selectButton.click();
 
@@ -26,9 +37,11 @@ export async function selectOption(
   await selectList.waitForDisplayed();
 
   // click the option
-  const optionSpan = selectList.$(`span=${optionText}`);
-  await optionSpan.scrollIntoView();
-  await optionSpan.click();
+  const option =
+    optionText !== undefined
+      ? selectList.$(`span=${optionText}`)
+      : selectList.$(optionSelector);
+  await browser.clickVisible(option);
 
   // wait for the list to go away again
   await selectList.waitForDisplayed({ reverse: true });

packages/compass-e2e-tests/helpers/commands/select-option.ts

@@ -1223,7 +1223,7 @@ function redact(value: string): string {
       continue;
     }
 
-    const quoted = `'${process.env[field] as string}'`;
+    const quoted = `'${process.env[field]}'`;
     // /regex/s would be ideal, but we'd have to escape the value to not be
     // interpreted as a regex.
     while (value.indexOf(quoted) !== -1) {

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

@@ -1,3 +1,5 @@
+import { getDrawerIds } from '@mongodb-js/compass-components';
+
 export type WorkspaceTabSelectorOptions = {
   id?: string;
   connectionName?: string;
@@ -1444,9 +1446,13 @@ export const CreateDataModelCollectionCheckbox = (
 ): string =>
   `${CreateDataModelModal} [data-testid="new-diagram-collection-checkbox-${collectionName}"]`;
 export const DataModelEditor = '[data-testid="diagram-editor-container"]';
+export const DataModelZoomOutButton = `${DataModelEditor} [aria-label="Minus Icon"]`;
+export const DataModelZoomInButton = `${DataModelEditor} [aria-label="Plus Icon"]`;
 export const DataModelPreview = `${DataModelEditor} [data-testid="model-preview"]`;
 export const DataModelPreviewCollection = (collectionId: string) =>
-  `${DataModelPreview} [data-nodeid="${collectionId}"]`;
+  `${DataModelPreview} [aria-roleDescription="node"][data-id="${collectionId}"]`;
+export const DataModelPreviewRelationship = (relationshipId: string) =>
+  `${DataModelPreview} [aria-roleDescription="edge"][data-id="${relationshipId}"]`;
 export const DataModelApplyEditor = `${DataModelEditor} [data-testid="apply-editor"]`;
 export const DataModelEditorApplyButton = `${DataModelApplyEditor} [data-testid="apply-button"]`;
 export const DataModelUndoButton = 'button[aria-label="Undo"]';
@@ -1468,3 +1474,29 @@ export const DataModelsListItem = (diagramName?: string) => {
 export const DataModelsListItemActions = (diagramName: string) =>
   `${DataModelsListItem(diagramName)} [aria-label="Show actions"]`;
 export const DataModelsListItemDeleteButton = `[data-action="delete"]`;
+export const DataModelAddRelationshipBtn = 'aria/Add relationship';
+export const DataModelNameInput = '//label[text()="Name"]';
+export const DataModelRelationshipLocalCollectionSelect =
+  '//label[text()="Local collection"]';
+export const DataModelRelationshipLocalFieldSelect =
+  '//label[text()="Local field"]';
+export const DataModelRelationshipLocalCardinalitySelect =
+  '//label[text()="Local cardinality"]';
+export const DataModelRelationshipForeignCollectionSelect =
+  '//label[text()="Foreign collection"]';
+export const DataModelRelationshipForeignFieldSelect =
+  '//label[text()="Foreign field"]';
+export const DataModelRelationshipForeignCardinalitySelect =
+  '//label[text()="Foreign cardinality"]';
+export const DataModelRelationshipCardinalityOption = (value: string) =>
+  `[role="option"][value="${value}"]`;
+export const DataModelCollectionRelationshipItem = (relationshipId: string) =>
+  `li[data-relationship-id="${relationshipId}"]`;
+export const DataModelCollectionRelationshipItemEdit = `[aria-label="Edit relationship"]`;
+export const DataModelCollectionRelationshipItemDelete = `[aria-label="Delete relationship"]`;
+
+// Side drawer
+export const SideDrawer = `[data-testid="${getDrawerIds().root}"]`;
+export const SideDrawerCloseButton = `[data-testid="${
+  getDrawerIds().closeButton
+}"]`;

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

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@electron/rebuild": "^4.0.1",
+    "@mongodb-js/compass-components": "^1.46.0",
     "@mongodb-js/compass-test-server": "^0.3.16",
     "@mongodb-js/connection-info": "^0.17.0",
     "@mongodb-js/eslint-config-compass": "^1.4.5",