add tests for the node resize feature and properties panel

packages/dmn-editor/src/diagram/nodes/Nodes.tsx

@@ -279,6 +279,7 @@ export const InputDataNode = React.memo(
                 nodeType={type as typeof NODE_TYPES.inputData}
                 snapGrid={snapGrid}
                 nodeId={id}
+                nodeName={inputData["@_label"] ?? inputData["@_name"]}
                 nodeShapeIndex={shape.index}
                 isAlternativeInputDataShape={isAlternativeInputDataShape}
               />
@@ -466,6 +467,7 @@ export const DecisionNode = React.memo(
               nodeType={type as typeof NODE_TYPES.decision}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={decision["@_label"] ?? decision["@_name"] ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -604,6 +606,7 @@ export const BkmNode = React.memo(
               nodeType={type as typeof NODE_TYPES.bkm}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={bkm["@_label"] ?? bkm["@_name"] ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -730,6 +733,7 @@ export const KnowledgeSourceNode = React.memo(
               nodeType={type as typeof NODE_TYPES.knowledgeSource}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={knowledgeSource["@_label"] ?? knowledgeSource["@_name"] ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -846,6 +850,7 @@ export const TextAnnotationNode = React.memo(
               nodeType={type as typeof NODE_TYPES.textAnnotation}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={textAnnotation["@_label"] ?? textAnnotation.text?.__$$text ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -1042,6 +1047,7 @@ export const DecisionServiceNode = React.memo(
               nodeType={type as typeof NODE_TYPES.decisionService}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={decisionService["@_label"] ?? decisionService["@_name"] ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -1187,6 +1193,7 @@ export const GroupNode = React.memo(
               nodeType={type as typeof NODE_TYPES.group}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={group["@_label"] ?? group["@_name"] ?? ""}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -1263,6 +1270,7 @@ export const UnknownNode = React.memo(
               nodeType={type as typeof NODE_TYPES.unknown}
               snapGrid={snapGrid}
               nodeId={id}
+              nodeName={"unknown"}
               nodeShapeIndex={shape.index}
             />
           )}
@@ -1293,6 +1301,7 @@ const resizerControlStyle = {
 type NodeResizeHandleProps = {
   snapGrid: SnapGrid;
   nodeId: string;
+  nodeName: string;
   nodeShapeIndex: number;
 } & (
   | { nodeType: Extract<NodeType, typeof NODE_TYPES.inputData>; isAlternativeInputDataShape: boolean }
@@ -1312,6 +1321,7 @@ export function NodeResizerHandle(props: NodeResizeHandleProps) {
   return (
     <RF.NodeResizeControl style={resizerControlStyle} minWidth={minSize["@_width"]} minHeight={minSize["@_height"]}>
       <div
+        data-testid={`${props.nodeName}-resize-handle`}
         style={{
           position: "absolute",
           top: "-10px",

packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx

@@ -50,6 +50,7 @@ export function OverlaysPanel() {
         </FormGroup>
         <FormGroup label="Horizontal">
           <Slider
+            data-testid={"horizontal-snapping-control"}
             className={"kie-dmn-editor--snap-slider"}
             isDisabled={!diagram.snapGrid.isEnabled}
             value={diagram.snapGrid.x}
@@ -69,6 +70,7 @@ export function OverlaysPanel() {
         </FormGroup>
         <FormGroup label="Vertical">
           <Slider
+            data-testid={"vertical-snapping-control"}
             className={"kie-dmn-editor--snap-slider"}
             isDisabled={!diagram.snapGrid.isEnabled}
             value={diagram.snapGrid.y}

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

@@ -26,6 +26,7 @@ export function ColorPicker(props: {
   colorPickerRef?: React.MutableRefObject<HTMLInputElement>;
   icon?: React.ReactNode;
   colorDisplay?: React.ReactNode;
+  name: string;
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -56,7 +57,9 @@ export function ColorPicker(props: {
               }
             }
           }}
-          aria-label={"Font color"}
+          name={props.name}
+          data-testid={`color-picker-${props.name}`}
+          aria-label={"Color picker"}
           type={"color"}
           disabled={false}
           value={props.color}

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

@@ -35,6 +35,7 @@ export function DiagramPropertiesPanel() {
 
   return (
     <DrawerPanelContent
+      data-testid="properties-panel-container"
       isResizable={true}
       minSize={"300px"}
       defaultSize={"500px"}

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

@@ -23,7 +23,6 @@ import { FormSection } from "@patternfly/react-core/dist/js/components/Form";
 import { NumberInput } from "@patternfly/react-core/dist/js/components/NumberInput";
 import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
 import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core/dist/js/components/ToggleGroup";
-import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
 import { PencilAltIcon } from "@patternfly/react-icons/dist/js/icons/pencil-alt-icon";
 import { UndoAltIcon } from "@patternfly/react-icons/dist/js/icons/undo-alt-icon";
 import * as React from "react";
@@ -359,11 +358,12 @@ export function FontOptions({ startExpanded, nodeIds }: { startExpanded: boolean
                 <ToggleGroupItem
                   key={FontStyleToggleOptions.FONT_COLOR}
                   className={"kie-dmn-editor--font-options-toggle-group-item-color-picker"}
-                  aria-label={"Toggle font strike through"}
+                  aria-label={"Font color"}
                   buttonId={FontStyleToggleOptions.FONT_COLOR}
                   onClick={() => colorPickerRef.current?.click()}
                   text={
                     <ColorPicker
+                      name={"font"}
                       icon={<p>A</p>}
                       colorPickerRef={colorPickerRef}
                       color={fontColor}
@@ -374,22 +374,24 @@ export function FontOptions({ startExpanded, nodeIds }: { startExpanded: boolean
               </ToggleGroup>
             </div>
             <br />
-            <Select
-              toggleRef={toggleRef}
-              variant={SelectVariant.single}
-              aria-label={"Select font style"}
-              isOpen={isFontFamilySelectOpen}
-              onSelect={onSelectFont}
-              onToggle={() => setFontFamilySelectOpen((prev) => !prev)}
-              selections={fontFamily ?? ""}
-              isDisabled={false}
-              maxHeight={inViewTimezoneSelect.maxHeight}
-              direction={inViewTimezoneSelect.direction}
-            >
-              {WEBSAFE_FONTS_LIST.map((fontName, index) => (
-                <SelectOption key={index} value={fontName} style={{ fontFamily: fontName }} />
-              ))}
-            </Select>
+            <div data-testid="properties-panel-node-font-style">
+              <Select
+                toggleRef={toggleRef}
+                variant={SelectVariant.single}
+                aria-label={"Select font style"}
+                isOpen={isFontFamilySelectOpen}
+                onSelect={onSelectFont}
+                onToggle={() => setFontFamilySelectOpen((prev) => !prev)}
+                selections={fontFamily ?? ""}
+                isDisabled={false}
+                maxHeight={inViewTimezoneSelect.maxHeight}
+                direction={inViewTimezoneSelect.direction}
+              >
+                {WEBSAFE_FONTS_LIST.map((fontName, index) => (
+                  <SelectOption key={index} value={fontName} style={{ fontFamily: fontName }} />
+                ))}
+              </Select>
+            </div>
           </div>
         </FormSection>
       )}

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

@@ -151,6 +151,7 @@ export function GlobalDiagramProperties() {
             <FormSection style={{ paddingLeft: "20px", marginTop: 0 }}>
               <FormGroup label="ID">
                 <ClipboardCopy
+                  placeholder="Enter a diagram ID..."
                   isReadOnly={false}
                   hoverTip="Copy"
                   clickTip="Copied"
@@ -166,6 +167,7 @@ export function GlobalDiagramProperties() {
 
               <FormGroup label="Namespace">
                 <ClipboardCopy
+                  placeholder="Enter a diagram Namespace..."
                   isReadOnly={false}
                   hoverTip="Copy"
                   clickTip="Copied"

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

@@ -56,7 +56,7 @@ export function PropertiesPanelHeader(props: {
         {props.expands && (
           <div className={"kie-dmn-editor--properties-panel-header-toogle-expanded"}>
             <Button
-              title={"Expand / collapse documentation link"}
+              title={`Expand / collapse ${props.title}`}
               variant={ButtonVariant.plain}
               className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
               onClick={() => props.toogleSectionExpanded?.()}

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

@@ -276,6 +276,7 @@ export function ShapeOptions({
                   className={"kie-dmn-editor--shape-options-toggle-button"}
                   text={
                     <ColorPicker
+                      name="shape-fill"
                       icon={
                         <div
                           style={{
@@ -305,6 +306,7 @@ export function ShapeOptions({
                   className={"kie-dmn-editor--shape-options-toggle-button"}
                   text={
                     <ColorPicker
+                      name="shape-stroke"
                       colorDisplay={
                         <div
                           style={{
@@ -344,6 +346,7 @@ export function ShapeOptions({
                     >
                       <TextInput
                         aria-label={"Width"}
+                        data-testid={"properties-panel-node-shape-width-input"}
                         type={"number"}
                         isDisabled={isDimensioningEnabled ? false : true}
                         value={isDimensioningEnabled ? boundWidth : undefined}
@@ -369,6 +372,7 @@ export function ShapeOptions({
                     >
                       <TextInput
                         aria-label={"Height"}
+                        data-testid={"properties-panel-node-shape-height-input"}
                         type={"number"}
                         isDisabled={isDimensioningEnabled ? false : true}
                         value={isDimensioningEnabled ? boundHeight : undefined}
@@ -385,8 +389,9 @@ export function ShapeOptions({
                   buttonId={"shape-style-toggle-group-bound-height"}
                 />
               </Tooltip>
-              <Tooltip content={"Reset"}>
+              <Tooltip content={"Reset shape"}>
                 <ToggleGroupItem
+                  title={"Reset shape"}
                   onClick={onReset}
                   className={"kie-dmn-editor--shape-options-toggle-button"}
                   text={<UndoAltIcon />}
@@ -417,7 +422,7 @@ export function ShapeOptions({
                     isDisabled={false}
                     value={boundPositionX}
                     onChange={onChangePositionX}
-                    placeholder={"Enter a value..."}
+                    placeholder={"Enter X value..."}
                   />
                 </div>
                 <div style={{ gridArea: "position-x-label" }}>
@@ -431,7 +436,7 @@ export function ShapeOptions({
                     isDisabled={false}
                     value={boundPositionY}
                     onChange={onChangePositionY}
-                    placeholder={"Enter a value..."}
+                    placeholder={"Enter Y value..."}
                   />
                 </div>
                 <div style={{ gridArea: "position-y-label" }}>

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

@@ -24,6 +24,16 @@ import { Nodes } from "./nodes";
 import { Editor } from "./editor";
 import { Edges } from "./edges";
 import { JsonModel } from "./jsonModel";
+import { DecisionServicePropertiesPanel } from "./propertiesPanel/decisionServicePropertiesPanel";
+import { DecisionPropertiesPanel } from "./propertiesPanel/decisionPropertiesPanel";
+import { KnowledgeSourcePropertiesPanel } from "./propertiesPanel/knowledgeSourcePropertiesPanel";
+import { TextAnnotationProperties as TextAnnotationPropertiesPanel } from "./propertiesPanel/textAnnotationPropertiesPanel";
+import { BkmPropertiesPanel } from "./propertiesPanel/bkmPropertiesPanel";
+import { InputDataPropertiesPanel } from "./propertiesPanel/inputDataPropertiesPanel";
+import { GroupPropertiesPanel } from "./propertiesPanel/groupPropertiesPanel";
+import { DiagramPropertiesPanel } from "./propertiesPanel/diagramPropertiesPanel";
+import { MultipleNodesPropertiesPanel } from "./propertiesPanel/multipleNodesPropertiesPanel";
+import { Overlays } from "./overlays";
 
 type DmnEditorFixtures = {
   diagram: Diagram;
@@ -32,6 +42,16 @@ type DmnEditorFixtures = {
   jsonModel: JsonModel;
   nodes: Nodes;
   palette: Palette;
+  overlays: Overlays;
+  bkmPropertiesPanel: BkmPropertiesPanel;
+  decisionPropertiesPanel: DecisionPropertiesPanel;
+  decisionServicePropertiesPanel: DecisionServicePropertiesPanel;
+  diagramPropertiesPanel: DiagramPropertiesPanel;
+  groupPropertiesPanel: GroupPropertiesPanel;
+  inputDataPropertiesPanel: InputDataPropertiesPanel;
+  knowledgeSourcePropertiesPanel: KnowledgeSourcePropertiesPanel;
+  multipleNodesPropertiesPanel: MultipleNodesPropertiesPanel;
+  textAnnotationPropertiesPanel: TextAnnotationPropertiesPanel;
 };
 
 export const test = base.extend<DmnEditorFixtures>({
@@ -53,6 +73,36 @@ export const test = base.extend<DmnEditorFixtures>({
   palette: async ({ page, diagram, nodes }, use) => {
     await use(new Palette(page, diagram, nodes));
   },
+  overlays: async ({ page }, use) => {
+    await use(new Overlays(page));
+  },
+  bkmPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new BkmPropertiesPanel(diagram, page));
+  },
+  decisionPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new DecisionPropertiesPanel(diagram, page));
+  },
+  decisionServicePropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new DecisionServicePropertiesPanel(diagram, page));
+  },
+  diagramPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new DiagramPropertiesPanel(diagram, page));
+  },
+  groupPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new GroupPropertiesPanel(diagram, page));
+  },
+  knowledgeSourcePropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new KnowledgeSourcePropertiesPanel(diagram, page));
+  },
+  inputDataPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new InputDataPropertiesPanel(diagram, page));
+  },
+  multipleNodesPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new MultipleNodesPropertiesPanel(diagram, page));
+  },
+  textAnnotationPropertiesPanel: async ({ diagram, page }, use) => {
+    await use(new TextAnnotationPropertiesPanel(diagram, page));
+  },
 });
 
 export { expect } from "@playwright/test";

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

@@ -91,7 +91,7 @@ export class Nodes {
     targetPosition: { x: number; y: number };
     thenRenameTo?: string;
   }) {
-    await this.hover({ name: args.from, position: NodePosition.TOP });
+    await this.select({ name: args.from, position: NodePosition.TOP });
     const node = this.get({ name: args.from });
     const { addNodeTitle, nodeName } = this.getNewConnectedNodeProperties(args.type);
 
@@ -124,6 +124,17 @@ export class Nodes {
     await this.diagram.get().press("Enter");
   }
 
+  public async resize(args: { nodeName: string; position?: NodePosition; xOffset: number; yOffset: number }) {
+    await this.select({ name: args.nodeName, position: args.position ?? NodePosition.CENTER });
+
+    const resizeHandle = this.get({ name: args.nodeName }).getByTestId(`${args.nodeName}-resize-handle`);
+    const { x, y, width, height } = (await resizeHandle.boundingBox()) ?? { x: 0, y: 0, width: 0, height: 0 };
+    await this.page.mouse.move(x + width / 2, y + height / 2);
+    await this.page.mouse.down();
+    await this.page.mouse.move(x + args.xOffset + width / 2, y + args.yOffset + height / 2);
+    await this.page.mouse.up();
+  }
+
   public async select(args: { name: string; position?: NodePosition }) {
     const node = this.get({ name: args.name });