elyra-ai#2238 Write function to compare transform string in Cypress tests (elyra-ai#2225)

Signed-off-by: Jerin George <[email protected]>

Author: Jerinjk14

canvas_modules/harness/cypress/e2e/canvas/zoom.cy.js

@@ -99,8 +99,7 @@ describe("Test zoomToReveal function returns the appropriate zoom object for a n
 		cy.verifyCanvasTransform(undefined);
 		// Zooming the canvas.
 		cy.clickToolbarZoomOut();
-		// TODO -- write function to test these +/- 2 px.
-		// cy.verifyCanvasTransform("translate(45.81818181818181,32.22727272727275) scale(0.9090909090909091)");
+		cy.verifyCanvasTransform("translate(45.81818181818181,32.22727272727275) scale(0.9090909090909091)");
 		// Test get Zoom to reveal & ZoomTo
 		cy.selectEntryFromDropdown("Histogram");
 		cy.setXPercentOffset(70);
@@ -145,15 +144,13 @@ describe("Test zoomToReveal function returns the appropriate zoom object for a l
 		cy.verifyCanvasTransform(undefined);
 		// Zooming the canvas.
 		cy.clickToolbarZoomOut();
-		// TODO -- write function to test these +/- 2 px.
-		// cy.verifyCanvasTransform("translate(45.81818181818181,32.22727272727275) scale(0.9090909090909091)");
+		cy.verifyCanvasTransform("translate(45.81818181818181,32.22727272727275) scale(0.9090909090909091)");
 		// Test get Zoom to reveal & ZoomTo
 		cy.selectEntryFromDropdown("Binding (entry) node-Execution node");
 		cy.setXPercentOffset(70);
 		cy.setYPercentOffset(60);
 		cy.submitAPI();
-		// TODO -- write function to test these +/- 2 px.
-		// cy.verifyCanvasTransform("translate(498.32727272727266,290.85454545454536) scale(0.9090909090909091)");
+		cy.verifyCanvasTransform("translate(498.32727272727266,290.85454545454536) scale(0.9090909090909091)");
 	});
 });
 

canvas_modules/harness/cypress/support/canvas/verification-cmds.js

@@ -1371,7 +1371,22 @@ Cypress.Commands.add("verifyNotificationIconType", (type) => {
 Cypress.Commands.add("verifyCanvasTransform", (movString) => {
 	cy.get("#canvas-div-0 .d3-canvas-group")
 		.invoke("attr", "transform")
-		.should("eq", movString);
+		.should((actualTransformString) => {
+			// Verify the movString passed is a string
+			if (typeof movString === "string") {
+				const expectedValues = parseTransformString(movString);
+				const actualValues = parseTransformString(actualTransformString);
+				// Compare each part of the transform with compareRange
+				compareCloseTo(actualValues.translateX, expectedValues.translateX);
+				compareCloseTo(actualValues.translateY, expectedValues.translateY);
+				compareCloseTo(actualValues.scale, expectedValues.scale);
+			} else if (typeof movString === "undefined") {
+				expect(actualTransformString).to.be.undefined;
+			} else {
+				throw new Error("Expected movString to be a string or undefined");
+			}
+		});
+
 });
 
 Cypress.Commands.add("verifyNotificationCounter", (count) => {
@@ -1427,7 +1442,7 @@ Cypress.Commands.add("verifyNotificationCenterDoesntExist", (hidden) => {
 Cypress.Commands.add("verifyNotificationCenterContent", (id, content) => {
 	if (typeof content === "string" && content.length > 0) {
 		cy.get(".notification-panel-" + id).should("contain", content);
-	}	else if (typeof content === "string" && content.length === 0) {
+	} else if (typeof content === "string" && content.length === 0) {
 		cy.get(".notification-panel-" + id).should("be.empty");
 	} else {
 		cy.get(".notification-panel-" + id).should("not.exist");
@@ -1481,6 +1496,19 @@ function verifyPath(actualPath, expectedPath) {
 	}
 }
 
+function parseTransformString(transformString) {
+	const translateMatch = transformString.match(/translate\(([^,]+),([^)]+)\)/);
+	const scaleMatch = transformString.match(/scale\(([^)]+)\)/);
+	if (!translateMatch || !scaleMatch) {
+		throw new Error("invalid string format");
+	}
+	return {
+		translateX: parseFloat(translateMatch[1]),
+		translateY: parseFloat(translateMatch[2]),
+		scale: parseFloat(scaleMatch[1])
+	};
+}
+
 function compareCloseTo(value, compareValue) {
 	expect(Number(value)).to.be.closeTo(Number(compareValue), Cypress.env("compareRange"));
 }