Add additonal e2e tests

Add e2e test for following scenarios:
- Add/Edit/Delete relationship
- Add/Edit/delete entiy from Explorer [FORM]
- Add/Edit/Delte relationship from Explorer [FORM]

- Extend and refactor Pageobjects
- Adjust test workspace

e2e-tests/src/page-objects/cm-composite-editor.ts

@@ -8,6 +8,7 @@ import { TheiaMonacoEditor } from '@theia/playwright/lib/theia-monaco-editor';
 import { join } from 'path';
 import { CMApp } from './cm-app';
 import { IntegratedEditor, IntegratedTextEditor } from './cm-integrated-editor';
+import { IntegratedFormEditor } from './form/integrated-form-editor';
 import { IntegratedSystemDiagramEditor } from './system-diagram/integrated-system-diagram-editor';
 
 export type CompositeEditorName = keyof IntegratedEditorType;
@@ -105,24 +106,6 @@ export class IntegratedCodeEditor extends IntegratedTextEditor {
    }
 }
 
-export class IntegratedFormEditor extends IntegratedEditor {
-   constructor(filePath: string, parent: CMCompositeEditor, tabSelector: string) {
-      super(
-         {
-            tabSelector,
-            viewSelector: normalizeId(
-               `#form-editor-opener:file://${urlEncodePath(join(parent.app.workspace.escapedPath, OSUtil.fileSeparator, filePath))}`
-            )
-         },
-         parent
-      );
-   }
-
-   async hasError(errorMessage: string): Promise<boolean> {
-      return hasViewError(this.page, this.viewSelector, errorMessage);
-   }
-}
-
 export class IntegratedMappingDiagramEditor extends IntegratedEditor {
    constructor(filePath: string, parent: CMCompositeEditor, tabSelector: string) {
       super(

e2e-tests/src/page-objects/cm-explorer-view.ts

@@ -2,13 +2,13 @@
  * Copyright (c) 2023 CrossBreeze.
  ********************************************************************************/
 import { TheiaApp, TheiaExplorerView } from '@theia/playwright';
-import { TheiaTabBarToolbar } from './theia-tabbar-toolbar';
+import { CMMTabBarToolbar } from './cm-tab-bar-toolbar';
 
 export class CMExplorerView extends TheiaExplorerView {
-   public readonly tabBarToolbar: TheiaTabBarToolbar;
+   public readonly tabBarToolbar: CMMTabBarToolbar;
 
    constructor(app: TheiaApp) {
       super(app);
-      this.tabBarToolbar = new TheiaTabBarToolbar(this);
+      this.tabBarToolbar = new CMMTabBarToolbar(this);
    }
 }

e2e-tests/src/page-objects/cm-integrated-editor.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2024 CrossBreeze.
  ********************************************************************************/
 
+import { waitForFunction } from '@eclipse-glsp/glsp-playwright';
 import { TheiaEditor, TheiaTextEditor, TheiaViewData } from '@theia/playwright';
 import { CMApp } from './cm-app';
 import { CMCompositeEditor } from './cm-composite-editor';
@@ -66,6 +67,10 @@ export abstract class IntegratedEditor extends TheiaEditor {
    override title(): Promise<string | undefined> {
       return this.parent.title();
    }
+
+   async waitForDirty(): Promise<void> {
+      await waitForFunction(async () => this.isDirty());
+   }
 }
 
 export abstract class IntegratedTextEditor extends TheiaTextEditor {
@@ -128,4 +133,8 @@ export abstract class IntegratedTextEditor extends TheiaTextEditor {
    override title(): Promise<string | undefined> {
       return this.parent.title();
    }
+
+   async waitForDirty(): Promise<void> {
+      await waitForFunction(async () => this.isDirty());
+   }
 }

e2e-tests/src/page-objects/cm-properties-view.ts

@@ -0,0 +1,53 @@
+/********************************************************************************
+ * Copyright (c) 2024 CrossBreeze.
+ ********************************************************************************/
+import { ElementHandle } from '@playwright/test';
+import { TheiaApp, TheiaEditor, isElementVisible } from '@theia/playwright';
+import { CMForm } from './form/cm-form';
+import { EntityForm } from './form/entiy-form';
+import { RelationshipForm } from './form/relationship-form';
+
+const CMPropertiesViewData = {
+   tabSelector: '#shell-tab-property-view',
+   viewSelector: '#property-view',
+   viewName: 'Properties'
+};
+
+export abstract class CMPropertiesView<F extends CMForm> extends TheiaEditor {
+   protected modelRootSelector = '#model-property-view';
+
+   abstract form(): Promise<F>;
+
+   constructor(app: TheiaApp) {
+      super(CMPropertiesViewData, app);
+   }
+
+   protected async modelPropertyElement(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
+      return this.page.$(this.viewSelector + ' ' + this.modelRootSelector);
+   }
+
+   isModelPropertyElement(): Promise<boolean> {
+      return isElementVisible(this.modelPropertyElement());
+   }
+
+   override async isDirty(): Promise<boolean> {
+      const form = await this.form();
+      return form.isDirty();
+   }
+}
+
+export class EntityPropertiesView extends CMPropertiesView<EntityForm> {
+   async form(): Promise<EntityForm> {
+      const entityForm = new EntityForm(this, this.modelRootSelector);
+      await entityForm.waitForVisible();
+      return entityForm;
+   }
+}
+
+export class RelationshipPropertiesView extends CMPropertiesView<RelationshipForm> {
+   async form(): Promise<RelationshipForm> {
+      const relationshipForm = new RelationshipForm(this, this.modelRootSelector);
+      await relationshipForm.waitForVisible();
+      return relationshipForm;
+   }
+}

e2e-tests/src/page-objects/cm-tab-bar-toolbar.ts

@@ -0,0 +1,7 @@
+/********************************************************************************
+ * Copyright (c) 2024 CrossBreeze.
+ ********************************************************************************/
+
+import { TheiaTabBarToolbar } from './theia-tabbar-toolbar';
+
+export class CMMTabBarToolbar extends TheiaTabBarToolbar {}

e2e-tests/src/page-objects/form/cm-form.ts

@@ -4,7 +4,7 @@
 
 import { waitForFunction } from '@eclipse-glsp/glsp-playwright';
 import { ElementHandle, Locator } from '@playwright/test';
-import { TheiaApp, TheiaEditor, TheiaPageObject, TheiaView, isElementVisible } from '@theia/playwright';
+import { TheiaPageObject, TheiaView } from '@theia/playwright';
 import { TheiaViewObject } from '../theia-view-object';
 
 export const FormIcons = {
@@ -62,32 +62,3 @@ export abstract class FormSection extends TheiaPageObject {
       this.locator = form.locator.locator(`div.MuiAccordion-root:has(h6:has-text("${sectionName}"))`);
    }
 }
-
-const CMPropertiesViewData = {
-   tabSelector: '#shell-tab-property-view',
-   viewSelector: '#property-view',
-   viewName: 'Properties'
-};
-
-export abstract class CMPropertiesView<F extends CMForm> extends TheiaEditor {
-   protected modelRootSelector = '#model-property-view';
-
-   abstract form(): Promise<F>;
-
-   constructor(app: TheiaApp) {
-      super(CMPropertiesViewData, app);
-   }
-
-   protected async modelPropertyElement(): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
-      return this.page.$(this.viewSelector + ' ' + this.modelRootSelector);
-   }
-
-   isModelPropertyElement(): Promise<boolean> {
-      return isElementVisible(this.modelPropertyElement());
-   }
-
-   override async isDirty(): Promise<boolean> {
-      const form = await this.form();
-      return form.isDirty();
-   }
-}

e2e-tests/src/page-objects/form/entiy-form.ts

@@ -6,7 +6,7 @@ import { defined } from '@eclipse-glsp/glsp-playwright';
 import { Locator } from '@playwright/test';
 import { TheiaPageObject } from '@theia/playwright';
 import { TheiaView } from '@theia/playwright/lib/theia-view';
-import { CMForm, CMPropertiesView, FormIcons, FormSection } from './cm-form';
+import { CMForm, FormIcons, FormSection } from './cm-form';
 
 export class EntityForm extends CMForm {
    protected override iconClass = FormIcons.Entity;
@@ -103,6 +103,7 @@ export const EntityDatatype = {
    Bool: 'Bool',
    Text: 'Text'
 } as const;
+
 export type EntityDatatype = keyof typeof EntityDatatype;
 
 export class EntityAttribute extends TheiaPageObject {
@@ -187,11 +188,3 @@ export class EntityAttribute extends TheiaPageObject {
       await deleteButton.click();
    }
 }
-
-export class EntityPropertiesView extends CMPropertiesView<EntityForm> {
-   async form(): Promise<EntityForm> {
-      const entityForm = new EntityForm(this, this.modelRootSelector);
-      await entityForm.waitForVisible();
-      return entityForm;
-   }
-}

e2e-tests/src/page-objects/form/integrated-form-editor.ts

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2024 CrossBreeze.
+ ********************************************************************************/
+
+import { OSUtil, normalizeId, urlEncodePath } from '@theia/playwright';
+import { join } from 'path';
+import { CMCompositeEditor, hasViewError } from '../cm-composite-editor';
+import { IntegratedEditor } from '../cm-integrated-editor';
+import { CMForm } from './cm-form';
+import { EntityForm } from './entiy-form';
+import { RelationshipForm } from './relationship-form';
+export class IntegratedFormEditor extends IntegratedEditor {
+   constructor(filePath: string, parent: CMCompositeEditor, tabSelector: string) {
+      super(
+         {
+            tabSelector,
+            viewSelector: normalizeId(
+               `#form-editor-opener:file://${urlEncodePath(join(parent.app.workspace.escapedPath, OSUtil.fileSeparator, filePath))}`
+            )
+         },
+         parent
+      );
+   }
+
+   async hasError(errorMessage: string): Promise<boolean> {
+      return hasViewError(this.page, this.viewSelector, errorMessage);
+   }
+
+   async formFor(entity: 'entity'): Promise<EntityForm>;
+   async formFor(relationship: 'relationship'): Promise<RelationshipForm>;
+   async formFor(string: 'entity' | 'relationship'): Promise<CMForm> {
+      if (string === 'entity') {
+         const form = new EntityForm(this, '');
+         await form.waitForVisible();
+         return form;
+      } else {
+         const form = new RelationshipForm(this, '');
+         await form.waitForVisible();
+         return form;
+      }
+   }
+}

e2e-tests/src/page-objects/form/relationship-form.ts

@@ -0,0 +1,41 @@
+/********************************************************************************
+ * Copyright (c) 2024 CrossBreeze.
+ ********************************************************************************/
+
+import { TheiaView } from '@theia/playwright';
+import { CMForm, FormIcons, FormSection } from './cm-form';
+
+export class RelationshipForm extends CMForm {
+   protected override iconClass = FormIcons.Relationship;
+
+   readonly generalSection: RelationshipGeneralSection;
+
+   constructor(view: TheiaView, relativeSelector: string) {
+      super(view, relativeSelector, 'Relationship');
+      this.generalSection = new RelationshipGeneralSection(this);
+   }
+}
+
+export class RelationshipGeneralSection extends FormSection {
+   constructor(form: RelationshipForm) {
+      super(form, 'General');
+   }
+
+   async getName(): Promise<string> {
+      return this.locator.getByLabel('Name').inputValue();
+   }
+
+   async setName(name: string): Promise<void> {
+      await this.locator.getByLabel('Name').fill(name);
+      return this.page.waitForTimeout(250);
+   }
+
+   async getDescription(): Promise<string> {
+      return this.locator.getByLabel('Description').inputValue();
+   }
+
+   async setDescription(description: string): Promise<void> {
+      await this.locator.getByLabel('Description').fill(description);
+      return this.page.waitForTimeout(250);
+   }
+}

e2e-tests/src/page-objects/system-diagram/diagram-elements.ts

@@ -3,9 +3,11 @@
  ********************************************************************************/
 import {
    ChildrenAccessor,
+   EdgeMetadata,
    Mix,
    ModelElementMetadata,
    NodeMetadata,
+   PEdge,
    PLabel,
    PModelElement,
    PNode,
@@ -19,6 +21,7 @@ import {
    usePopupCapability,
    useRenameableFlow,
    useResizeHandleCapability,
+   useRoutingPointCapability,
    useSelectableFlow
 } from '@eclipse-glsp/glsp-playwright/';
 
@@ -74,3 +77,14 @@ export class Attribute extends PModelElement {
       return defined(await this.locate().locator('.datatype').textContent());
    }
 }
+
+const RelationshipMixin = Mix(PEdge)
+   .flow(useClickableFlow)
+   .flow(useSelectableFlow)
+   .flow(useDeletableFlow)
+   .capability(useRoutingPointCapability)
+   .build();
+@EdgeMetadata({
+   type: 'edge:relationship'
+})
+export class Relationship extends RelationshipMixin {}

e2e-tests/src/page-objects/system-diagram/integrated-system-diagram-editor.ts

@@ -7,8 +7,8 @@ import { OSUtil, normalizeId, urlEncodePath } from '@theia/playwright';
 import { join } from 'path';
 import { CMCompositeEditor, hasViewError } from '../cm-composite-editor';
 import { IntegratedEditor } from '../cm-integrated-editor';
+import { EntityPropertiesView } from '../cm-properties-view';
 import { CMTheiaIntegration } from '../cm-theia-integration';
-import { EntityPropertiesView } from '../form/entiy-form';
 import { Entity } from './diagram-elements';
 import { SystemDiagram, WaitForModelUpdateOptions } from './system-diagram';
 import { SystemTools } from './system-tool-box';

e2e-tests/src/resources/sample-workspace/ExampleCRM/diagrams/CRM.system-diagram.cm

@@ -1,15 +1,16 @@
 systemDiagram:
     id: CRM
     name: "CRM"
-    description: "Shows the complete CRM"
     nodes:
-      - id: EmptyEntityNode
-        entity: EmptyEntity
-        x: 396
-        y: 429
-        width: 10
-        height: 10
-    customProperties:
-      - name: Author
-        value: "CrossBreeze"
-      - name: ExampleDiagram
+      - id: OrderNode
+        entity: Order
+        x: 1034
+        y: 253
+        width: 163.921875
+        height: 136
+      - id: CustomerNode
+        entity: Customer
+        x: 693
+        y: 231
+        width: 157.5
+        height: 176

e2e-tests/src/resources/sample-workspace/ExampleCRM/diagrams/EMPTY.system-diagram.cm

@@ -0,0 +1,15 @@
+systemDiagram:
+    id: EMPTY
+    name: "EMPTY"
+    description: "Diagram with empty entity"
+    nodes:
+      - id: EmptyEntityNode
+        entity: EmptyEntity
+        x: 396
+        y: 429
+        width: 10
+        height: 10
+    customProperties:
+      - name: Author
+        value: "CrossBreeze"
+      - name: EmptyDiagram

e2e-tests/src/resources/sample-workspace/ExampleCRM/relationships/Test.relationship.cm

@@ -0,0 +1,5 @@
+relationship:
+    id: TestRelationship
+    parent: Customer
+    child: Order
+    type: "1:1"