Implement select tests

- Update folder structure to be similar to glsp-client - Remove aliasing from example project - Make access more defensive - Introduce * type for models to allow for all types - Fix failing tests due to ghost elements - Update theia playwright framework
eclipse-glsp · Feb 21, 2024 · 7ab3d5f · 7ab3d5f
1 parent 18969c0
commit 7ab3d5f
Show file tree

Hide file tree

Showing 40 changed files with 544 additions and 309 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,14 +7,6 @@ module.exports = {
         tsconfigRootDir: __dirname,
         project: 'tsconfig.eslint.json'
     },
-    settings: {
-        // Necessary for aliasing paths: https://www.typescriptlang.org/tsconfig#paths
-        'import/resolver': {
-            typescript: {
-                project: ['packages/glsp-playwright/tsconfig.json', 'tsconfig.json']
-            }
-        }
-    },
     rules: {
         'no-null/no-null': 'off', // Accessing the browser DOM returns "null" instead of "undefined"
         'no-restricted-imports': [

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,8 +6,8 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
   },
   "eslint.validate": ["javascript", "typescript"],
   "search.exclude": {

diff --git a/examples/workflow-test/.eslintrc.js b/examples/workflow-test/.eslintrc.js
@@ -1,5 +1,13 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
     extends: '../../.eslintrc.js',
+    settings: {
+        // Necessary for aliasing paths: https://www.typescriptlang.org/tsconfig#paths
+        'import/resolver': {
+            typescript: {
+                project: ['examples/workflow-test/tsconfig.json', 'tsconfig.json']
+            }
+        }
+    },
     rules: {}
 };
diff --git a/examples/workflow-test/README.md b/examples/workflow-test/README.md
@@ -2,6 +2,40 @@
 
 This package contains code examples that demonstrate how to test diagram editors using the [Graphical Language Server Platform (GLSP)](https://github.com/eclipse-glsp/glsp).
 
+<details>
+  <summary>Expand test list</summary>
+
+| Feature                                                                              |      Standalone      | Theia Integration | Eclipse Integration | VS Code Integration |
+| ------------------------------------------------------------------------------------ | :------------------: | :---------------: | :-----------------: | :-----------------: |
+| Model Saving                                                                         |          -           |         -         |          -          |          -          |
+| Model Dirty State                                                                    |                      |         -         |          -          |          -          |
+| Model SVG Export                                                                     |          -           |         -         |          -          |          -          |
+| Model Layout                                                                         |          -           |         -         |          -          |          -          |
+| Restoring viewport on re-open                                                        |                      |         -         |                     |                     |
+| Model Edit Modes<br>- Edit<br>- Read-only                                            |   <br>-<br>-&nbsp;   |    <br>-<br>-     |   <br>-<br>&nbsp;   |  <br>-<br>-&nbsp;   |
+| Client View Port<br>- Center<br>- Fit to Screen                                      |      <br>-<br>-      |    <br>-<br>-     |     <br>-<br>-      |     <br>-<br>-      |
+| Client Status Notification                                                           |          -           |         -         |          -          |          -          |
+| Client Message Notification                                                          |          -           |         -         |                     |          -          |
+| Client Progress Reporting                                                            |                      |         -         |                     |          -          |
+| Element Selection                                                                    |          ✓           |         ✓         |          -          |          ✓          |
+| Element Hover                                                                        |          -           |         -         |          -          |          -          |
+| Element Validation                                                                   |          -           |         -         |          -          |          -          |
+| Element Navigation                                                                   |                      |         -         |          -          |          -          |
+| Element Type Hints                                                                   |          -           |         -         |          -          |          -          |
+| Element Creation and Deletion                                                        |          -           |         -         |          -          |          -          |
+| Node Change Bounds<br>- Move<br>- Resize                                             |      <br>-<br>-      |    <br>-<br>-     |     <br>-<br>-      |     <br>-<br>-      |
+| Node Change Container                                                                |          -           |         -         |          -          |          -          |
+| Edge Reconnect                                                                       |          -           |         -         |          -          |          -          |
+| Edge Routing Points                                                                  |          -           |         -         |          -          |          -          |
+| Ghost Elements                                                                       |          -           |         -         |          -          |          -          |
+| Element Text Editing                                                                 |          -           |         -         |          -          |          -          |
+| Clipboard (Cut, Copy, Paste)                                                         |          -           |         -         |          -          |          -          |
+| Undo / Redo                                                                          |          -           |         -         |          -          |          -          |
+| Contexts<br>- Context Menu<br>- Command Palette<br>- Tool Palette                    |    <br><br>-<br>-    |  <br>-<br>-<br>-  |   <br><br>-<br>-    |   <br>-<br>-<br>-   |
+| Accessibility Features (experimental) <br>- Search<br>- Move <br>- Zoom <br>- Resize | <br>-<br>-<br>-<br>- |                   |                     |                     |
+| Helper Lines (experimental)                                                          |          -           |         -         |          -          |          -          |
+</details>
+
 ## Prerequisites
 
 The following libraries/frameworks need to be installed on your system:

diff --git a/examples/workflow-test/package.json b/examples/workflow-test/package.json
@@ -47,12 +47,10 @@
   "devDependencies": {
     "@eclipse-glsp-examples/workflow-server-bundled": "~2.0.1",
     "@eclipse-glsp/glsp-playwright": "~2.0.0",
-    "@playwright/test": "^1.34.3",
-    "@theia/playwright": "1.39.0",
-    "commander": "^10.0.1",
+    "@playwright/test": "^1.40.1",
     "dotenv": "^16.0.3",
-    "mvn-artifact-download": "5.1.0",
     "ts-dedent": "^2.2.0",
+    "tsc-alias": "^1.8.2",
     "tsx": "^3.12.4"
   },
   "publishConfig": {

diff --git a/examples/workflow-test/src/graph/elements/task-automated.po.ts b/examples/workflow-test/src/graph/elements/task-automated.po.ts
@@ -16,7 +16,9 @@
 import {
     ChildrenAccessor,
     Mix,
-    NodeMetadata, PNode, SVGMetadataUtils,
+    NodeMetadata,
+    PNode,
+    SVGMetadataUtils,
     useClickableFlow,
     useCommandPaletteCapability,
     useDraggableFlow,

diff --git a/examples/workflow-test/src/graph/elements/task-manual.po.ts b/examples/workflow-test/src/graph/elements/task-manual.po.ts
@@ -18,15 +18,17 @@ import {
     Mix,
     NodeMetadata,
     PLabelledElement,
-    PNode, SVGMetadataUtils,
+    PNode,
+    SVGMetadataUtils,
     useClickableFlow,
     useCommandPaletteCapability,
     useDeletableFlow,
     useDraggableFlow,
     useHoverableFlow,
     usePopupCapability,
     useRenameableFlow,
-    useResizeHandleCapability
+    useResizeHandleCapability,
+    useSelectableFlow
 } from '@eclipse-glsp/glsp-playwright/';
 import { LabelHeading } from './label-heading.po';
 
@@ -36,6 +38,7 @@ export const TaskManualMixin = Mix(PNode)
     .flow(useDeletableFlow)
     .flow(useDraggableFlow)
     .flow(useRenameableFlow)
+    .flow(useSelectableFlow)
     .capability(useResizeHandleCapability)
     .capability(usePopupCapability)
     .capability(useCommandPaletteCapability)

diff --git a/...ests/features/connectable-element.spec.ts → ...st/tests/core/connectable-element.spec.ts b/...ests/features/connectable-element.spec.ts → ...st/tests/core/connectable-element.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { WorkflowApp } from '../../src/app/workflow-app';
 import { ActivityNodeFork } from '../../src/graph/elements/activity-node-fork.po';
 import { Edge } from '../../src/graph/elements/edge.po';
@@ -25,7 +25,7 @@ test.describe('The edge accessor of a connectable element', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...workflow-test/tests/features/edge.spec.ts → ...les/workflow-test/tests/core/edge.spec.ts b/...workflow-test/tests/features/edge.spec.ts → ...les/workflow-test/tests/core/edge.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { WorkflowApp } from '../../src/app/workflow-app';
 import { ActivityNodeFork } from '../../src/graph/elements/activity-node-fork.po';
 import { Edge } from '../../src/graph/elements/edge.po';
@@ -25,7 +25,7 @@ test.describe('Edges', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...st/tests/features/flows/deletable.spec.ts → ...w-test/tests/core/flows/deletable.spec.ts b/...st/tests/features/flows/deletable.spec.ts → ...w-test/tests/core/flows/deletable.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { WorkflowApp } from '../../../src/app/workflow-app';
 import { TaskManual } from '../../../src/graph/elements/task-manual.po';
 import { WorkflowGraph } from '../../../src/graph/workflow.graph';
@@ -23,7 +23,7 @@ test.describe('Deletable flow', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...orkflow-test/tests/features/graph.spec.ts → ...es/workflow-test/tests/core/graph.spec.ts b/...orkflow-test/tests/features/graph.spec.ts → ...es/workflow-test/tests/core/graph.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { WorkflowApp } from '../../src/app/workflow-app';
 import { ActivityNodeFork } from '../../src/graph/elements/activity-node-fork.po';
 import { Edge } from '../../src/graph/elements/edge.po';
@@ -25,7 +25,7 @@ test.describe('The graph', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...rkflow-test/tests/features/parent.spec.ts → ...s/workflow-test/tests/core/parent.spec.ts b/...rkflow-test/tests/features/parent.spec.ts → ...s/workflow-test/tests/core/parent.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { WorkflowApp } from '../../src/app/workflow-app';
 import { LabelHeading } from '../../src/graph/elements/label-heading.po';
 import { TaskManual } from '../../src/graph/elements/task-manual.po';
@@ -24,7 +24,7 @@ test.describe('The children accessor of a parent element', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...low-test/tests/features/shortcuts.spec.ts → ...orkflow-test/tests/core/shortcuts.spec.ts b/...low-test/tests/features/shortcuts.spec.ts → ...orkflow-test/tests/core/shortcuts.spec.ts
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright';
+import { expect, test } from '@eclipse-glsp/glsp-playwright';
 import { WorkflowApp } from '../../src/app/workflow-app';
 import { TaskManual } from '../../src/graph/elements/task-manual.po';
 import { WorkflowGraph } from '../../src/graph/workflow.graph';
@@ -23,7 +23,7 @@ test.describe('Shortcuts', () => {
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...test/tests/features/resize-handle.spec.ts → ...tures/change-bounds/resize-handle.spec.ts b/...test/tests/features/resize-handle.spec.ts → ...tures/change-bounds/resize-handle.spec.ts
@@ -13,17 +13,17 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, PMetadata, ResizeHandle, expect, test } from '@eclipse-glsp/glsp-playwright';
-import { WorkflowApp } from '../../src/app/workflow-app';
-import { TaskManual } from '../../src/graph/elements/task-manual.po';
-import { WorkflowGraph } from '../../src/graph/workflow.graph';
+import { PMetadata, ResizeHandle, expect, test } from '@eclipse-glsp/glsp-playwright';
+import { WorkflowApp } from '../../../src/app/workflow-app';
+import { TaskManual } from '../../../src/graph/elements/task-manual.po';
+import { WorkflowGraph } from '../../../src/graph/workflow.graph';
 
 test.describe('The resizing handle', () => {
     let app: WorkflowApp;
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...st/tests/features/command-palette.spec.ts → ...s/command-palette/command-palette.spec.ts b/...st/tests/features/command-palette.spec.ts → ...s/command-palette/command-palette.spec.ts
@@ -13,20 +13,20 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, GLSPGlobalCommandPalette, expect, test } from '@eclipse-glsp/glsp-playwright/';
-import { WorkflowApp } from '../../src/app/workflow-app';
-import { Edge } from '../../src/graph/elements/edge.po';
-import { TaskAutomated } from '../../src/graph/elements/task-automated.po';
-import { TaskManual } from '../../src/graph/elements/task-manual.po';
-import { WorkflowGraph } from '../../src/graph/workflow.graph';
+import { GLSPGlobalCommandPalette, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { WorkflowApp } from '../../../src/app/workflow-app';
+import { Edge } from '../../../src/graph/elements/edge.po';
+import { TaskAutomated } from '../../../src/graph/elements/task-automated.po';
+import { TaskManual } from '../../../src/graph/elements/task-manual.po';
+import { WorkflowGraph } from '../../../src/graph/workflow.graph';
 
 test.describe('The command palette', () => {
     let app: WorkflowApp;
     let graph: WorkflowGraph;
     let globalCommandPalette: GLSPGlobalCommandPalette;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...orkflow-test/tests/features/popup.spec.ts → ...w-test/tests/features/hover/popup.spec.ts b/...orkflow-test/tests/features/popup.spec.ts → ...w-test/tests/features/hover/popup.spec.ts
@@ -13,18 +13,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
 import { dedent } from 'ts-dedent';
-import { WorkflowApp } from '../../src/app/workflow-app';
-import { TaskManual } from '../../src/graph/elements/task-manual.po';
-import { WorkflowGraph } from '../../src/graph/workflow.graph';
+import { WorkflowApp } from '../../../src/app/workflow-app';
+import { TaskManual } from '../../../src/graph/elements/task-manual.po';
+import { WorkflowGraph } from '../../../src/graph/workflow.graph';
 
 test.describe('The popup', () => {
     let app: WorkflowApp;
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });

diff --git a/...test/tests/features/routing-point.spec.ts → ...ts/features/routing/routing-point.spec.ts b/...test/tests/features/routing-point.spec.ts → ...ts/features/routing/routing-point.spec.ts
@@ -13,17 +13,17 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GLSPApp, expect, test } from '@eclipse-glsp/glsp-playwright/';
-import { WorkflowApp } from '../../src/app/workflow-app';
-import { Edge } from '../../src/graph/elements/edge.po';
-import { WorkflowGraph } from '../../src/graph/workflow.graph';
+import { expect, test } from '@eclipse-glsp/glsp-playwright/';
+import { WorkflowApp } from '../../../src/app/workflow-app';
+import { Edge } from '../../../src/graph/elements/edge.po';
+import { WorkflowGraph } from '../../../src/graph/workflow.graph';
 
 test.describe('The routing points of an edge', () => {
     let app: WorkflowApp;
     let graph: WorkflowGraph;
 
     test.beforeEach(async ({ integration }) => {
-        app = await GLSPApp.loadApp(WorkflowApp, {
+        app = new WorkflowApp({
             type: 'integration',
             integration
         });