#2203 Create test cases for new function to control contents of Left … (

#2204)

Signed-off-by: Prince Sanchez <[email protected]>

canvas_modules/harness/cypress/e2e/canvas/comments-wysiwyg.cy.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 describe("Test for verifying WYSIWYG comments functionality in the application", function() {
 	beforeEach(() => {
 		cy.visit("/");

canvas_modules/harness/cypress/e2e/canvas/left-flyout.cy.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe("Test for verifying the Left Flyout panel functionality and layout in the application", function() {
+	beforeEach(() => {
+		cy.visit("/");
+		cy.setCanvasConfig({ "selectedPaletteLayout": "None" });
+		cy.setCanvasConfig({ "selectedShowLeftFlyout": true });
+	});
+
+	it("Test ensuring the Left Flyout panel has the correct default size", function() {
+		cy.verifyLeftFlyoutPanelWidth(300);
+		cy.verifyLeftFlyoutPanelHeight(750);
+	});
+
+	it("Test ensuring the Left Flyout panel has the correct size when positioned under the Canvas toolbar", function() {
+		cy.setCanvasConfig({ "selectedLeftFlyoutUnderToolbar": true });
+		cy.verifyLeftFlyoutPanelWidth(300);
+		cy.verifyLeftFlyoutPanelHeight(709);
+	});
+});

canvas_modules/harness/cypress/e2e/canvas/right-flyout.cy.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe("Test for verifying the Right Flyout panel functionality and layout in the application", function() {
+	beforeEach(() => {
+		cy.visit("/");
+		cy.setCanvasConfig({ "selectedShowRightFlyout": true });
+	});
+
+	it("Test ensuring Right Flyout panel has the correct default size", function() {
+		cy.verifyRightFlyoutPanelWidth(300);
+		cy.verifyRightFlyoutPanelHeight(750);
+	});
+
+	it("Test ensuring Right Flyout panel has the correct size when positioned under the Canvas toolbar", function() {
+		cy.setCanvasConfig({ "selectedRightFlyoutUnderToolbar": true });
+		cy.verifyRightFlyoutPanelWidth(300);
+		cy.verifyRightFlyoutPanelHeight(709);
+	});
+});

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

@@ -319,7 +319,7 @@ describe("Test customized palette and notification panel buttons", function() {
 
 		// Click the customized palette button and make sure it opens the palette
 		cy.clickToolbarPaletteOpen();
-		cy.verifyLeftPanelWidth(256);
+		cy.verifyPalettePanelWidth(256);
 
 		// Click the customized notification panel button and make sure it opens the notification panel
 		cy.clickToolbarNotifications();

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

@@ -888,14 +888,38 @@ Cypress.Commands.add("verifyTopPanelWidth", (width) => {
 	});
 });
 
-Cypress.Commands.add("verifyLeftPanelWidth", (width) => {
+Cypress.Commands.add("verifyPalettePanelWidth", (width) => {
 	cy.get(".palette-flyout-div").should((element) => {
 		// Use compareCloseTo here because top-panel width is slighyly different
 		// on the build machine to its width when running tests on a local machine.
 		compareCloseTo(element[0].offsetWidth, width);
 	});
 });
 
+Cypress.Commands.add("verifyLeftFlyoutPanelWidth", (width) => {
+	cy.get(".left-flyout-panel").should((element) => {
+		compareCloseTo(element[0].offsetWidth, width);
+	});
+});
+
+Cypress.Commands.add("verifyLeftFlyoutPanelHeight", (height) => {
+	cy.get(".left-flyout-panel").should((element) => {
+		compareCloseTo(element[0].offsetHeight, height);
+	});
+});
+
+Cypress.Commands.add("verifyRightFlyoutPanelWidth", (width) => {
+	cy.get(".right-flyout-panel").should((element) => {
+		compareCloseTo(element[0].offsetWidth, width);
+	});
+});
+
+Cypress.Commands.add("verifyRightFlyoutPanelHeight", (height) => {
+	cy.get(".right-flyout-panel").should((element) => {
+		compareCloseTo(element[0].offsetHeight, height);
+	});
+});
+
 Cypress.Commands.add("verifyCommentDimensions", (commentText, width, height) => {
 	cy.getCommentWithText(commentText)
 		.then((comment) => {

docs/pages/03.02.01-canvas-config.md

@@ -361,6 +361,9 @@ This is a boolean. The default is `true`. It is recommended you leave this set t
 #### **enableRightFlyoutUnderToolbar**
 This is a boolean. The default is false. If set to true the right flyout panel, when opened, will appear below the toolbar and will not cause the toolbar to compress. The default behavior is that the right flyout panel, when opened, will appear at the side of the toolbar and will compress the space available for the toolbar to be displayed. Warning: the notifications panel which is tied to the notifications icon in the toolbar will appear over the top of the right-side flyout with this option set to true.
 
+#### **enableLeftFlyoutUnderToolbar**
+This is a boolean. The default is false. If set to true the left flyout panel, when opened, will appear below the toolbar and will not cause the toolbar to compress. The default behavior is that the left flyout panel, when opened, will appear at the side of the toolbar and will compress the space available for the toolbar to be displayed. 
+
 #### **enableExternalPipelineFlows**
 This is a boolean. The default is false. If true, the context menu will include a `Create External Supernode` option when a set of objects are selected from which a supernode can be created.