e2e test

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -357,7 +357,15 @@ const DiagramEditor: React.FunctionComponent<{
               maxZoom: 1,
               minZoom: 0.25,
             }}
+            onSelectionChange={({ nodes }) => {
+              console.log('SELECTION CHANGE', nodes);
+            }}
+            onNodeDrag={(evt, node) => {
+              console.log('NODE DRAG', node);
+              // onMoveCollection(node.id, [node.position.x, node.position.y]);
+            }}
             onNodeDragStop={(evt, node) => {
+              console.log('NODE DRAG STOP', node);
               onMoveCollection(node.id, [node.position.x, node.position.y]);
             }}
             onEdgeClick={(evt, edge) => {

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

@@ -1442,6 +1442,8 @@ export const CreateDataModelCollectionCheckbox = (
   `${CreateDataModelModal} [data-testid="new-diagram-collection-checkbox-${collectionName}"]`;
 export const DataModelEditor = '[data-testid="diagram-editor-container"]';
 export const DataModelPreview = `${DataModelEditor} [data-testid="model-preview"]`;
+export const DataModelPreviewCollection = (collectionId: string) =>
+  `${DataModelPreview} [data-nodeid="${collectionId}"]`;
 export const DataModelApplyEditor = `${DataModelEditor} [data-testid="apply-editor"]`;
 export const DataModelEditorApplyButton = `${DataModelApplyEditor} [data-testid="apply-button"]`;
 export const DataModelUndoButton = 'button[aria-label="Undo"]';

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

@@ -17,7 +17,6 @@ import {
   waitForFileDownload,
 } from '../helpers/downloads';
 import { readFileSync } from 'fs';
-import { first } from 'lodash';
 
 interface Node {
   id: string;
@@ -122,7 +121,7 @@ describe('Data Modeling tab', function () {
     }
   });
 
-  it.only('creates a new data model using an existing connection', async function () {
+  it('creates a new data model using an existing connection', async function () {
     const dataModelName = 'Test Data Model';
     await setupDiagram(browser, {
       diagramName: dataModelName,
@@ -143,43 +142,55 @@ describe('Data Modeling tab', function () {
       x: Math.round(nodes[0].position.x),
       y: Math.round(nodes[0].position.y),
     };
-    console.log('Before applying change to the model');
-    console.log({ originalPosition });
-    await browser.actions([
-      browser
-        .action('pointer')
-        .move({
-          origin: dataModelEditor,
-          ...originalPosition,
-        })
-        .down()
-        .move(100, 0) // Move right by 100 pixels
-        .up(),
-    ]);
-    await browser.waitForAnimations(dataModelEditor);
 
-    const newPosition = { x: originalPosition.x + 100, y: originalPosition.y };
-    console.log('After applying change to the model');
+    // react flow uses its own coordinate system,
+    // so we get the node element location for the pointer action
+    const startPosition = await browser
+      .$(Selectors.DataModelPreviewCollection('test.testCollection1'))
+      .getLocation();
+
+    // This should move the node 20px to the right but it just moves it "somewhere else"
+    // That's the best I could do
+    await browser
+      .action('pointer')
+      .move({
+        x: Math.round(startPosition.x) + 10,
+        y: Math.round(startPosition.y) + 10,
+      })
+      .down({ button: 0 }) // Left mouse button
+      .move({ x: 10, y: 0, duration: 100 })
+      .pause(1000)
+      .move({ x: 10, y: 0, duration: 100 })
+      .up({ button: 0 }) // Release the left mouse button
+      .perform();
+    await browser.waitForAnimations(dataModelEditor);
 
-    // Verify that the model is updated
+    // Check that the first node has moved and mark the new position
     nodes = await getDiagramNodes(browser);
     expect(nodes).to.have.lengthOf(2);
-    expect(nodes[0].position).to.equal(newPosition);
+    expect(Math.round(nodes[0].position.x)).not.to.equal(originalPosition.x);
+    expect(Math.round(nodes[0].position.y)).not.to.equal(originalPosition.y);
+    const newPosition = {
+      x: Math.round(nodes[0].position.x),
+      y: Math.round(nodes[0].position.y),
+    };
 
     // Undo the change
     await browser.clickVisible(Selectors.DataModelUndoButton);
     await browser.waitForAnimations(dataModelEditor);
     nodes = await getDiagramNodes(browser);
     expect(nodes).to.have.lengthOf(2);
-    expect(nodes[0].position).to.equal(originalPosition);
+    expect(Math.round(nodes[0].position.x)).to.equal(originalPosition.x);
+    expect(Math.round(nodes[0].position.y)).to.equal(originalPosition.y);
 
     // Redo the change
     await browser.waitForAriaDisabled(Selectors.DataModelRedoButton, false);
     await browser.clickVisible(Selectors.DataModelRedoButton);
     await browser.waitForAnimations(dataModelEditor);
     nodes = await getDiagramNodes(browser);
     expect(nodes).to.have.lengthOf(2);
-    expect(nodes[0].position).to.equal(newPosition);
+    expect(Math.round(nodes[0].position.x)).to.equal(newPosition.x);
+    expect(Math.round(nodes[0].position.y)).to.equal(newPosition.y);
 
     // Open a new tab
     await browser.openNewTab();
@@ -191,7 +202,8 @@ describe('Data Modeling tab', function () {
     // Verify that the diagram has the latest changes
     nodes = await getDiagramNodes(browser);
     expect(nodes).to.have.lengthOf(2);
-    expect(nodes[0].position).to.equal(newPosition);
+    expect(Math.round(nodes[0].position.x)).to.equal(newPosition.x);
+    expect(Math.round(nodes[0].position.y)).to.equal(newPosition.y);
 
     // Open a new tab
     await browser.openNewTab();