GLSP-1369: Update id locators in tests to align with workflow example

.gitignore

@@ -16,5 +16,3 @@ examples/workflow-test/playwright/.storage/*.json
 *.vsix
 !*.env.example
 *.env
-
-

examples/workflow-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp/workflow-test",
-  "version": "2.0.0",
+  "version": "2.2.0-next",
   "private": true,
   "description": "Example project for glsp-playwright",
   "homepage": "https://www.eclipse.org/glsp/",
@@ -31,13 +31,11 @@
   ],
   "scripts": {
     "build": "tsc -b",
-    "check-types": "tsc --noemit",
     "clean": "rimraf --glob lib tsconfig.tsbuildinfo server/*.log",
     "lint": "eslint --ext .ts,.tsx ./src ./tests",
-    "lint:all": "yarn check-types && yarn lint",
     "lint:ci": "yarn lint -o eslint.xml -f checkstyle",
-    "prepare": "yarn clean && yarn build && yarn lint && playwright install",
-    "repo": "npx tsx ./scripts/repositories.ts",
+    "prepare": "playwright install",
+    "repo": "ts-node  ./scripts/repositories.ts",
     "start:server": "node node_modules/@eclipse-glsp-examples/workflow-server-bundled/wf-glsp-server-node.js",
     "test": "playwright test",
     "test:standalone": "yarn test --project=standalone",
@@ -47,13 +45,13 @@
     "watch": "tsc -w"
   },
   "devDependencies": {
-    "@eclipse-glsp-examples/workflow-server-bundled": "~2.1.1",
-    "@eclipse-glsp/glsp-playwright": "~2.0.0",
-    "@playwright/test": "^1.40.1",
+    "@eclipse-glsp-examples/workflow-server-bundled": "next",
+    "@eclipse-glsp/glsp-playwright": "2.2.0-next",
+    "@playwright/test": "^1.37.1",
+    "@theia/playwright": "~1.49.1",
     "@types/yargs": "^17.0.32",
     "dotenv": "^16.0.3",
     "ts-dedent": "^2.2.0",
-    "tsx": "^3.12.4",
     "yargs": "^17.7.2"
   },
   "publishConfig": {

examples/workflow-test/scripts/repositories.ts

@@ -90,7 +90,7 @@ function buildClient(options: GlobalOptions): void {
 }
 
 function buildTheia(options: GlobalOptions): void {
-    exec('yarn', [], { cwd: repositoryFolder(options.folder, theiaRepository) });
+    exec('yarn && yarn browser build', [], { cwd: repositoryFolder(options.folder, theiaRepository) });
 }
 
 function buildVSCode(options: GlobalOptions): void {
@@ -274,4 +274,4 @@ function buildCommand(handler: (argv: BuildCommandArgv) => void) {
     };
 }
 
-main();
+main().catch(console.error);

examples/workflow-test/tests/core/connectable-element.spec.ts

@@ -33,11 +33,11 @@ test.describe('The edge accessor of a connectable element', () => {
     });
 
     test('should allow accessing all edges of a type', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const edges = await task.edges().outgoingEdgesOfType(Edge);
 
         const ids = await Promise.all(edges.map(async e => e.idAttr()));
-        const expectedIds = ['d34c37e0-e45e-4cfe-a76f-0e9274ed8e60'];
+        const expectedIds = ['edge_task_Push_fork_1'];
 
         expect(ids.length).toBe(expectedIds.length);
         ids.forEach(id => {
@@ -48,26 +48,26 @@ test.describe('The edge accessor of a connectable element', () => {
     });
 
     test('should return typed sources on access', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const edges = await task.edges().outgoingEdgesOfType(Edge);
         expect(edges.length).toBe(1);
 
         const source = await edges[0].source();
-        expect(await source.idAttr()).toContain('task0');
+        expect(await source.idAttr()).toContain('task_Push');
         expect(source instanceof TaskManual).toBeTruthy();
     });
 
     test('should allow accessing all edges of a type against a target type', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const edges = await task.edges().outgoingEdgesOfType(Edge, { targetConstructor: ActivityNodeFork });
         expect(edges.length).toBe(1);
 
         const source = await edges[0].source();
-        expect(await source.idAttr()).toContain('task0');
+        expect(await source.idAttr()).toContain('task_Push');
         expect(source instanceof TaskManual).toBeTruthy();
 
         const target = await edges[0].target();
-        expect(await target.idAttr()).toContain('bb2709f5-0ff0-4438-8853-b7e934b506d7');
+        expect(await target.idAttr()).toContain('fork_1');
         expect(target instanceof ActivityNodeFork).toBeTruthy();
     });
 

examples/workflow-test/tests/core/debug.standalone.spec.ts

@@ -20,23 +20,23 @@ import { WorkflowApp } from '../../src/app/workflow-app';
 import { TaskManual } from '../../src/graph/elements/task-manual.po';
 import { WorkflowGraph } from '../../src/graph/workflow.graph';
 
-const taskSelector = '[id$="task0"]';
+const taskSelector = '[id$="task_Push"]';
 const expectedElementMetadata = {
-    id: 'sprotty_task0',
+    id: 'sprotty_task_Push',
     type: 'task:manual',
     parent: 'sprotty_sprotty',
     children: [
         {
-            id: 'sprotty_task0_icon',
+            id: 'sprotty_task_Push_icon',
             type: 'icon',
-            parent: 'sprotty_task0',
+            parent: 'sprotty_task_Push',
             children: [],
             html: ''
         },
         {
-            id: 'sprotty_task0_classname',
+            id: 'sprotty_task_Push_label',
             type: 'label:heading',
-            parent: 'sprotty_task0',
+            parent: 'sprotty_task_Push',
             children: [],
             html: 'Push'
         }
@@ -46,9 +46,9 @@ const expectedElementMetadata = {
 const expectedGLSPLocatorData = [
     {
         locator:
-            "locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[id$=\"task0\"]').and(locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[data-svg-metadata-type=\"task:manual\"]'))",
+            "locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[id$=\"task_Push\"]').and(locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[data-svg-metadata-type=\"task:manual\"]'))",
         children: [
-            '<g id="sprotty_task0" transform="translate(70, 140)" data-svg-metadata-type="task:manual" data-svg-metadata-parent-id="sprotty_sprotty" class="node task manual">...</g>'
+            '<g id="sprotty_task_Push" transform="translate(70, 100)" data-svg-metadata-type="task:manual" data-svg-metadata-parent-id="sprotty_sprotty" class="node task manual">...</g>'
         ]
     },
     {

examples/workflow-test/tests/core/edge.spec.ts

@@ -33,9 +33,9 @@ test.describe('Edges', () => {
     });
 
     test('should have source and target nodes', async () => {
-        const source = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
-        const target = await graph.getNodeBySelector('[id$="bb2709f5-0ff0-4438-8853-b7e934b506d7"]', ActivityNodeFork);
-        const edge = await graph.getEdgeBySelector('[id$="d34c37e0-e45e-4cfe-a76f-0e9274ed8e60"]', Edge);
+        const source = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
+        const target = await graph.getNodeBySelector('[id$="fork_1"]', ActivityNodeFork);
+        const edge = await graph.getEdgeBySelector('[id$="edge_task_Push_fork_1"]', Edge);
 
         const sourceId = await edge.sourceId();
         expect(sourceId).toBe(await source.idAttr());

examples/workflow-test/tests/core/flows/deletable.spec.ts

@@ -31,7 +31,7 @@ test.describe('Deletable flow', () => {
     });
 
     test('should delete element', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
 
         expect(await task.locate().count()).toBe(1);
         await task.delete();

examples/workflow-test/tests/core/graph.spec.ts

@@ -34,7 +34,7 @@ test.describe('The graph', () => {
 
     test.describe('should allow accessing the edge', () => {
         test('by using a selector', async () => {
-            const edge = await graph.getEdgeBySelector('[id$="d34c37e0-e45e-4cfe-a76f-0e9274ed8e60"]', Edge);
+            const edge = await graph.getEdgeBySelector('[id$="edge_task_Push_fork_1"]', Edge);
             const task = await edge.sourceOfType(TaskManual);
 
             expect(await (await task.children.label()).textContent()).toBe('Push');
@@ -44,7 +44,7 @@ test.describe('The graph', () => {
             const edges = await graph.getEdgesOfType(Edge, { sourceConstructor: TaskManual });
 
             const ids = await Promise.all(edges.map(async e => e.idAttr()));
-            const expectedIds = ['d34c37e0-e45e-4cfe-a76f-0e9274ed8e60', 'a36985a7-3e61-499c-9bdb-5be2b00cb75c'];
+            const expectedIds = ['edge_task_Push_fork_1', 'edge_task_RflWt_merge_1'];
 
             expect(ids.length).toBe(expectedIds.length);
             ids.forEach(id => {
@@ -55,18 +55,18 @@ test.describe('The graph', () => {
         });
 
         test('by using a source selector', async () => {
-            const edges = await graph.getEdgesOfType(Edge, { sourceSelector: '[id$="task0"]' });
+            const edges = await graph.getEdgesOfType(Edge, { sourceSelector: '[id$="task_Push"]' });
             expect(edges.length).toBe(1);
 
             const source = await edges[0].sourceOfType(TaskManual);
-            expect(await source.idAttr()).toContain('task0');
+            expect(await source.idAttr()).toContain('task_Push');
         });
 
         test('by using the source type with multiple elements', async () => {
             const edges = await graph.getEdgesOfType(Edge, { sourceConstructor: TaskManual });
 
             const ids = await Promise.all(edges.map(async e => e.idAttr()));
-            const expectedIds = ['d34c37e0-e45e-4cfe-a76f-0e9274ed8e60', 'a36985a7-3e61-499c-9bdb-5be2b00cb75c'];
+            const expectedIds = ['edge_task_Push_fork_1', 'edge_task_RflWt_merge_1'];
 
             expect(ids.length).toBe(expectedIds.length);
             for await (const [index, id] of ids.entries()) {
@@ -81,7 +81,7 @@ test.describe('The graph', () => {
             const edges = await graph.getEdgesOfType(Edge, { targetConstructor: ActivityNodeFork });
 
             const ids = await Promise.all(edges.map(async e => e.idAttr()));
-            const expectedIds = ['d34c37e0-e45e-4cfe-a76f-0e9274ed8e60'];
+            const expectedIds = ['edge_task_Push_fork_1'];
 
             expect(ids.length).toBe(expectedIds.length);
             for await (const [index, id] of ids.entries()) {
@@ -99,7 +99,7 @@ test.describe('The graph', () => {
             });
 
             const ids = await Promise.all(edges.map(async e => e.idAttr()));
-            const expectedIds = ['d34c37e0-e45e-4cfe-a76f-0e9274ed8e60'];
+            const expectedIds = ['edge_task_Push_fork_1'];
 
             expect(ids.length).toBe(expectedIds.length);
             for await (const [index, id] of ids.entries()) {

examples/workflow-test/tests/core/parent.spec.ts

@@ -32,7 +32,7 @@ test.describe('The children accessor of a parent element', () => {
     });
 
     test('should allow to access all elements by using a type', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const children = task.children;
 
         const labels = await children.allOfType(LabelHeading);
@@ -43,23 +43,23 @@ test.describe('The children accessor of a parent element', () => {
     });
 
     test('should allow to access the element by using a type', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const children = task.children;
 
         const label = await children.ofType(LabelHeading);
         expect(await label.textContent()).toBe('Push');
     });
 
     test('should allow to access the element by using a type and a selector', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const children = task.children;
 
-        const label = await children.ofType(LabelHeading, { selector: '[id$="task0_classname"]' });
+        const label = await children.ofType(LabelHeading, { selector: '[id$="task_Push_label"]' });
         expect(await label.textContent()).toBe('Push');
     });
 
     test('should allow to use typed elements', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         const children = task.children;
 
         const label = await children.label();

examples/workflow-test/tests/core/shortcuts.spec.ts

@@ -31,7 +31,7 @@ test.describe('Shortcuts', () => {
     });
 
     test('should allow deleting the element in the graph', async ({ integration }) => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
         expect(await task.isVisible()).toBeTruthy();
 
         await task.click();

examples/workflow-test/tests/features/change-bounds/resize-handle.spec.ts

@@ -31,7 +31,7 @@ test.describe('The resizing handle', () => {
     });
 
     test('should allow resizing', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
 
         const oldBounds = await task.bounds();
         const oldTopLeft = oldBounds.position('top_left');
@@ -50,7 +50,7 @@ test.describe('The resizing handle', () => {
     });
 
     test('should show 4 handles', async () => {
-        const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+        const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
 
         await graph.waitForCreationOfType(PMetadata.getType(ResizeHandle), async () => {
             await task.click();

examples/workflow-test/tests/features/command-palette/command-palette.spec.ts

@@ -111,7 +111,7 @@ test.describe('The command palette', () => {
 
     test.describe('in the element context', () => {
         test('should allow to search suggestions', async () => {
-            const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+            const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
 
             const elementCommandPalette = await task.commandPalette();
             await elementCommandPalette.open();
@@ -179,7 +179,7 @@ test.describe('The command palette', () => {
         });
 
         test('should allow creating new elements in the diagram', async () => {
-            const task = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
+            const task = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
 
             const nodes = await graph.waitForCreationOfNodeType(TaskManual, async () => {
                 const command = task.commandPalette();
@@ -196,8 +196,8 @@ test.describe('The command palette', () => {
         });
 
         test('should allow creating edges in the graph', async () => {
-            const source = await graph.getNodeBySelector('[id$="task0"]', TaskManual);
-            const target = await graph.getNodeBySelector('[id$="task0_automated"]', TaskAutomated);
+            const source = await graph.getNodeBySelector('[id$="task_Push"]', TaskManual);
+            const target = await graph.getNodeBySelector('[id$="task_ChkWt"]', TaskAutomated);
 
             const edges = await graph.waitForCreationOfEdgeType(Edge, async () => {
                 const command = source.commandPalette();

examples/workflow-test/tests/features/hover/popup.spec.ts

@@ -28,14 +28,14 @@ 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';
 
-const manualSelector = '[id$="task0"]';
+const manualSelector = '[id$="task_Push"]';
 const expectedManualPopupText = dedent`Push
 Type: manual
 Duration: undefined
 Reference: undefined
 
 `;
-const automatedSelector = '[id$="task0_automated"]';
+const automatedSelector = '[id$="task_ChkWt"]';
 const expectedAutomatedPopupText = dedent`ChkWt
 Type: automated
 Duration: undefined

examples/workflow-test/tests/features/routing/routing-point.spec.ts

@@ -31,7 +31,7 @@ test.describe('The routing points of an edge', () => {
     });
 
     test('should be accessible', async () => {
-        const edge = await graph.getEdgeBySelector('[id$="d34c37e0-e45e-4cfe-a76f-0e9274ed8e60"]', Edge);
+        const edge = await graph.getEdgeBySelector('[id$="edge_task_Push_fork_1"]', Edge);
 
         const routingPoints = edge.routingPoints();
         expect((await routingPoints.points({ wait: false })).length).toBe(0);
@@ -46,7 +46,7 @@ test.describe('The routing points of an edge', () => {
     });
 
     test('should have the data kind attribute', async () => {
-        const edge = await graph.getEdgeBySelector('[id$="d34c37e0-e45e-4cfe-a76f-0e9274ed8e60"]', Edge);
+        const edge = await graph.getEdgeBySelector('[id$="edge_task_Push_fork_1"]', Edge);
 
         const routingPoints = edge.routingPoints();
         expect((await routingPoints.volatilePoints({ wait: false })).length).toBe(0);

examples/workflow-test/tests/features/select/select.spec.ts

@@ -87,12 +87,10 @@ test.describe('The select feature', () => {
         test('should allow to deselect a single element through a keybinding', async () => {
             const page = app.page;
             const element = await graph.getNodeByLabel('Push', TaskManual);
-            await element.select();
+            await element.click();
             const before = await graph.getNodesBySelector(`.${Selectable.CSS}`, TaskManual);
             expect(before).toHaveLength(1);
 
-            // Resize Handle
-            await page.keyboard.press('Escape');
             // Selection
             await page.keyboard.press('Escape');