[3754] Register view models in editing contexts at loading for e2e tests

Make possible to register view models in the loading editing context when the "test" profile is active Bug: #3754 Signed-off-by: Guillaume Coutable <[email protected]>
eclipse-sirius · Aug 29, 2024 · 47c75d7 · 47c75d7
1 parent 2540383
commit 47c75d7
Show file tree

Hide file tree

Showing 30 changed files with 1,570 additions and 130 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -104,7 +104,9 @@ A migration participant has been added to automatically keep compatible all diag
 - https://github.com/eclipse-sirius/sirius-web/issues/3776[#3776] [trees] Remove unwanted dependency from the reference widget in the explorer
 - https://github.com/eclipse-sirius/sirius-web/issues/3777[#3777] [sirius-web] Add support for any kind of object as semantic element in the tree representation
 - https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagram] Prevent edge from passing through another node
-- https://github.com/eclipse-sirius/sirius-web/issues/3754[#3754] [sirius-web] Activate cypress tests again without useless ones
+- https://github.com/eclipse-sirius/sirius-web/issues/3754[#3754] [sirius-web] Activate cypress tests again.
++ Make possible to register view models in the loading editing context when the "test" profile is active.
++ To activate the test profile add the value _test_ to the `SPRING_PROFILES_ACTIVE` environment variable.
 
 == v2024.7.0
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/diagram-label.cy.ts
@@ -11,59 +11,29 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { Project } from '../../../pages/Project';
-import { isCreateProjectFromTemplateSuccessPayload } from '../../../support/server/createProjectFromTemplateCommand';
 import { Studio } from '../../../usecases/Studio';
 import { Details } from '../../../workbench/Details';
 import { Diagram } from '../../../workbench/Diagram';
 import { Explorer } from '../../../workbench/Explorer';
 
 describe('Diagram - inside outside labels', () => {
-  context.skip('Given a view with inside label on rectangular node with none strategy', () => {
-    let studioProjectId: string = '';
-    let domainName: string = '';
-
-    before(() => {
-      cy.createProjectFromTemplate('studio-template').then((res) => {
-        const payload = res.body.data.createProjectFromTemplate;
-        if (isCreateProjectFromTemplateSuccessPayload(payload)) {
-          const projectId = payload.project.id;
-          studioProjectId = projectId;
-
-          const project = new Project();
-          project.visit(projectId);
-          project.disableDeletionConfirmationDialog();
-
-          const explorer = new Explorer();
-          const details = new Details();
-          explorer.getTreeItemByLabel('DomainNewModel').dblclick();
-          cy.get('[title="domain::Domain"]').then(($div) => {
-            domainName = $div.data().testid;
-            explorer.expand('ViewNewModel');
-            explorer.expand('View');
-            explorer.expand(`${domainName} Diagram Description`);
-            explorer.expand('Entity1 Node');
-            explorer.select('aql:self.name');
-            details.getRadioOption('Overflow Strategy', 'NONE').click();
-          });
-        }
-      });
-    });
-
-    after(() => cy.deleteProject(studioProjectId));
+  let domainName: string = 'diagramLabel';
+  context('Given a view with inside label on rectangular node with none strategy', () => {
     context('When we create a new instance project', () => {
       let instanceProjectId: string = '';
+      const diagramDescriptionName = `${domainName} - Fully display the inside label Diagram`;
+      const diagramTitle = 'Fully display the inside label Diagram';
 
       beforeEach(() => {
         const studio = new Studio();
         studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
           instanceProjectId = res.projectId;
 
-          new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram');
+          new Explorer().createRepresentation('Root', diagramDescriptionName, diagramTitle);
         });
       });
 
-      afterEach(() => cy.deleteProject(instanceProjectId));
+      // afterEach(() => cy.deleteProject(instanceProjectId));
 
       it('Then the node size increase to fully display the inside label', () => {
         const explorer = new Explorer();
@@ -74,21 +44,23 @@ describe('Diagram - inside outside labels', () => {
         diagram.fitToScreen();
         let initialWidth: number;
         let initialHeight: number;
-        diagram.getDiagramScale('diagram').then((scale) => {
-          diagram.getNodeCssValue('diagram', 'small', 'width').then((nodeWidth) => {
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'width').then((nodeWidth) => {
             initialWidth = nodeWidth / scale;
           });
-          diagram.getNodeCssValue('diagram', 'small', 'height').then((nodeHeight) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'height').then((nodeHeight) => {
             initialHeight = nodeHeight / scale;
           });
         });
         details.getTextField('Name').type('{selectAll}very large label one line fully displayed{enter}');
-        diagram.getDiagramScale('diagram').then((scale) => {
-          diagram.getNodeCssValue('diagram', 'very large label one line fully displayed', 'width').then((nodeWidth) => {
-            expect(nodeWidth / scale).to.greaterThan(initialWidth);
-          });
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
+          diagram
+            .getNodeCssValue(diagramTitle, 'very large label one line fully displayed', 'width')
+            .then((nodeWidth) => {
+              expect(nodeWidth / scale).to.greaterThan(initialWidth);
+            });
           diagram
-            .getNodeCssValue('diagram', 'very large label one line fully displayed', 'height')
+            .getNodeCssValue(diagramTitle, 'very large label one line fully displayed', 'height')
             .then((nodeHeight) => {
               expect(nodeHeight / scale).to.approximately(initialHeight, 2);
             });
@@ -97,47 +69,18 @@ describe('Diagram - inside outside labels', () => {
     });
   });
 
-  context.skip('Given a view with inside label on rectangular node with wrap strategy', () => {
-    let studioProjectId: string = '';
-    let domainName: string = '';
-
-    before(() => {
-      cy.createProjectFromTemplate('studio-template').then((res) => {
-        const payload = res.body.data.createProjectFromTemplate;
-        if (isCreateProjectFromTemplateSuccessPayload(payload)) {
-          const projectId = payload.project.id;
-          studioProjectId = projectId;
-
-          const project = new Project();
-          project.visit(projectId);
-          project.disableDeletionConfirmationDialog();
-
-          const explorer = new Explorer();
-          const details = new Details();
-          explorer.getTreeItemByLabel('DomainNewModel').dblclick();
-          cy.get('[title="domain::Domain"]').then(($div) => {
-            domainName = $div.data().testid;
-            explorer.expand('ViewNewModel');
-            explorer.expand('View');
-            explorer.expand(`${domainName} Diagram Description`);
-            explorer.expand('Entity1 Node');
-            explorer.select('aql:self.name');
-            details.getRadioOption('Overflow Strategy', 'WRAP').click();
-          });
-        }
-      });
-    });
-
-    after(() => cy.deleteProject(studioProjectId));
+  context('Given a view with inside label on rectangular node with wrap strategy', () => {
     context('When we create a new instance project', () => {
       let instanceProjectId: string = '';
+      const diagramDescriptionName = `${domainName} - Wrap the label without changing the node width`;
+      const diagramTitle = 'Wrap the label without changing the node width';
 
       beforeEach(() => {
         const studio = new Studio();
         studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
           instanceProjectId = res.projectId;
 
-          new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram');
+          new Explorer().createRepresentation('Root', diagramDescriptionName, diagramTitle);
         });
       });
 
@@ -152,23 +95,28 @@ describe('Diagram - inside outside labels', () => {
         diagram.fitToScreen();
         let initialWidth: number;
         let initialHeight: number;
-        diagram.getDiagramScale('diagram').then((scale) => {
-          diagram.getNodeCssValue('diagram', 'small', 'width').then((nodeWidth) => {
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'width').then((nodeWidth) => {
             initialWidth = nodeWidth / scale;
           });
-          diagram.getNodeCssValue('diagram', 'small', 'height').then((nodeHeight) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'height').then((nodeHeight) => {
             initialHeight = nodeHeight / scale;
           });
         });
         details.getTextField('Name').type('{selectAll}very large label one multi line after wrap{enter}');
-        diagram.getDiagramScale('diagram').then((scale) => {
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
           diagram
-            .getNodeCssValue('diagram', 'very large label one multi line after wrap', 'width')
+            .getNodeCssValue(diagramTitle, 'very large label one multi line after wrap', 'width')
             .then((nodeWidth) => {
               expect(nodeWidth / scale).to.approximately(initialWidth, 2);
+              diagram
+                .getLabelCssValue(diagramTitle, 'very large label one multi line after wrap', 'width')
+                .then((labelWidth) => {
+                  expect(labelWidth / scale).to.be.below(nodeWidth / scale);
+                });
             });
           diagram
-            .getNodeCssValue('diagram', 'very large label one multi line after wrap', 'height')
+            .getNodeCssValue(diagramTitle, 'very large label one multi line after wrap', 'height')
             .then((nodeHeight) => {
               expect(nodeHeight / scale).to.greaterThan(initialHeight);
             });
@@ -177,53 +125,24 @@ describe('Diagram - inside outside labels', () => {
     });
   });
 
-  context.skip('Given a view with inside label on rectangular node with ellipsis strategy', () => {
-    let studioProjectId: string = '';
-    let domainName: string = '';
-
-    before(() => {
-      cy.createProjectFromTemplate('studio-template').then((res) => {
-        const payload = res.body.data.createProjectFromTemplate;
-        if (isCreateProjectFromTemplateSuccessPayload(payload)) {
-          const projectId = payload.project.id;
-          studioProjectId = projectId;
-
-          const project = new Project();
-          project.visit(projectId);
-          project.disableDeletionConfirmationDialog();
-
-          const explorer = new Explorer();
-          const details = new Details();
-          explorer.getTreeItemByLabel('DomainNewModel').dblclick();
-          cy.get('[title="domain::Domain"]').then(($div) => {
-            domainName = $div.data().testid;
-            explorer.expand('ViewNewModel');
-            explorer.expand('View');
-            explorer.expand(`${domainName} Diagram Description`);
-            explorer.expand('Entity1 Node');
-            explorer.select('aql:self.name');
-            details.getRadioOption('Overflow Strategy', 'ELLIPSIS').click();
-          });
-        }
-      });
-    });
-
-    after(() => cy.deleteProject(studioProjectId));
+  context('Given a view with inside label on rectangular node with ellipsis strategy', () => {
     context('When we create a new instance project', () => {
       let instanceProjectId: string = '';
+      const diagramDescriptionName = `${domainName} - The label is truncated without changing the node width`;
+      const diagramTitle = 'The label is truncated without changing the node width';
 
       beforeEach(() => {
         const studio = new Studio();
         studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
           instanceProjectId = res.projectId;
 
-          new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram');
+          new Explorer().createRepresentation('Root', diagramDescriptionName, diagramTitle);
         });
       });
 
       afterEach(() => cy.deleteProject(instanceProjectId));
 
-      it('Then inside label has an ellipsis and the node width is not updated', () => {
+      it.skip('Then inside label has an ellipsis and the node width is not updated', () => {
         const explorer = new Explorer();
         const diagram = new Diagram();
         const details = new Details();
@@ -232,20 +151,23 @@ describe('Diagram - inside outside labels', () => {
         diagram.fitToScreen();
         let initialWidth: number;
         let initialHeight: number;
-        diagram.getDiagramScale('diagram').then((scale) => {
-          diagram.getNodeCssValue('diagram', 'small', 'width').then((nodeWidth) => {
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'width').then((nodeWidth) => {
             initialWidth = nodeWidth / scale;
           });
-          diagram.getNodeCssValue('diagram', 'small', 'height').then((nodeHeight) => {
+          diagram.getNodeCssValue(diagramTitle, 'small', 'height').then((nodeHeight) => {
             initialHeight = nodeHeight / scale;
           });
         });
         details.getTextField('Name').type('{selectAll}very large label with an ellipsis{enter}');
-        diagram.getDiagramScale('diagram').then((scale) => {
-          diagram.getNodeCssValue('diagram', 'very large label with an ellipsis', 'width').then((nodeWidth) => {
+        diagram.getDiagramScale(diagramTitle).then((scale) => {
+          diagram.getNodeCssValue(diagramTitle, 'very large label with an ellipsis', 'width').then((nodeWidth) => {
             expect(nodeWidth / scale).to.approximately(initialWidth, 2);
+            diagram.getLabelCssValue(diagramTitle, 'very large label with an ellipsis', 'width').then((labelWidth) => {
+              expect(labelWidth / scale).to.be.below(nodeWidth / scale);
+            });
           });
-          diagram.getNodeCssValue('diagram', 'very large label with an ellipsis', 'height').then((nodeHeight) => {
+          diagram.getNodeCssValue(diagramTitle, 'very large label with an ellipsis', 'height').then((nodeHeight) => {
             expect(nodeHeight / scale).to.approximately(initialHeight, 2);
           });
         });

diff --git a/integration-tests/cypress/usecases/Studio.ts b/integration-tests/cypress/usecases/Studio.ts
@@ -51,7 +51,7 @@ export class Studio {
   }
 
   public createProjectFromDomain(name: string, domain: string, entity: string): Cypress.Chainable<CreatedProjectData> {
-    return cy.createProject(name, [Studio.STUDIO_NATURE]).then((res) => {
+    return cy.createProject(name, []).then((res) => {
       const payload = res.body.data.createProject;
       if (isCreateProjectSuccessPayload(payload)) {
         const projectId = payload.project.id;

diff --git a/integration-tests/cypress/workbench/Diagram.ts b/integration-tests/cypress/workbench/Diagram.ts
@@ -29,6 +29,10 @@ export class Diagram {
     cy.wait(4000);
   }
 
+  public getLabel(diagramLabel: string, label: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.getDiagram(diagramLabel).findByTestId(`Label - ${label}`);
+  }
+
   public getNodes(diagramLabel: string, nodeLabel: string): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.getDiagram(diagramLabel).contains('.react-flow__node', nodeLabel);
   }
@@ -77,6 +81,14 @@ export class Diagram {
       });
   }
 
+  public getLabelCssValue(diagramLabel: string, label: string, cssValue: string): Cypress.Chainable<number> {
+    return this.getLabel(diagramLabel, label)
+      .invoke('css', cssValue)
+      .then((widthValue) => {
+        return parseInt(String(widthValue));
+      });
+  }
+
   public dragAndDropNode(sourceNodeTestId: string, targetNodeTestId: string): void {
     cy.window().then((win) => {
       cy.getByTestId('rf__wrapper')
@@ -161,7 +173,7 @@ export class Diagram {
     return roundedPathData;
   }
 
-  public getLabel(labelId: string): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.getByTestId(`Label - ${labelId}`);
-  }
+  // public getLabel(labelId: string): Cypress.Chainable<JQuery<HTMLElement>> {
+  //   return cy.getByTestId(`Label - ${labelId}`);
+  // }
 }
diff --git a/packages/sirius-web/backend/pom.xml b/packages/sirius-web/backend/pom.xml
@@ -42,5 +42,6 @@
 		<module>sirius-web</module>
 
 		<module>sirius-web-tests</module>
-	</modules>
+        <module>sirius-web-e2e-tests</module>
+    </modules>
 </project>
diff --git a/packages/sirius-web/backend/sirius-web-e2e-tests/.checkstyle b/packages/sirius-web/backend/sirius-web-e2e-tests/.checkstyle
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<fileset-config file-format-version="1.2.0" simple-config="true" sync-formatter="false">
+  <fileset name="all" enabled="true" check-config-name="Sirius" local="false">
+    <file-match-pattern match-pattern="." include-pattern="true"/>
+  </fileset>
+  <filter name="FilesFromPackage" enabled="true">
+    <filter-data value="src/main/resources"/>
+  </filter>
+</fileset-config>