add more resize tests - snapping

ljmotta · Apr 8, 2024 · 5a40d0f · 5a40d0f
1 parent 1fa7aac
commit 5a40d0f
Show file tree

Hide file tree

Showing 9 changed files with 868 additions and 224 deletions.
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/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}

diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/overlays.ts b/packages/dmn-editor/tests/e2e/__fixtures__/overlays.ts
@@ -27,4 +27,11 @@ export class Overlays {
     await this.page.getByLabel("Snapping").uncheck({ force: true });
     await this.page.getByTitle("Overlays").click();
   }
+
+  public async setSnapping(args: { horizontal: string; vertical: string }) {
+    await this.page.getByTitle("Overlays").click();
+    await this.page.getByTestId("horizontal-snapping-control").locator("input").fill(args.horizontal);
+    await this.page.getByTestId("vertical-snapping-control").locator("input").fill(args.vertical);
+    await this.page.getByTitle("Overlays").click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts b/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts
@@ -25,39 +25,116 @@ test.beforeEach(async ({ editor }) => {
 });
 
 test.describe("Resize node - Group", () => {
-  test.beforeEach(async ({ overlays, palette }) => {
-    await overlays.turnOffSnapping();
-    await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
-  });
+  test.describe("Resize with snapping turned off", () => {
+    test.beforeEach(async ({ overlays, palette }) => {
+      await overlays.turnOffSnapping();
+      await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
+    });
+
+    test("should increase Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 50, yOffset: 50 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("370");
+      expect(width).toEqual("370");
+    });
+
+    test("should decrease Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 100, yOffset: 100 });
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -20, yOffset: -20 });
 
-  test("should increase Group node size", async ({ nodes, groupPropertiesPanel }) => {
-    await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 50, yOffset: 50 });
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("400");
+      expect(width).toEqual("400");
+    });
 
-    await groupPropertiesPanel.open();
-    await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
-    const { width, height } = await groupPropertiesPanel.getShape();
-    expect(height).toEqual("370");
-    expect(width).toEqual("370");
+    test("should not decrease below minimal Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -50, yOffset: -50 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("270");
+      expect(width).toEqual("280");
+    });
   });
 
-  test("should decrease Group node size", async ({ nodes, groupPropertiesPanel }) => {
-    await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 100, yOffset: 100 });
-    await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -20, yOffset: -20 });
+  test.describe("Resize with snapping turned on", () => {
+    test.beforeEach(async ({ palette }) => {
+      await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
+    });
+
+    test("should increase Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 50, yOffset: 50 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("360");
+      expect(width).toEqual("360");
+    });
+
+    test("should decrease Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 100, yOffset: 100 });
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -20, yOffset: -20 });
 
-    await groupPropertiesPanel.open();
-    await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
-    const { width, height } = await groupPropertiesPanel.getShape();
-    expect(height).toEqual("400");
-    expect(width).toEqual("400");
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("400");
+      expect(width).toEqual("400");
+    });
+
+    test("should not decrease below minimal Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -50, yOffset: -50 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("260");
+      expect(width).toEqual("280");
+    });
   });
 
-  test("should not decrease below minimal Group node size", async ({ nodes, groupPropertiesPanel }) => {
-    await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -50, yOffset: -50 });
+  test.describe("Resize with non default snapping", () => {
+    test.beforeEach(async ({ overlays, palette }) => {
+      await overlays.setSnapping({ horizontal: "50", vertical: "50" });
+      await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
+    });
+
+    test("should increase Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 50, yOffset: 50 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("400");
+      expect(width).toEqual("400");
+    });
+
+    test("should decrease Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: 100, yOffset: 100 });
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -20, yOffset: -20 });
+
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("400");
+      expect(width).toEqual("400");
+    });
+
+    test("should not decrease below minimal Group node size", async ({ nodes, groupPropertiesPanel }) => {
+      await nodes.resize({ nodeName: DefaultNodeName.GROUP, position: NodePosition.TOP, xOffset: -50, yOffset: -50 });
 
-    await groupPropertiesPanel.open();
-    await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
-    const { width, height } = await groupPropertiesPanel.getShape();
-    expect(height).toEqual("270");
-    expect(width).toEqual("280");
+      await groupPropertiesPanel.open();
+      await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+      const { width, height } = await groupPropertiesPanel.getShape();
+      expect(height).toEqual("300");
+      expect(width).toEqual("300");
+    });
   });
 });