fixup: e2e test drag node for clickability

Author: Anemy

packages/compass-e2e-tests/tests/data-modeling-tab.test.ts

@@ -234,15 +234,118 @@ async function dragNode(
       y: Math.round(startPosition.y + 15), // we're aiming for the header area (top of the node)
     })
     .down({ button: 0 }) // Left mouse button
-    .move({ duration: 1000, origin: 'pointer', ...pointerActionMoveParams })
-    .pause(1000)
-    .move({ duration: 1000, origin: 'pointer', ...pointerActionMoveParams })
+    .move({ duration: 250, origin: 'pointer', ...pointerActionMoveParams })
+    .pause(250)
+    .move({ duration: 250, origin: 'pointer', ...pointerActionMoveParams })
     .up({ button: 0 }) // Release the left mouse button
     .perform();
   await browser.waitForAnimations(node);
   return startPosition;
 }
 
+/**
+ * Drags the diagram view to show the specified element until it's clickable and clicks.
+ * This is useful when we're trying to interact with an element that may be partially outside
+ * of the view. Note that there isn't any check that a node is covering the space that will be
+ * dragged, so it can end up dragging nodes unintentionally.
+ **/
+async function dragDiagramToShowAndClick(
+  browser: CompassBrowser,
+  selector: string
+) {
+  const targetElement = browser.$(selector);
+
+  let elementPosition = await targetElement.getLocation();
+  let elementSize = await targetElement.getSize();
+
+  const DRAG_INCREMENT = 50;
+
+  let diagramBackgroundPosition = await browser
+    .$(Selectors.DataModelPreview)
+    .getLocation();
+
+  function getDistanceToElementCenter() {
+    return (
+      Math.floor(
+        elementPosition.x +
+          elementSize.width / 2 -
+          (diagramBackgroundPosition.x + 1)
+      ),
+      Math.floor(
+        elementPosition.y +
+          elementSize.height / 2 -
+          (diagramBackgroundPosition.y + 1)
+      )
+    );
+  }
+
+  async function attemptClick() {
+    try {
+      // In the diagram the buttons on nodes will return true for `isClickable` and `isDisplayed`
+      // withinViewport even when it errors on click. So we have to attempt a click to be sure.
+      await targetElement.click();
+    } catch {
+      return false;
+    }
+
+    return true;
+  }
+
+  while (
+    !(await attemptClick()) &&
+    getDistanceToElementCenter() > DRAG_INCREMENT * 4
+  ) {
+    elementPosition = await targetElement.getLocation();
+    elementSize = await targetElement.getSize();
+
+    diagramBackgroundPosition = await browser
+      .$(Selectors.DataModelPreview)
+      .getLocation();
+
+    // Start a bit away from the origin 5 to give space for the drag to happen.
+    const baseX = Math.round(diagramBackgroundPosition.x + DRAG_INCREMENT + 5);
+    const baseY = Math.round(diagramBackgroundPosition.y + DRAG_INCREMENT + 5);
+
+    const moveX =
+      Math.abs(diagramBackgroundPosition.x - elementPosition.x) >
+      DRAG_INCREMENT * 2
+        ? Math.round(
+            DRAG_INCREMENT *
+              (diagramBackgroundPosition.x > elementPosition.x ? 1 : -1)
+          )
+        : 0;
+    const moveY =
+      Math.abs(diagramBackgroundPosition.y - elementPosition.y) >
+      DRAG_INCREMENT * 2
+        ? Math.round(
+            DRAG_INCREMENT *
+              (diagramBackgroundPosition.y > elementPosition.y ? 1 : -1)
+          )
+        : 0;
+
+    await browser
+      .action('pointer')
+      .move({
+        x: baseX,
+        y: baseY,
+      })
+      .down({ button: 0 }) // Left mouse button.
+      .pause(250)
+      .move({
+        duration: 250,
+        origin: 'pointer',
+        x: moveX,
+        y: moveY,
+      })
+      .up({ button: 0 }) // Release the left mouse button.
+      .perform();
+
+    await browser.waitForAnimations(Selectors.DataModelPreview);
+  }
+
+  return elementPosition;
+}
+
 describe('Data Modeling tab', function () {
   let compass: Compass;
   let browser: CompassBrowser;
@@ -851,10 +954,13 @@ describe('Data Modeling tab', function () {
         .getText();
       expect(collectionText).to.not.include('field-1');
 
-      // Add two fields to the collection.
-      await browser.clickVisible(
+      // Drag the node into view to ensure the add nested field button is visible.
+      await dragDiagramToShowAndClick(
+        browser,
         Selectors.DataModelCollectionAddFieldBtn('test.testCollection-one')
       );
+
+      // Add two fields to the collection.
       await browser.clickVisible(
         Selectors.DataModelCollectionAddFieldBtn('test.testCollection-one')
       );
@@ -897,15 +1003,8 @@ describe('Data Modeling tab', function () {
       await browser.$(Selectors.SideDrawer).click(); // Unfocus the input.
 
       // Drag the node into view to ensure the add nested field button is visible.
-      await dragNode(
+      await dragDiagramToShowAndClick(
         browser,
-        Selectors.DataModelPreviewCollection('test.testCollection-one'),
-        { x: -200, y: -200 }
-      );
-      await browser.waitForAnimations(dataModelEditor);
-
-      // Add two new fields to the new object.
-      await browser.clickVisible(
         Selectors.DataModelAddNestedFieldBtn('test.testCollection-one', [
           'renamedField',
         ])