#2222 Create Cypress test cases for WYSIWYG comments (#2223)

Signed-off-by: Prince Sanchez <[email protected]>
elyra-ai · Oct 29, 2024 · 57f7110 · 57f7110
1 parent e6ba2b3
commit 57f7110
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 5 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js
@@ -1504,9 +1504,9 @@ export default class CanvasUtils {
 			switch (format.value) {
 			default:
 			case "outline-solid":
-				return { field: "border-width", value: "1px" };
+				return { field: "border-style", value: "solid" };
 			case "outline-none":
-				return { field: "border-width", value: "0" };
+				return { field: "border-style", value: "none" };
 			}
 		}
 

diff --git a/canvas_modules/harness/cypress/e2e/canvas/comments-wysiwyg.cy.js b/canvas_modules/harness/cypress/e2e/canvas/comments-wysiwyg.cy.js
@@ -0,0 +1,76 @@
+describe("Test for verifying WYSIWYG comments functionality in the application", function() {
+	beforeEach(() => {
+		cy.visit("/");
+		cy.setCanvasConfig({ "selectedWYSIWYGComments": true });
+		cy.rightClickToDisplayContextMenu(500, 50);
+		cy.verifyOptionInContextMenu("New WYSIWYG comment");
+		cy.clickOptionFromContextMenu("New WYSIWYG comment");
+		cy.editTextInComment("", "First Comment", false);
+	});
+
+	it("Test to verify functionality of font option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-font", "IBM Plex Mono");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "font-family", styleValue: "IBM Plex Mono" });
+	});
+
+	it("Test to verify functionality of text size option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-text-size", "18");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "font-size", styleValue: "18px" });
+	});
+
+	it("Test to verify functionality of bold option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("bold");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "font-weight", styleValue: "600" });
+	});
+
+	it("Test to verify functionality of italics option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("italics");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "font-style", styleValue: "italic" });
+	});
+
+	it("Test to verify functionality of underline option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("underline");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "text-decoration", styleValue: "underline" });
+	});
+
+	it("Test to verify functionality of striketrough option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("strikethrough");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "text-decoration", styleValue: "line-through" });
+	});
+
+	it("Test to verify functionality of text color option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-text-color", "#A2191F");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "color", styleValue: "rgb(162, 25, 31)" });
+	});
+
+	it("Test to verify functionality of horizontal align option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-align-horiz", "Center");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "text-align", styleValue: "center" });
+	});
+
+	it("Test to verify functionality of vertical align option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-align-vert", "Bottom");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "vertical-align", styleValue: "bottom" });
+	});
+
+	it("Test to verify functionality of background color option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("submenu-background-color", "#0E6027");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "background-color", styleValue: "rgb(14, 96, 39)" });
+	});
+
+	it("Test to verify functionality of outline option in WYSIWYG toolbar", function() {
+		cy.clickTextToolbarOption("sub-menu-outline", "Solid outline");
+		cy.clickCanvasAt(5, 5);
+		cy.verifyWysiwygCommentStyles({ styleName: "border-width", styleValue: "1px" });
+	});
+});
diff --git a/canvas_modules/harness/cypress/support/canvas/text-toolbar-cmds.js b/canvas_modules/harness/cypress/support/canvas/text-toolbar-cmds.js
@@ -17,9 +17,22 @@
 Cypress.Commands.add("clickTextToolbarOption", (action, menuAction) => {
 	cy.getTextToolbarAction(action).click();
 
-	// The header action causes a menu to appear so we handle that usng menuAction.
-	if (action === "headerStyle") {
+	// The actions below cause a menu to appear so we handle that using menuAction.
+	switch (action) {
+	case "headerStyle":
+	case "submenu-font":
+	case "submenu-text-size":
+	case "submenu-align-horiz":
+	case "submenu-align-vert":
+	case "sub-menu-outline":
 		cy.getOptionFromTextToolbarOverflow(menuAction).click({ force: true });
+		break;
+	case "submenu-text-color":
+	case "submenu-background-color":
+		cy.getOptionFromTextToolbarColorPalette(menuAction).click({ force: true });
+		break;
+	default:
+		return;
 	}
 });
 
@@ -38,7 +51,24 @@ Cypress.Commands.add("getOptionFromTextToolbarOverflow", (optionName) => {
 		.find("button")
 		.then((options) => {
 			for (let idx = 0; idx < options.length; idx++) {
-				if (options[idx].outerText === optionName) {
+				const optionText = options[idx].outerText;
+				if (optionText === optionName) {
+					return options[idx];
+				}
+			}
+			return null;
+		});
+});
+
+Cypress.Commands.add("getOptionFromTextToolbarColorPalette", (optionName) => {
+	cy.getTextToolbar()
+		.find(".toolbar-popover-list")
+		.find(".color-picker")
+		.find("div")
+		.then((options) => {
+			for (let idx = 0; idx < options.length; idx++) {
+				const dataColor = options[idx].getAttribute("data-color");
+				if (dataColor === optionName) {
 					return options[idx];
 				}
 			}

diff --git a/canvas_modules/harness/cypress/support/canvas/verification-cmds.js b/canvas_modules/harness/cypress/support/canvas/verification-cmds.js
@@ -492,6 +492,19 @@ Cypress.Commands.add("verifyDetachedLinkPathToTarget", (trgNodeName, trgPortId,
 		});
 });
 
+Cypress.Commands.add("verifyWysiwygCommentStyles", ({ styleName, styleValue }) => {
+	if (styleName === "border-width") {
+		cy.get(".d3-comment-text-scroll")
+			.should("exist")
+			.and("have.css", "border-width", styleValue);
+	} else {
+		cy.get(".d3-comment-text")
+			.should("exist")
+			.and("have.css", styleName)
+			.and("include", styleValue);
+	}
+});
+
 Cypress.Commands.add("verifyLinkIsSelected", (linkId) => {
 	cy.getLinkUsingLinkId(linkId)
 		.then((linkGrp) => expect(linkGrp[0].getAttribute("data-selected")).to.equal("true"));