update custom migration target crud dnd dependency (#1212)

Signed-off-by: Alejandro Brugarolas <[email protected]>
konveyor · Aug 30, 2024 · ab6e816 · ab6e816
1 parent 49b5dbd
commit ab6e816
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 19 deletions.
diff --git a/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts b/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts
@@ -200,17 +200,14 @@ describe(["@tier1", "@interop"], "Custom Migration Targets CRUD operations", ()
                     target1.create();
                 }
                 closeSuccessAlert();
+                cy.wait("@getRule");
 
                 const dragButton = cy
                     .contains(CustomMigrationTargetView.card, target.name, { timeout: 12 * SEC })
                     .find(CustomMigrationTargetView.dragButton);
 
                 // Moves the custom migration target to the first place
-                cy.wait("@getRule");
-                dragButton.drag(commonView.optionMenu, {
-                    force: true,
-                    waitForAnimations: false,
-                });
+                cy.dragAndDrop(dragButton, cy.get(CustomMigrationTargetView.dragAndDropSection));
 
                 Analysis.open(true);
                 const application = new Analysis(

diff --git a/cypress/e2e/views/custom-migration-target.view.ts b/cypress/e2e/views/custom-migration-target.view.ts
@@ -24,4 +24,5 @@ export enum CustomMigrationTargetView {
     card = ".pf-v5-c-card",
     cardContainer = "div.dnd-grid",
     languageDropdown = "#action-select-toggle",
+    dragAndDropSection = ".dnd-grid",
 }
diff --git a/cypress/support/commands.js → cypress/support/commands.ts b/cypress/support/commands.js → cypress/support/commands.ts
@@ -41,3 +41,14 @@
 
 require("cy-verify-downloads").addCustomCommand();
 require("cypress-downloadfile/lib/downloadFileCommand");
+
+Cypress.Commands.add(
+    "dragAndDrop",
+    (dragElement: Cypress.Chainable, dropElement: Cypress.Chainable) => {
+        dragElement
+            .realMouseDown({ button: "left", position: "center" })
+            .realMouseMove(0, 10, { position: "center" })
+            .wait(200);
+        dropElement.realMouseMove(0, 0, { position: "topLeft" }).realMouseUp().wait(200);
+    }
+);
diff --git a/cypress/support/e2e.js → cypress/support/e2e.ts b/cypress/support/e2e.js → cypress/support/e2e.ts
@@ -13,20 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
@@ -49,6 +35,11 @@ require("cypress-grep")();
 // https://github.com/Brugui7/cypress-log-filter
 require("cypress-log-filter");
 
+// Allows to handle special actions like drag-n-drop
+// The use of this library is limited to Chromium-based browsers
+// https://github.com/dmtrKovalenko/cypress-real-events
+import "cypress-real-events";
+
 /** Hide XHR logs line */
 // TODO: Improve by implementing a configuration parameter
 const app = window.top;
@@ -60,3 +51,18 @@ if (app && !app.document.head.querySelector("[data-hide-command-log-request]"))
 
     app.document.head.appendChild(style);
 }
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Drags an element to a drop location.
+             * This custom command works only on Chromium-based browsers
+             * @example cy.dragAndDrop(cy.get('#source'), cy.get('#target'))
+             * @param dragElement
+             * @param dropElement
+             */
+            dragAndDrop(dragElement: Cypress.Chainable, dropElement: Cypress.Chainable): void;
+        }
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
         "cypress-log-filter": "^1.0.4",
         "cypress-multi-reporters": "^1.5.0",
         "cypress-react-selector": "^2.3.17",
+        "cypress-real-events": "^1.13.0",
         "cypress-xpath": "^1.6.2",
         "decompress": "^4.2.1",
         "faker": "^5.5.3",

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,6 +7,7 @@
             "cypress-xpath",
             "@testing-library/cypress",
             "cypress-react-selector",
+            "cypress-real-events",
             "node"
         ],
         "skipLibCheck": true,