From 57f7110df9cc371c4e2f828d0d8df0f8405b2874 Mon Sep 17 00:00:00 2001 From: PRINCESANCHEZ <67511950+PRINCESANCHEZ@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:22:11 -0700 Subject: [PATCH] #2222 Create Cypress test cases for WYSIWYG comments (#2223) Signed-off-by: Prince Sanchez --- .../src/common-canvas/common-canvas-utils.js | 4 +- .../cypress/e2e/canvas/comments-wysiwyg.cy.js | 76 +++++++++++++++++++ .../support/canvas/text-toolbar-cmds.js | 36 ++++++++- .../support/canvas/verification-cmds.js | 13 ++++ 4 files changed, 124 insertions(+), 5 deletions(-) create mode 100644 canvas_modules/harness/cypress/e2e/canvas/comments-wysiwyg.cy.js 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 index fdf327e5fd..2da7e67271 100644 --- 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 new file mode 100644 index 0000000000..cc8f887444 --- /dev/null +++ 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 index d93c2dd4d7..f9bfae4bf3 100644 --- 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 index 29169a9089..aa415be156 100644 --- 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"));