kie-issues#947: Playwright expansion phase - part 3 - DRDs (apache#2462)

packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx

@@ -72,7 +72,7 @@ export function DrdSelectorPanel() {
           columnGap: "40px",
         }}
       >
-        <div style={{ gridArea: "header-list" }}>
+        <div style={{ gridArea: "header-list" }} data-testid={"kie-tools--dmn-editor--drd-selector-popover"}>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
             <TextContent>
               <Text component="h3">DRDs</Text>
@@ -115,7 +115,11 @@ export function DrdSelectorPanel() {
             </EmptyState>
           </>
         )) || (
-          <div style={{ gridArea: "content-list" }} className={"kie-dmn-editor--drd-list"}>
+          <div
+            style={{ gridArea: "content-list" }}
+            className={"kie-dmn-editor--drd-list"}
+            data-testid={"kie-tools--dmn-editor--drd-list"}
+          >
             {drds.map((drd, i) => (
               <React.Fragment key={drd["@_id"]!}>
                 <button
@@ -140,7 +144,7 @@ export function DrdSelectorPanel() {
               {drdName}
             </Title>
             {drds.length > 0 && (
-              <Button variant={ButtonVariant.link} onClick={removeDrd} style={{ padding: 0 }}>
+              <Button variant={ButtonVariant.link} onClick={removeDrd} style={{ padding: 0 }} title="Remove DRD">
                 Remove
               </Button>
             )}

packages/dmn-editor/src/diagram/Palette.tsx

@@ -102,7 +102,11 @@ export function Palette({ pulse }: { pulse: boolean }) {
   return (
     <>
       <RF.Panel position={"top-left"}>
-        <aside className={"kie-dmn-editor--drd-selector"} style={{ position: "relative" }}>
+        <aside
+          data-testid={"kie-tools--dmn-editor--drd-selector"}
+          className={"kie-dmn-editor--drd-selector"}
+          style={{ position: "relative" }}
+        >
           <div ref={drdSelectorPopoverRef} style={{ position: "absolute", left: "56px", height: "100%", zIndex: -1 }} />
           <InlineFeelNameInput
             validate={() => true}
@@ -221,7 +225,11 @@ export function Palette({ pulse }: { pulse: boolean }) {
         <br />
         <aside className={"kie-dmn-editor--drg-panel-toggle"}>
           {diagram.openLhsPanel === DiagramLhsPanel.DRG_NODES && (
-            <div className={"kie-dmn-editor--palette-nodes-popover"} style={{ maxHeight }}>
+            <div
+              data-testid={"kie-tools--dmn-editor--palette-nodes-popover"}
+              className={"kie-dmn-editor--palette-nodes-popover"}
+              style={{ maxHeight }}
+            >
               <DrgNodesPanel />
             </div>
           )}

packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx

@@ -502,7 +502,10 @@ export function ShapeOptions({
                   alignItems: "center",
                 }}
               >
-                <div style={{ gridArea: "position-x-value" }}>
+                <div
+                  style={{ gridArea: "position-x-value" }}
+                  data-testid={"kie-tools--dmn-editor--properties-panel-node-shape-x-input"}
+                >
                   <TextInput
                     aria-label={"X"}
                     type={"number"}
@@ -516,7 +519,10 @@ export function ShapeOptions({
                   <p>X</p>
                 </div>
 
-                <div style={{ gridArea: "position-y-value" }}>
+                <div
+                  style={{ gridArea: "position-y-value" }}
+                  data-testid={"kie-tools--dmn-editor--properties-panel-node-shape-y-input"}
+                >
                   <TextInput
                     aria-label={"Y"}
                     type={"number"}

packages/dmn-editor/tests-e2e/__fixtures__/base.ts

@@ -34,6 +34,8 @@ import { GroupPropertiesPanel } from "./propertiesPanel/groupPropertiesPanel";
 import { DiagramPropertiesPanel } from "./propertiesPanel/diagramPropertiesPanel";
 import { MultipleNodesPropertiesPanel } from "./propertiesPanel/multipleNodesPropertiesPanel";
 import { Overlays } from "./overlays";
+import { Drds } from "./drds";
+import { DrgNodes } from "./drgNodes";
 import { DataTypes } from "./dataTypes";
 import { BeePropertiesPanel } from "./propertiesPanel/beePropertiesPanel";
 import { BoxedExpressionEditor } from "@kie-tools/boxed-expression-component/tests-e2e/__fixtures__/boxedExpression";
@@ -44,6 +46,8 @@ type DmnEditorFixtures = {
   bee: BoxedExpressionEditor;
   dataTypes: DataTypes;
   diagram: Diagram;
+  drds: Drds;
+  drgNodes: DrgNodes;
   edges: Edges;
   editor: Editor;
   jsonModel: JsonModel;
@@ -70,6 +74,12 @@ export const test = base.extend<DmnEditorFixtures>({
   dataTypes: async ({ page, monaco }, use) => {
     await use(new DataTypes(page, monaco));
   },
+  drds: async ({ page }, use) => {
+    await use(new Drds(page));
+  },
+  drgNodes: async ({ diagram, page }, use) => {
+    await use(new DrgNodes(diagram, page));
+  },
   diagram: async ({ page }, use) => {
     await use(new Diagram(page));
   },

packages/dmn-editor/tests-e2e/__fixtures__/drds.ts

@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+
+export class Drds {
+  constructor(public page: Page) {}
+
+  public async toggle() {
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").getByTitle("Select or edit DRD").click();
+  }
+
+  public async create(args: { name: string }) {
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector-popover").getByTitle("New DRD").click();
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").locator("input").fill(args.name);
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").locator("input").press("Tab");
+  }
+
+  public async rename(args: { newName: string }) {
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").locator("input").fill(args.newName);
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").locator("input").press("Tab");
+  }
+
+  public async remove(args: { name: string }) {
+    await this.navigateTo({ name: args.name });
+    await this.page.getByTitle("Remove DRD").click();
+  }
+
+  public async navigateTo(args: { name: string }) {
+    await this.page.getByTestId("kie-tools--dmn-editor--drd-list").getByText(args.name).click({ force: true });
+  }
+
+  public async getCurrent() {
+    return await this.page.getByTestId("kie-tools--dmn-editor--drd-selector").locator("input").inputValue();
+  }
+
+  public async getAll() {
+    return await this.page.getByTestId("kie-tools--dmn-editor--drd-list").locator("button").allInnerTexts();
+  }
+}

packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Page } from "@playwright/test";
+import { Diagram } from "./diagram";
+
+export class DrgNodes {
+  constructor(
+    public diagram: Diagram,
+    public page: Page
+  ) {}
+
+  public async open() {
+    await this.page.getByTitle("DRG Nodes").click();
+  }
+
+  public popover() {
+    return this.page.getByTestId("kie-tools--dmn-editor--palette-nodes-popover");
+  }
+
+  public async dragNode(args: { name: string; targetPosition: { x: number; y: number } }) {
+    await this.popover()
+      .getByText(args.name, { exact: true })
+      .dragTo(this.diagram.get(), { targetPosition: args.targetPosition });
+  }
+}

packages/dmn-editor/tests-e2e/__fixtures__/propertiesPanel/parts/shapeProperties.ts

@@ -47,10 +47,18 @@ export class ShapeProperties {
     const height = await this.panel
       .getByTestId("kie-tools--dmn-editor--properties-panel-node-shape-height-input")
       .inputValue();
+    const x = await this.panel
+      .getByTestId("kie-tools--dmn-editor--properties-panel-node-shape-x-input")
+      .locator("input")
+      .inputValue();
+    const y = await this.panel
+      .getByTestId("kie-tools--dmn-editor--properties-panel-node-shape-y-input")
+      .locator("input")
+      .inputValue();
 
     await this.panel.getByTitle("Expand / collapse Shape").click();
 
-    return { width: width, height: height };
+    return { width: width, height: height, x: x, y: y };
   }
 
   public async resetShape() {