[test] Improve the diagram DnD tests

Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

integration-tests/cypress/e2e/project/diagrams/graphical-dnd.cy.ts

@@ -0,0 +1,92 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { Project } from '../../../pages/Project';
+import { Studio } from '../../../usecases/Studio';
+import { Explorer } from '../../../workbench/Explorer';
+import { Details } from '../../../workbench/Details';
+import { Diagram } from '../../../workbench/Diagram';
+
+describe('Graphical-dnd', () => {
+  context('Given a studio template', () => {
+    let studioProjectId: string = '';
+    let domainName: string = '';
+
+    before(() =>
+      new Studio().createStudioProject().then((createdProjectData) => {
+        studioProjectId = createdProjectData.projectId;
+        new Project().visit(createdProjectData.projectId);
+        const explorer = new Explorer();
+        explorer.expand('DomainNewModel');
+        cy.get('[title="domain::Domain"]').then(($div) => {
+          domainName = $div.data().testid;
+          explorer.expand(`${domainName}`);
+        });
+      })
+    );
+
+    after(() => cy.deleteProject(studioProjectId));
+    context('When we create a new instance project', () => {
+      let instanceProjectId: string = '';
+
+      afterEach(() => cy.deleteProject(instanceProjectId));
+
+      it('Check graphical Drag and Drop', () => {
+        const explorer = new Explorer();
+        explorer.createObject('Entity2', 'Relation');
+        const details = new Details();
+        details.getCheckBox('Containment').check();
+        details.openReferenceWidgetOptions('Target Type');
+        details.selectReferenceWidgetOption('Entity1');
+
+        explorer.expand('ViewNewModel');
+        explorer.expand('View');
+        explorer.expand(`${domainName} Diagram Description`);
+        explorer.expand('Entity2 Node');
+        details.openReferenceWidgetOptions('Reused Child Node Descriptions');
+        details.selectReferenceWidgetOption('Entity1 Node');
+        explorer.createObject('NodePalette', 'Drop Node Tool');
+        explorer.select('Tool');
+        details.getTextField('Name').type('{selectAll}Drop Entity1 Tool{Enter}');
+        details.openReferenceWidgetOptions('Accepted Node Types');
+        details.selectReferenceWidgetOption('Entity1 Node');
+        explorer.createObject('Drop Entity1 Tool', 'Change Context');
+        details.getTextField('Expression').type('{selectAll}aql:targetElement{enter}');
+        explorer.createObject('aql:targetElement', 'Set Value');
+        details.getTextField('Feature Name').type('relation{Enter}');
+        details.getTextField('Value Expression').type('aql:droppedElement{Enter}');
+
+        const studio = new Studio();
+        studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
+          instanceProjectId = res.projectId;
+          new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram');
+        });
+
+        explorer.createObject('Root', 'Entity1s Entity1');
+        details.getTextField('Name').type('Entity1{Enter}');
+        explorer.createObject('Root', 'Entity2s Entity2');
+        details.getTextField('Name').type('Entity2{Enter}');
+
+        const diagram = new Diagram();
+        diagram.dragAndDropNode('Rectangle - Entity1', 'Rectangle - Entity2');
+        diagram.isNodeInside('Rectangle - Entity1', 'Rectangle - Entity2');
+
+        explorer.createObject('Root', 'Entity1s Entity1');
+        details.getTextField('Name').type('InvalidTarget{Enter}');
+
+        diagram.dragAndDropNode('Rectangle - Entity1', 'Rectangle - InvalidTarget');
+        // The target is invalid, the move is canceled
+        diagram.isNodeInside('Rectangle - Entity1', 'Rectangle - Entity2');
+      });
+    });
+  });
+});

integration-tests/cypress/pages/Projects.ts

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
  * https://www.eclipse.org/legal/epl-2.0/
  *
@@ -33,4 +33,8 @@ export class Projects {
     cy.getByTestId('delete').click();
     cy.getByTestId('delete-project').click();
   }
+
+  public goBackToTheHomepage(): void {
+    cy.get('[title="Back to the homepage"]').click();
+  }
 }

integration-tests/cypress/usecases/Studio.ts

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
  * https://www.eclipse.org/legal/epl-2.0/
  *
@@ -16,8 +16,22 @@ import { isCreateProjectSuccessPayload } from '../support/server/createProjectCo
 import { Explorer } from '../workbench/Explorer';
 import { Workbench } from '../workbench/Workbench';
 import { CreatedProjectData } from './Studio.types';
+import { isCreateProjectFromTemplateSuccessPayload } from '../support/server/createProjectFromTemplateCommand';
 
 export class Studio {
+  public createStudioProject(): Cypress.Chainable<CreatedProjectData> {
+    return cy.createProjectFromTemplate('studio-template').then((res) => {
+      const payload = res.body.data.createProjectFromTemplate;
+      if (isCreateProjectFromTemplateSuccessPayload(payload)) {
+        const projectId = payload.project.id;
+        const data: CreatedProjectData = { projectId };
+        return cy.wrap(data);
+      } else {
+        throw new Error(`The project studio has not been created`);
+      }
+    });
+  }
+
   public createProjectFromDomain(name: string, domain: string, entity: string): Cypress.Chainable<CreatedProjectData> {
     return cy.createProject(name).then((res) => {
       const payload = res.body.data.createProject;

integration-tests/cypress/workbench/Details.ts

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
  * https://www.eclipse.org/legal/epl-2.0/
  *
@@ -19,4 +19,16 @@ export class Details {
   public getTextField(label: string): Cypress.Chainable<JQuery<HTMLInputElement | HTMLTextAreaElement>> {
     return this.getDetailsView().find(`[data-testid="input-${label}"]`);
   }
+
+  public getCheckBox(label: string): Cypress.Chainable<JQuery<HTMLInputElement>> {
+    return this.getDetailsView().findByTestId(label).find('input');
+  }
+
+  public openReferenceWidgetOptions(label: string): void {
+    this.getDetailsView().findByTestId(label).find('button[title="Open"]').click();
+  }
+
+  public selectReferenceWidgetOption(option: string): void {
+    cy.getByTestId(`option-${option}`).should('exist').click();
+  }
 }

integration-tests/cypress/workbench/Diagram.ts

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
  * https://www.eclipse.org/legal/epl-2.0/
  *
@@ -27,4 +27,52 @@ export class Diagram {
   public getPalette(): Cypress.Chainable<JQuery<HTMLElement>> {
     return cy.getByTestId('Palette');
   }
+
+  public dragAndDropNode(sourceNodeTestId: string, targetNodeTestId: string): void {
+    cy.window().then((win) => {
+      cy.getByTestId('rf__wrapper')
+        .findByTestId(targetNodeTestId)
+        .then((node) => {
+          const target = node[0];
+          if (target) {
+            const { x, y } = target.getBoundingClientRect();
+            cy.getByTestId('rf__wrapper').findByTestId(sourceNodeTestId).trigger('mousedown', {
+              button: 0,
+              force: true,
+              view: win,
+            });
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(400); // the time needed to calculate compatible nodes
+            cy.getByTestId('rf__wrapper').findByTestId(sourceNodeTestId).trigger('mousemove', {
+              clientX: x,
+              clientY: y,
+              force: true,
+              view: win,
+            });
+            cy.getByTestId('rf__wrapper').findByTestId(sourceNodeTestId).trigger('mouseup', { view: win });
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(500); // the time needed to process the drop action
+          }
+        });
+    });
+  }
+
+  public isNodeInside(childNodeTestId: string, parentNodeTestId: string): void {
+    cy.window().then(() => {
+      cy.getByTestId(parentNodeTestId).then(($parentNode) => {
+        cy.getByTestId(childNodeTestId).then(($childNode) => {
+          const parentPosition = $parentNode[0]?.getBoundingClientRect();
+          const childPosition = $childNode[0]?.getBoundingClientRect();
+          if (parentPosition && childPosition) {
+            expect(childPosition.top >= parentPosition.top).to.be.true;
+            expect(childPosition.bottom <= parentPosition.bottom).to.be.true;
+            expect(childPosition.left >= parentPosition.left).to.be.true;
+            expect(childPosition.right <= parentPosition.right).to.be.true;
+          } else {
+            expect(false, 'Nodes to be tested do not exist');
+          }
+        });
+      });
+    });
+  }
 }

integration-tests/cypress/workbench/Explorer.ts

@@ -66,6 +66,11 @@ export class Explorer {
     cy.getByTestId('create-object').click();
   }
 
+  public select(treeItemLabel: string): void {
+    this.getTreeItemByLabel(treeItemLabel).should('exist');
+    this.getTreeItemByLabel(treeItemLabel).click();
+  }
+
   public createRepresentation(
     treeItemLabel: string,
     representationDescriptionName: string,