add fill and stroke color tests

ljmotta · Apr 9, 2024 · a0fc1af · a0fc1af
1 parent 7401dfe
commit a0fc1af
Show file tree

Hide file tree

Showing 15 changed files with 231 additions and 26 deletions.
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts
@@ -19,4 +19,16 @@
 
 import { PropertiesPanelBase } from "./propertiesPanelBase";
 
-export class BkmPropertiesPanel extends PropertiesPanelBase {}
+export class BkmPropertiesPanel extends PropertiesPanelBase {
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+}
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionPropertiesPanel.ts
@@ -39,4 +39,16 @@ export class DecisionPropertiesPanel extends PropertiesPanelBase {
   public async getAllowedAnswers() {
     return await this.panel().getByPlaceholder("Enter allowed answers...").inputValue();
   }
+
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
@@ -19,4 +19,16 @@
 
 import { PropertiesPanelBase } from "./propertiesPanelBase";
 
-export class DecisionServicePropertiesPanel extends PropertiesPanelBase {}
+export class DecisionServicePropertiesPanel extends PropertiesPanelBase {
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+}
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts
@@ -28,4 +28,16 @@ export class GroupPropertiesPanel extends PropertiesPanelBase {
     throw new Error("Not supported operation for Group");
     return [];
   }
+
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts
@@ -19,4 +19,16 @@
 
 import { PropertiesPanelBase } from "./propertiesPanelBase";
 
-export class InputDataPropertiesPanel extends PropertiesPanelBase {}
+export class InputDataPropertiesPanel extends PropertiesPanelBase {
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+}
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/knowledgeSourcePropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/knowledgeSourcePropertiesPanel.ts
@@ -44,4 +44,16 @@ export class KnowledgeSourcePropertiesPanel extends PropertiesPanelBase {
   public async getLocationURI() {
     return await this.panel().getByPlaceholder("Enter location URI...").inputValue();
   }
+
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts
@@ -58,4 +58,16 @@ export class MultipleNodesPropertiesPanel extends PropertiesPanelBase {
 
     await this.diagram.resetFocus();
   }
+
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/textAnnotationPropertiesPanel.ts b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/textAnnotationPropertiesPanel.ts
@@ -62,4 +62,16 @@ export class TextAnnotationProperties extends PropertiesPanelBase {
   public async getText() {
     return await this.panel().getByPlaceholder("Enter text...").inputValue();
   }
+
+  public async setFillColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-fill").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
+
+  public async setStrokeColor(args: { color: string }) {
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+    await this.panel().getByTestId("color-picker-shape-stroke").fill(args.color);
+    await this.panel().getByRole("button", { name: "Expand / collapse Shape" }).click();
+  }
 }
diff --git a/packages/dmn-editor/tests/e2e/drdArtifacts/changeGroupProperties.spec.ts b/packages/dmn-editor/tests/e2e/drdArtifacts/changeGroupProperties.spec.ts
@@ -58,7 +58,25 @@ test.describe("Change Properties - Group", () => {
     expect(await groupPropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the Group node shape - background color", async ({ nodes, groupPropertiesPanel }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+  test("should change the Group node shape - fill color", async ({ nodes, groupPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+    await groupPropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.GROUP }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "fill",
+      "rgba(241, 34, 0, 0.1)"
+    );
+  });
+
+  test("should change the Group node shape - stroke color", async ({ nodes, groupPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
+    await groupPropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.GROUP }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "stroke",
+      "rgba(241, 34, 0, 1)"
+    );
   });
 });
diff --git a/packages/dmn-editor/tests/e2e/drdArtifacts/changeTextAnnotationProperties.spec.ts b/packages/dmn-editor/tests/e2e/drdArtifacts/changeTextAnnotationProperties.spec.ts
@@ -69,23 +69,25 @@ test.describe("Change Properties - Text Annotation", () => {
     expect(await textAnnotationPropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test("should change the Text Annotation node shape - fill color", async ({ nodes, page }) => {
+  test("should change the Text Annotation node shape - fill color", async ({
+    nodes,
+    textAnnotationPropertiesPanel,
+  }) => {
     await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION });
-
-    await page.getByRole("button", { name: "Expand / collapse Shape" }).click();
-    await page.getByTestId("color-picker-shape-fill").fill("#f12200");
+    await textAnnotationPropertiesPanel.setFillColor({ color: "#f12200" });
 
     // It's necessary to pick the parent element ".." to have access to the SVG.
     await expect(
       nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION }).locator("..").locator("path").nth(0)
     ).toHaveAttribute("fill", "rgba(241, 34, 0, 0.1)");
   });
 
-  test("should change the Text Annotation node shape - stroke color", async ({ nodes, page }) => {
+  test("should change the Text Annotation node shape - stroke color", async ({
+    nodes,
+    textAnnotationPropertiesPanel,
+  }) => {
     await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION });
-
-    await page.getByRole("button", { name: "Expand / collapse Shape" }).click();
-    await page.getByTestId("color-picker-shape-stroke").fill("#f12200");
+    await textAnnotationPropertiesPanel.setStrokeColor({ color: "#f12200" });
 
     // It's necessary to pick the parent element ".." to have access to the SVG.
     await expect(

diff --git a/packages/dmn-editor/tests/e2e/drgElements/changeBkmProperties.spec.ts b/packages/dmn-editor/tests/e2e/drgElements/changeBkmProperties.spec.ts
@@ -83,7 +83,25 @@ test.describe("Change Properties - BKM", () => {
     expect(await bkmPropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the BKM node shape - background color", async ({ nodes, bkmPropertiesPanel }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+  test("should change the BKM node shape - fill color", async ({ nodes, bkmPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.BKM });
+    await bkmPropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.BKM }).locator("..").locator("polygon").nth(0)).toHaveAttribute(
+      "fill",
+      "rgba(241, 34, 0, 0.9)"
+    );
+  });
+
+  test("should change the BKM node shape - stroke color", async ({ nodes, bkmPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.BKM });
+    await bkmPropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.BKM }).locator("..").locator("polygon").nth(0)).toHaveAttribute(
+      "stroke",
+      "rgba(241, 34, 0, 1)"
+    );
   });
 });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/changeDecisionProperties.spec.ts b/packages/dmn-editor/tests/e2e/drgElements/changeDecisionProperties.spec.ts
@@ -104,7 +104,25 @@ test.describe("Change Properties - Decision", () => {
     expect(await decisionPropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the Decision node shape - background color", async ({ nodes, decisionPropertiesPanel }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+  test("should change the Decision node shape - fill color", async ({ nodes, decisionPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.DECISION });
+    await decisionPropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.DECISION }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "fill",
+      "rgba(241, 34, 0, 0.9)"
+    );
+  });
+
+  test("should change the Decision node shape - stroke color", async ({ nodes, decisionPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.DECISION });
+    await decisionPropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.DECISION }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "stroke",
+      "rgba(241, 34, 0, 1)"
+    );
   });
 });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/changeDecisionServiceProperties.spec.ts b/packages/dmn-editor/tests/e2e/drgElements/changeDecisionServiceProperties.spec.ts
@@ -93,10 +93,29 @@ test.describe("Change Properties - Decision Service", () => {
     expect(await decisionServicePropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the Decision Service node shape - background color", async ({
+  test("should change the Decision Service node shape - fill color", async ({
     nodes,
     decisionServicePropertiesPanel,
   }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+    await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position: NodePosition.TOP });
+    await decisionServicePropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(
+      nodes.get({ name: DefaultNodeName.DECISION_SERVICE }).locator("..").locator("rect").nth(0)
+    ).toHaveAttribute("fill", "rgba(241, 34, 0, 0.1)");
+  });
+
+  test("should change the Decision Service node shape - stroke color", async ({
+    nodes,
+    decisionServicePropertiesPanel,
+  }) => {
+    await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position: NodePosition.TOP });
+    await decisionServicePropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(
+      nodes.get({ name: DefaultNodeName.DECISION_SERVICE }).locator("..").locator("rect").nth(0)
+    ).toHaveAttribute("stroke", "rgba(241, 34, 0, 1)");
   });
 });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/changeInputDataProperties.spec.ts b/packages/dmn-editor/tests/e2e/drgElements/changeInputDataProperties.spec.ts
@@ -84,10 +84,25 @@ test.describe("Change Properties - Input Data", () => {
     expect(await inputDataPropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the Input Data node shape - background color", async ({
-    nodes,
-    inputDataPropertiesPanel,
-  }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+  test("should change the Input Data node shape - fill color", async ({ nodes, inputDataPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.INPUT_DATA });
+    await inputDataPropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.INPUT_DATA }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "fill",
+      "rgba(241, 34, 0, 0.9)"
+    );
+  });
+
+  test("should change the Input Data node shape - stroke color", async ({ nodes, inputDataPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.INPUT_DATA });
+    await inputDataPropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(nodes.get({ name: DefaultNodeName.INPUT_DATA }).locator("..").locator("rect").nth(0)).toHaveAttribute(
+      "stroke",
+      "rgba(241, 34, 0, 1)"
+    );
   });
 });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/changeKnowledgeSourceProperties.spec.ts b/packages/dmn-editor/tests/e2e/drgElements/changeKnowledgeSourceProperties.spec.ts
@@ -97,10 +97,29 @@ test.describe("Change Properties - Knowledge Source", () => {
     expect(await knowledgeSourcePropertiesPanel.getFont()).toBe("Verdana");
   });
 
-  test.skip("should change the Knowledge Source node shape - background color", async ({
+  test("should change the Knowledge Source node shape - fill color", async ({
     nodes,
     knowledgeSourcePropertiesPanel,
   }) => {
-    // blocked https://github.com/microsoft/playwright/issues/19929#issuecomment-1377035969
+    await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
+    await knowledgeSourcePropertiesPanel.setFillColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(
+      nodes.get({ name: DefaultNodeName.KNOWLEDGE_SOURCE }).locator("..").locator("path").nth(0)
+    ).toHaveAttribute("fill", "rgba(241, 34, 0, 0.9)");
+  });
+
+  test("should change the Knowledge Source node shape - stroke color", async ({
+    nodes,
+    knowledgeSourcePropertiesPanel,
+  }) => {
+    await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
+    await knowledgeSourcePropertiesPanel.setStrokeColor({ color: "#f12200" });
+
+    // It's necessary to pick the parent element ".." to have access to the SVG.
+    await expect(
+      nodes.get({ name: DefaultNodeName.KNOWLEDGE_SOURCE }).locator("..").locator("path").nth(0)
+    ).toHaveAttribute("stroke", "rgba(241, 34, 0, 1)");
   });
 });