cover font options

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

@@ -358,7 +358,7 @@ 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={

packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/propertiesPanelBase.ts

@@ -74,15 +74,45 @@ export abstract class PropertiesPanelBase {
     return await this.panel().locator(".kie-dmn-editor--documentation-link--row-title").locator("a").all();
   }
 
-  public async setFont(args: { newFont: string }) {
+  public async setFont(args: {
+    fontSize?: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    striketrough?: boolean;
+    color?: string;
+    fontFamily?: string;
+  }) {
     await this.panel().getByTitle("Expand / collapse Font").click();
 
-    await this.panel().getByTestId("properties-panel-node-font-style").click();
-    await this.panel().getByText(args.newFont).click();
+    if (args.fontSize) {
+      await this.panel().getByLabel("Font size").locator("input").fill(args.fontSize);
+    }
+    if (args.bold) {
+      await this.panel().getByLabel("Toggle font bold").click();
+    }
+    if (args.italic) {
+      await this.panel().getByLabel("Toggle font italic").click();
+    }
+    if (args.underline) {
+      await this.panel().getByLabel("Toggle font underline").click();
+    }
+    if (args.striketrough) {
+      await this.panel().getByLabel("Toggle font strike through").click();
+    }
+    if (args.color) {
+      await this.panel().getByTestId("color-picker-font").fill(args.color);
+    }
+    if (args.fontFamily) {
+      await this.panel().getByTestId("properties-panel-node-font-style").click();
+      await this.panel().getByText(args.fontFamily).click();
+    }
 
     await this.diagram.resetFocus();
   }
 
+  public async resetFont() {}
+
   public async getFont() {
     await this.panel().getByTitle("Expand / collapse Font").click();
 

packages/dmn-editor/tests/e2e/drdArtifacts/changeGroupProperties.spec.ts

@@ -50,12 +50,35 @@ test.describe("Change Properties - Group", () => {
     expect(await groupPropertiesPanel.getDescription()).toBe("New Group Description");
   });
 
-  test("should change the Group node font - family", async ({ nodes, groupPropertiesPanel }) => {
+  test("should change the Group node font", async ({ nodes, groupPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
-    await groupPropertiesPanel.setFont({ newFont: "Verdana" });
+    await groupPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.GROUP })).toHaveScreenshot("change-group-font.png");
+  });
 
+  test("should reset the Group node font", async ({ nodes, groupPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.GROUP, position: NodePosition.TOP });
-    expect(await groupPropertiesPanel.getFont()).toBe("Verdana");
+    await groupPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await groupPropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.GROUP })).toHaveScreenshot("change-group-font.png");
   });
 
   test("should change the Group node shape - fill color", async ({ nodes, groupPropertiesPanel }) => {

packages/dmn-editor/tests/e2e/drdArtifacts/changeTextAnnotationProperties.spec.ts

@@ -61,12 +61,39 @@ test.describe("Change Properties - Text Annotation", () => {
     expect(await textAnnotationPropertiesPanel.getDescription()).toBe("New Text Annotation Description");
   });
 
-  test("should change the Text Annotation node font - family", async ({ nodes, textAnnotationPropertiesPanel }) => {
+  test("should change the Text Annotation node font", async ({ nodes, textAnnotationPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION });
-    await textAnnotationPropertiesPanel.setFont({ newFont: "Verdana" });
+    await textAnnotationPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION })).toHaveScreenshot(
+      "change-text-annotation-font.png"
+    );
+  });
 
+  test("should reset the Text Annotation node font", async ({ nodes, textAnnotationPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION });
-    expect(await textAnnotationPropertiesPanel.getFont()).toBe("Verdana");
+    await textAnnotationPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await textAnnotationPropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION })).toHaveScreenshot(
+      "reset-text-annotation-font.png"
+    );
   });
 
   test("should change the Text Annotation node shape - fill color", async ({

packages/dmn-editor/tests/e2e/drgElements/changeBkmProperties.spec.ts

@@ -75,12 +75,35 @@ test.describe("Change Properties - BKM", () => {
     expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
   });
 
-  test("should change the BKM node font - family", async ({ nodes, bkmPropertiesPanel }) => {
+  test("should change the BKM node font", async ({ nodes, bkmPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.BKM });
-    await bkmPropertiesPanel.setFont({ newFont: "Verdana" });
+    await bkmPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.BKM })).toHaveScreenshot("change-bkm-font.png");
+  });
 
+  test("should reset the BKM node font", async ({ nodes, bkmPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.BKM });
-    expect(await bkmPropertiesPanel.getFont()).toBe("Verdana");
+    await bkmPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await bkmPropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.BKM })).toHaveScreenshot("reset-bkm-font.png");
   });
 
   test("should change the BKM node shape - fill color", async ({ nodes, bkmPropertiesPanel }) => {

packages/dmn-editor/tests/e2e/drgElements/changeDecisionProperties.spec.ts

@@ -96,12 +96,35 @@ test.describe("Change Properties - Decision", () => {
     expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
   });
 
-  test("should change the Decision node font - family", async ({ nodes, decisionPropertiesPanel }) => {
-    await nodes.select({ name: DefaultNodeName.DECISION });
-    await decisionPropertiesPanel.setFont({ newFont: "Verdana" });
+  test("should change the Decision node font", async ({ nodes, decisionPropertiesPanel }) => {
+    await nodes.select({ name: DefaultNodeName.DECISION });
+    await decisionPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.DECISION })).toHaveScreenshot("change-decision-font.png");
+  });
 
+  test("should reset the Decision node font", async ({ nodes, decisionPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.DECISION });
-    expect(await decisionPropertiesPanel.getFont()).toBe("Verdana");
+    await decisionPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await decisionPropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.DECISION })).toHaveScreenshot("reset-decision-font.png");
   });
 
   test("should change the Decision node shape - fill color", async ({ nodes, decisionPropertiesPanel }) => {

packages/dmn-editor/tests/e2e/drgElements/changeDecisionServiceProperties.spec.ts

@@ -83,14 +83,39 @@ test.describe("Change Properties - Decision Service", () => {
     expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
   });
 
-  test("should change the Decision Service node font - family", async ({ nodes, decisionServicePropertiesPanel }) => {
+  test("should change the Decision Service node font", async ({ nodes, decisionServicePropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position: NodePosition.TOP });
     await decisionServicePropertiesPanel.setFont({
-      newFont: "Verdana",
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
     });
 
+    await expect(nodes.get({ name: DefaultNodeName.DECISION_SERVICE })).toHaveScreenshot(
+      "change-decision-service-font.png"
+    );
+  });
+
+  test("should reset the Decision Service node font", async ({ nodes, decisionServicePropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position: NodePosition.TOP });
-    expect(await decisionServicePropertiesPanel.getFont()).toBe("Verdana");
+    await decisionServicePropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await decisionServicePropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.DECISION_SERVICE })).toHaveScreenshot(
+      "reset-decision-service-font.png"
+    );
   });
 
   test("should change the Decision Service node shape - fill color", async ({

packages/dmn-editor/tests/e2e/drgElements/changeInputDataProperties.spec.ts

@@ -76,12 +76,35 @@ test.describe("Change Properties - Input Data", () => {
     expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
   });
 
-  test("should change the Input Data node font - family", async ({ nodes, inputDataPropertiesPanel }) => {
+  test("should change the Input Data node font", async ({ nodes, inputDataPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.INPUT_DATA });
-    await inputDataPropertiesPanel.setFont({ newFont: "Verdana" });
+    await inputDataPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.INPUT_DATA })).toHaveScreenshot("change-input-data-font.png");
+  });
 
+  test("should reset the Input Data node font", async ({ nodes, inputDataPropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.INPUT_DATA });
-    expect(await inputDataPropertiesPanel.getFont()).toBe("Verdana");
+    await inputDataPropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await inputDataPropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.INPUT_DATA })).toHaveScreenshot("reset-input-data-font.png");
   });
 
   test("should change the Input Data node shape - fill color", async ({ nodes, inputDataPropertiesPanel }) => {

packages/dmn-editor/tests/e2e/drgElements/changeKnowledgeSourceProperties.spec.ts

@@ -89,12 +89,39 @@ test.describe("Change Properties - Knowledge Source", () => {
     expect(links[0]).toHaveAttribute("href", "http://link.test.com/");
   });
 
-  test("should change the Knowledge Source node font - family", async ({ nodes, knowledgeSourcePropertiesPanel }) => {
+  test("should change the Knowledge Source node font", async ({ nodes, knowledgeSourcePropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
-    await knowledgeSourcePropertiesPanel.setFont({ newFont: "Verdana" });
+    await knowledgeSourcePropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+
+    await expect(nodes.get({ name: DefaultNodeName.KNOWLEDGE_SOURCE })).toHaveScreenshot(
+      "change-knowledge-source-font.png"
+    );
+  });
 
+  test("should reset the Knowledge Source node font", async ({ nodes, knowledgeSourcePropertiesPanel }) => {
     await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
-    expect(await knowledgeSourcePropertiesPanel.getFont()).toBe("Verdana");
+    await knowledgeSourcePropertiesPanel.setFont({
+      fontSize: "40",
+      bold: true,
+      italic: true,
+      underline: true,
+      striketrough: true,
+      color: "#f12200",
+      fontFamily: "Verdana",
+    });
+    await knowledgeSourcePropertiesPanel.resetFont();
+
+    await expect(nodes.get({ name: DefaultNodeName.KNOWLEDGE_SOURCE })).toHaveScreenshot(
+      "reset-knowledge-source-font.png"
+    );
   });
 
   test("should change the Knowledge Source node shape - fill color", async ({