[1062] Add Cypress tests

Bug: #1062 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Nov 18, 2024 · a2c4678 · a2c4678
1 parent 34e0712
commit a2c4678
Show file tree

Hide file tree

Showing 17 changed files with 167 additions and 97 deletions.
diff --git a/integration-tests/cypress/e2e/project/details/widget-reference.cy.ts b/integration-tests/cypress/e2e/project/details/widget-reference.cy.ts
@@ -31,9 +31,9 @@ describe('Details - Widget-reference', () => {
 
     it('then diagnostic messages are display on widget reference', () => {
       const explorer = new Explorer();
-      explorer.expand('Flow');
-      explorer.expand('NewSystem');
-      explorer.expand('DataSource1');
+      explorer.expandWithDoubleClick('Flow');
+      explorer.expandWithDoubleClick('NewSystem');
+      explorer.expandWithDoubleClick('DataSource1');
       explorer.select('standard');
       const details = new Details();
       details.getReferenceWidget('Target').find('p[class*="Mui-error"]').should('not.exist');
@@ -64,9 +64,9 @@ describe('Details - Widget-reference', () => {
     after(() => cy.deleteProject(studioProjectId));
     it('check widget reference click navigation to filter tree item', () => {
       const explorer = new Explorer();
-      explorer.expand(domainName);
-      explorer.expand('Entity1');
-      explorer.expand('Entity2');
+      explorer.expandWithDoubleClick(domainName);
+      explorer.expandWithDoubleClick('Entity1');
+      explorer.expandWithDoubleClick('Entity2');
       explorer.select('linkedTo');
       cy.getByTestId('reference-value-Entity2').should('exist');
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/arrange-all.cy.ts b/integration-tests/cypress/e2e/project/diagrams/arrange-all.cy.ts
@@ -26,8 +26,8 @@ describe('Diagram - arrange all', () => {
         project.visit(projectId);
         project.disableDeletionConfirmationDialog();
         const explorer = new Explorer();
-        explorer.expand('Flow');
-        explorer.expand('NewSystem');
+        explorer.expandWithDoubleClick('Flow');
+        explorer.expandWithDoubleClick('NewSystem');
         explorer.selectRepresentation('Topography');
       });
     });
@@ -37,7 +37,7 @@ describe('Diagram - arrange all', () => {
     it('Check arrange all do not marked node as resizedByUser', () => {
       const diagram = new Diagram();
       const explorer = new Explorer();
-      explorer.expand('CompositeProcessor1');
+      explorer.expandWithDoubleClick('CompositeProcessor1');
       explorer.rename('Processor1', 'CPU');
       diagram.getNodes('Topography', 'CPU').should('exist');
       diagram.arrangeAll();

diff --git a/integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts b/integration-tests/cypress/e2e/project/diagrams/collapse.cy.ts
@@ -36,23 +36,23 @@ describe('Diagram - collapsible node', () => {
 
           const explorer = new Explorer();
           const details = new Details();
-          explorer.expand('DomainNewModel');
+          explorer.expandWithDoubleClick('DomainNewModel');
           cy.get('[title="domain::Domain"]').then(($div) => {
             domainName = $div.data().testid;
-            explorer.expand(domainName);
+            explorer.expandWithDoubleClick(domainName);
             explorer.createObject('Entity1', 'relations-Relation');
             details.getCheckBox('Containment').check();
             details.openReferenceWidgetOptions('Target Type');
             details.selectReferenceWidgetOption('Entity2');
-            explorer.expand('ViewNewModel');
-            explorer.expand('View');
-            explorer.expand(`${domainName} Diagram Description`);
+            explorer.expandWithDoubleClick('ViewNewModel');
+            explorer.expandWithDoubleClick('View');
+            explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
             explorer.select('Entity1 Node');
             details.getCheckBox('Collapsible').check();
             details.openReferenceWidgetOptions('Reused Child Node Descriptions');
             details.selectReferenceWidgetOption('Entity2 Node');
-            explorer.expand('Entity1 Node');
-            explorer.expand('aql:self.name');
+            explorer.expandWithDoubleClick('Entity1 Node');
+            explorer.expandWithDoubleClick('aql:self.name');
             explorer.select('InsideLabelStyle');
             details.getCheckBox('With Header').check();
             details.getCheckBox('Display Header Separator').check();

diff --git a/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts
@@ -38,11 +38,11 @@ describe('Diagram - Direct edit label', () => {
           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.expand('NodePalette');
+            explorer.expandWithDoubleClick('ViewNewModel');
+            explorer.expandWithDoubleClick('View');
+            explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
+            explorer.expandWithDoubleClick('Entity1 Node');
+            explorer.expandWithDoubleClick('NodePalette');
             explorer.delete('Edit Label');
             explorer.select('LinkedTo Edge');
             new Details().getTextField('Center Label Expression').type('Edge center{enter}');

diff --git a/integration-tests/cypress/e2e/project/diagrams/drop-on-diagram.cy.ts b/integration-tests/cypress/e2e/project/diagrams/drop-on-diagram.cy.ts
@@ -34,7 +34,7 @@ describe('/projects/:projectId/edit - Diagram', () => {
     // We should look again at this test with a more recent cypress version.
     it.skip('Then we can create views by Drag and Drop on an unsynchronized diagram', () => {
       const explorer = new Explorer();
-      explorer.expand('robot');
+      explorer.expandWithDoubleClick('robot');
       explorer.createRepresentation('System', 'Topography unsynchronized', 'diagram');
 
       const diagram = new Diagram();

diff --git a/integration-tests/cypress/e2e/project/diagrams/edges.cy.ts b/integration-tests/cypress/e2e/project/diagrams/edges.cy.ts
@@ -27,20 +27,20 @@ describe('Diagram - edges', () => {
         studioProjectId = createdProjectData.projectId;
         new Project().visit(createdProjectData.projectId);
         const explorer = new Explorer();
-        explorer.expand('DomainNewModel');
+        explorer.expandWithDoubleClick('DomainNewModel');
         cy.get('[title="domain::Domain"]').then(($div) => {
           domainName = $div.data().testid;
-          explorer.expand(`${domainName}`);
+          explorer.expandWithDoubleClick(`${domainName}`);
           explorer.createObject('Entity1', 'relations-Relation');
           const details = new Details();
           details.getCheckBox('Containment').check();
           details.openReferenceWidgetOptions('Target Type');
           details.selectReferenceWidgetOption('Entity2');
 
-          explorer.expand('ViewNewModel');
-          explorer.expand('View');
-          explorer.expand(`${domainName} Diagram Description`);
-          explorer.expand('Entity1 Node');
+          explorer.expandWithDoubleClick('ViewNewModel');
+          explorer.expandWithDoubleClick('View');
+          explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
+          explorer.expandWithDoubleClick('Entity1 Node');
           details.openReferenceWidgetOptions('Reused Child Node Descriptions');
           details.selectReferenceWidgetOption('Entity2 Node');
           details.getTextField('Default Width Expression').type('290{enter}');
@@ -102,14 +102,14 @@ describe('Diagram - edges', () => {
         project.disableDeletionConfirmationDialog();
         const explorer = new Explorer();
         const details = new Details();
-        explorer.expand('DomainNewModel');
+        explorer.expandWithDoubleClick('DomainNewModel');
         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.expandWithDoubleClick('ViewNewModel');
+          explorer.expandWithDoubleClick('View');
+          explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
+          explorer.expandWithDoubleClick('Entity1 Node');
           details.getTextField('Default Width Expression').type('300{enter}');
           details.getTextField('Default Height Expression').type('50{enter}');
           explorer.delete('RectangularNodeStyleDescription');
@@ -180,7 +180,7 @@ describe('Diagram - edges', () => {
         project.disableDeletionConfirmationDialog();
         const explorer = new Explorer();
         const details = new Details();
-        explorer.expand('DomainNewModel');
+        explorer.expandWithDoubleClick('DomainNewModel');
         cy.get('[title="domain::Domain"]').then(($div) => {
           domainName = $div.data().testid;
           explorer.createObject(domainName, 'Entity');
@@ -201,10 +201,10 @@ describe('Diagram - edges', () => {
           details.selectReferenceWidgetOption('Entity2');
           details.getTextField('Name').type('{selectAll}entity2{enter}');
 
-          explorer.expand('ViewNewModel');
-          explorer.expand('View');
-          explorer.expand(`${domainName} Diagram Description`);
-          explorer.expand('Entity1 Node');
+          explorer.expandWithDoubleClick('ViewNewModel');
+          explorer.expandWithDoubleClick('View');
+          explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
+          explorer.expandWithDoubleClick('Entity1 Node');
           details.openReferenceWidgetOptions('Reused Child Node Descriptions');
           details.selectReferenceWidgetOption('Entity2 Node');
           details.getTextField('Default Width Expression').type('300{enter}');

diff --git a/integration-tests/cypress/e2e/project/diagrams/graphical-dnd.cy.ts b/integration-tests/cypress/e2e/project/diagrams/graphical-dnd.cy.ts
@@ -27,10 +27,10 @@ describe.skip('Diagram - Graphical-dnd', () => {
         studioProjectId = createdProjectData.projectId;
         new Project().visit(createdProjectData.projectId);
         const explorer = new Explorer();
-        explorer.expand('DomainNewModel');
+        explorer.expandWithDoubleClick('DomainNewModel');
         cy.get('[title="domain::Domain"]').then(($div) => {
           domainName = $div.data().testid;
-          explorer.expand(`${domainName}`);
+          explorer.expandWithDoubleClick(`${domainName}`);
         });
       })
     );
@@ -49,10 +49,10 @@ describe.skip('Diagram - Graphical-dnd', () => {
         details.openReferenceWidgetOptions('Target Type');
         details.selectReferenceWidgetOption('Entity1');
 
-        explorer.expand('ViewNewModel');
-        explorer.expand('View');
-        explorer.expand(`${domainName} Diagram Description`);
-        explorer.expand('Entity2 Node');
+        explorer.expandWithDoubleClick('ViewNewModel');
+        explorer.expandWithDoubleClick('View');
+        explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
+        explorer.expandWithDoubleClick('Entity2 Node');
         details.openReferenceWidgetOptions('Reused Child Node Descriptions');
         details.selectReferenceWidgetOption('Entity1 Node');
         explorer.createObject('NodePalette', 'dropNodeTool-DropNodeTool');

diff --git a/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts b/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts
@@ -25,7 +25,7 @@ describe('Diagram - group palette', () => {
         new Project().visit(projectId);
       });
       const explorer = new Explorer();
-      explorer.expand('robot');
+      explorer.expandWithDoubleClick('robot');
       explorer.createRepresentation('System', 'Topography', 'diagram');
     });
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/node-aspect-ratio.cy.ts b/integration-tests/cypress/e2e/project/diagrams/node-aspect-ratio.cy.ts
@@ -26,10 +26,10 @@ describe('Diagram - Node aspect ratio', () => {
         studioProjectId = createdProjectData.projectId;
         new Project().visit(createdProjectData.projectId);
         const explorer = new Explorer();
-        explorer.expand('DomainNewModel');
+        explorer.expandWithDoubleClick('DomainNewModel');
         cy.get('[title="domain::Domain"]').then(($div) => {
           domainName = $div.data().testid;
-          explorer.expand(`${domainName}`);
+          explorer.expandWithDoubleClick(`${domainName}`);
         });
       })
     );
@@ -42,9 +42,9 @@ describe('Diagram - Node aspect ratio', () => {
 
       it('Then node default size is used for node creation', () => {
         const explorer = new Explorer();
-        explorer.expand('ViewNewModel');
-        explorer.expand('View');
-        explorer.expand(`${domainName} Diagram Description`);
+        explorer.expandWithDoubleClick('ViewNewModel');
+        explorer.expandWithDoubleClick('View');
+        explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
         explorer.select('Entity1 Node');
         const details = new Details();
         details.getTextField('Default Width Expression').type('200');
@@ -97,9 +97,9 @@ describe('Diagram - Node aspect ratio', () => {
           details.openReferenceWidgetOptions('Target Type');
           details.selectReferenceWidgetOption('SubNode');
 
-          explorer.expand('ViewNewModel');
-          explorer.expand('View');
-          explorer.expand(`${domainName} Diagram Description`);
+          explorer.expandWithDoubleClick('ViewNewModel');
+          explorer.expandWithDoubleClick('View');
+          explorer.expandWithDoubleClick(`${domainName} Diagram Description`);
 
           explorer.createObject(`${domainName} Diagram Description`, 'nodeDescriptions-NodeDescription');
 

diff --git a/integration-tests/cypress/e2e/project/explorer/explorer-dnd.cy.ts b/integration-tests/cypress/e2e/project/explorer/explorer-dnd.cy.ts
@@ -31,17 +31,17 @@ describe('Explorer', () => {
     context('When we drop tree item in the explorer', () => {
       it('Then the object are moved', () => {
         const explorer = new Explorer();
-        explorer.expand('robot');
-        explorer.expand('System');
-        explorer.expand('Central_Unit');
+        explorer.expandWithDoubleClick('robot');
+        explorer.expandWithDoubleClick('System');
+        explorer.expandWithDoubleClick('Central_Unit');
         explorer.getTreeItemByLabel('Radar').should('not.exist');
 
-        explorer.expand('CompositeProcessor');
+        explorer.expandWithDoubleClick('CompositeProcessor');
         const dataTransfer = new DataTransfer();
         explorer.dragTreeItem('Radar', dataTransfer);
         explorer.dopOnTreeItem('Central_Unit', dataTransfer);
-        explorer.collapse('CompositeProcessor');
-        
+        explorer.collapseWithDoubleClick('CompositeProcessor');
+
         explorer.getTreeItemByLabel('Radar').should('exist');
       });
     });

diff --git a/integration-tests/cypress/e2e/project/explorer/explorer-selection.cy.ts b/integration-tests/cypress/e2e/project/explorer/explorer-selection.cy.ts
@@ -26,7 +26,7 @@ describe('/projects/:projectId/edit - Tree toolbar', () => {
         new Project().visit(projectId);
       });
       const explorer = new Explorer();
-      explorer.expand('robot');
+      explorer.expandWithDoubleClick('robot');
       explorer.createRepresentation('System', 'Topography', 'diagram');
 
       new Diagram().getNodes('diagram', 'Wifi').should('exist');

diff --git a/integration-tests/cypress/e2e/project/explorer/explorer.cy.ts b/integration-tests/cypress/e2e/project/explorer/explorer.cy.ts
@@ -30,15 +30,79 @@ describe('Explorer', () => {
     afterEach(() => cy.deleteProject(projectId));
 
     context('When we interact with the explorer', () => {
-      it.skip('Then we can navigate through the explorer using keyboard arrows', () => {
+      it('Then we can expand and collapse an item with double click', () => {
         const explorer = new Explorer();
-        explorer.expand('robot');
+        explorer.expandWithDoubleClick('robot');
         explorer.getTreeItemByLabel('System').should('exist');
 
-        explorer.expand('Robot');
+        explorer.expandWithDoubleClick('System');
         explorer.getTreeItemByLabel('Central_Unit').should('exist');
-        explorer.getTreeItemByLabel('CaptureSubSystem').should('exist');
+        explorer.getTreeItemByLabel('CompositeProcessor').should('exist');
         explorer.getTreeItemByLabel('Wifi').should('exist');
+
+        explorer.collapseWithDoubleClick('System');
+        explorer.getTreeItemByLabel('Central_Unit').should('not.exist');
+        explorer.getTreeItemByLabel('CompositeProcessor').should('not.exist');
+        explorer.getTreeItemByLabel('Wifi').should('not.exist');
+      });
+
+      it('Then we can expand and collapse an item without selecting it by clicking on the toggle', () => {
+        const explorer = new Explorer();
+        explorer.expandWithDoubleClick('robot');
+        explorer.getTreeItemByLabel('System').should('exist');
+        explorer.select('robot');
+        explorer.getSelectedTreeItems().should('have.length', 1);
+        explorer.getSelectedTreeItems().contains('robot').should('exist');
+
+        // Expand 'System' using the toggle
+        explorer.toggle('System');
+        // Check that its children are visible (i.e. it is correcly expanded)
+        explorer.getTreeItemByLabel('Central_Unit').should('exist');
+        explorer.getTreeItemByLabel('CompositeProcessor').should('exist');
+        explorer.getTreeItemByLabel('Wifi').should('exist');
+        // Check that this has not changed the selection (still on 'robot')
+        explorer.getSelectedTreeItems().should('have.length', 1);
+        explorer.getSelectedTreeItems().contains('robot').should('exist');
+
+        // Collapse 'System' using the toggle
+        explorer.toggle('System');
+        // Check that its children are no longer visible (i.e. it is correcly collapsed)
+        explorer.getTreeItemByLabel('Central_Unit').should('not.exist');
+        explorer.getTreeItemByLabel('CompositeProcessor').should('not.exist');
+        explorer.getTreeItemByLabel('Wifi').should('not.exist');
+        // Check that this has not changed the selection (still on 'robot')
+        explorer.getSelectedTreeItems().should('have.length', 1);
+        explorer.getSelectedTreeItems().contains('robot').should('exist');
+      });
+
+      it('Then we can select a visible item by clicking on the right empty area', () => {
+        const explorer = new Explorer();
+        explorer.expandWithDoubleClick('robot');
+        explorer.getTreeItemByLabel('System').should('exist');
+
+        explorer.expandWithDoubleClick('System');
+        explorer.getTreeItemByLabel('Central_Unit').should('exist');
+        cy.getByTestId('Central_Unit-fullrow').should('exist');
+
+        // Click in the empty area after the label & menu: this should select the item
+        cy.getByTestId('Central_Unit-fullrow').click('right');
+        explorer.getSelectedTreeItems().should('have.length', 1);
+        explorer.getSelectedTreeItems().contains('Central_Unit').should('exist');
+      });
+
+      it('Then we can select a visible item by clicking on the left empty area', () => {
+        const explorer = new Explorer();
+        explorer.expandWithDoubleClick('robot');
+        explorer.getTreeItemByLabel('System').should('exist');
+
+        explorer.expandWithDoubleClick('System');
+        explorer.getTreeItemByLabel('Central_Unit').should('exist');
+        cy.getByTestId('Central_Unit-fullrow').should('exist');
+
+        // Click in the empty area before the toggle: this should also select the item
+        cy.getByTestId('Central_Unit-fullrow').click('left');
+        explorer.getSelectedTreeItems().should('have.length', 1);
+        explorer.getSelectedTreeItems().contains('Central_Unit').should('exist');
       });
     });
   });