cypress-dragndrop-kit 1.0.2 → 1.0.4

package/README.md

@@ -8,3 +8,41 @@ A lightweight, Cypress-native plugin that simplifies drag‑and‑drop and movem
 ```bash
 npm install --save-dev cypress-dragndrop-kit
 ```
+
+## 🛠 Usage
+
+In order to start using the package, all you need to do is import it within you `./cypress/support/e2e.ts` file:
+
+```typescript
+  // Location: cypress/support/e2e.ts
+  import 'cypress-dragndrop-kit';
+```
+
+### ✨ Available commands
+
+- `dragTo(targetElementLocator)`: Custom child command for dragging and dropping a chained element to a specified element location
+- `dragAndDrop(sourceElementLocator, targetElementLocator)`: Custom command for dragging and dropping from one element location to another 
+
+### ⚙️ Examples
+
+```typescript
+     // Usage of "dragTo(target)"
+     it('should be able to drag and drop an item by using "dragTo()"', () => {
+        cy.get('[data-id="3"]').dragTo('[data-id="47"]');
+
+        cy.get('[data-id="47"]').should('have.attr', 'data-index', 46);
+        cy.get('[data-id="3"]').should('have.attr', 'data-index', 47);
+    })
+
+    // Usage of "dragAndDrop(source, target)"
+    it('should be able to drag and drop an item by using "dragAndDrop()"', () => {
+        cy.dragAndDrop('[data-id="47"]', '[data-id="3"]');
+
+        cy.get('[data-id="47"]').should('have.attr', 'data-index', 3);
+        cy.get('[data-id="3"]').should('have.attr', 'data-index', 4);
+    })
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! If you have ideas, bugs, or feature requests—feel free to open an issue or submit a pull request.

package/dist/index.d.ts

@@ -1,2 +1 @@
-import './commands';
 export {};

package/dist/index.js

@@ -1,3 +1,38 @@
 "use strict";
+/// <reference types="cypress" />
+/// <reference path="./types.d.ts" />
 Object.defineProperty(exports, "__esModule", { value: true });
-require("./commands");
+const utils_1 = require("./utils");
+Cypress.Commands.add("dragTo", { prevSubject: 'element' }, (sourceElement, targetElement, options) => {
+    cy.get(targetElement).first().then(([target]) => {
+        cy.wrap(sourceElement).first().then(([source]) => {
+            var _a;
+            let sourceCoordinates = source.getBoundingClientRect();
+            let targetCoordinates = target.getBoundingClientRect();
+            const isScrollingDown = targetCoordinates.top - sourceCoordinates.top > 0;
+            const isScrollingRight = targetCoordinates.right - sourceCoordinates.right > 0;
+            if (isScrollingDown || isScrollingRight) {
+                cy.get(targetElement).first().scrollIntoView();
+            }
+            else {
+                const startX = sourceCoordinates.left + sourceCoordinates.width / 2;
+                const startY = sourceCoordinates.top + sourceCoordinates.height / 2;
+                sourceCoordinates = Object.assign(Object.assign({}, sourceCoordinates), { x: startX, y: startY });
+                const endX = targetCoordinates.left + targetCoordinates.width / 2;
+                const endY = targetCoordinates.top + targetCoordinates.height / 2;
+                targetCoordinates = Object.assign(Object.assign({}, targetCoordinates), { x: endX, y: endY });
+            }
+            cy.wrap(source)
+                .trigger("mousedown", (0, utils_1.params)(sourceCoordinates))
+                .wait((_a = options === null || options === void 0 ? void 0 : options.pressDelay) !== null && _a !== void 0 ? _a : 0)
+                .trigger("mousemove", (0, utils_1.params)(sourceCoordinates, 10));
+            cy.get("body")
+                .trigger("mousemove", (0, utils_1.params)(targetCoordinates))
+                .wait(1000)
+                .trigger("mouseup", { force: true });
+        });
+    });
+});
+Cypress.Commands.add("dragAndDrop", (sourceElement, targetElement, options) => {
+    cy.get(sourceElement).dragTo(targetElement, options);
+});

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+
+import { DraggableOption } from "./utils";
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * 
+             * @description Custom child command for dragging and dropping a chained element to a specified element location
+             * @param targetElement locator for the target element
+             * @example cy.get('[data-id="3"]').dragTo('[data-id="47"]');
+             * 
+             */
+            dragTo(targetElement: string, options?: DraggableOption): void;
+
+            /**
+             * 
+             * @description Custom command for dragging and dropping from one element location to another 
+             * @param sourceElement locator for the source element
+             * @param targetElement locator for the target element
+             * @example cy.dragAndDrop('[data-id="3"]', '[data-id="47"]');
+             * 
+             */
+            dragAndDrop(sourceElement: string, targetElement: string, options?: DraggableOption): void;
+        }
+    }
+}
+
+export {}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "cypress-dragndrop-kit",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Custom command meant for interacting with draggable elements in the UI",
   "main": "dist/index.js",
-  "types": "dist/index.d.js",
+  "types": "dist/types.d.ts",
   "files": ["dist"],
   "scripts": {
-    "build": "rm -rf dist/* && tsc",
+    "build": "rm -rf dist/* && tsc && cp src/types.d.ts dist/",
     "publish": "npx semantic-release",
     "test": "npx cypress run",
     "test:open": "npx cypress open"

package/dist/commands.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/commands.js

@@ -1,38 +0,0 @@
-"use strict";
-/// <reference types="cypress" />
-/// <reference path="./types.d.ts" />
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("./utils");
-Cypress.Commands.add("dragTo", { prevSubject: 'element' }, (sourceElement, targetElement, options) => {
-    cy.get(targetElement).first().then(([target]) => {
-        cy.wrap(sourceElement).first().then(([source]) => {
-            var _a;
-            let sourceCoordinates = source.getBoundingClientRect();
-            let targetCoordinates = target.getBoundingClientRect();
-            const isScrollingDown = targetCoordinates.top - sourceCoordinates.top > 0;
-            const isScrollingRight = targetCoordinates.right - sourceCoordinates.right > 0;
-            if (isScrollingDown || isScrollingRight) {
-                cy.get(targetElement).first().scrollIntoView();
-            }
-            else {
-                const startX = sourceCoordinates.left + sourceCoordinates.width / 2;
-                const startY = sourceCoordinates.top + sourceCoordinates.height / 2;
-                sourceCoordinates = Object.assign(Object.assign({}, sourceCoordinates), { x: startX, y: startY });
-                const endX = targetCoordinates.left + targetCoordinates.width / 2;
-                const endY = targetCoordinates.top + targetCoordinates.height / 2;
-                targetCoordinates = Object.assign(Object.assign({}, targetCoordinates), { x: endX, y: endY });
-            }
-            cy.wrap(source)
-                .trigger("mousedown", (0, utils_1.params)(sourceCoordinates))
-                .wait((_a = options === null || options === void 0 ? void 0 : options.pressDelay) !== null && _a !== void 0 ? _a : 0)
-                .trigger("mousemove", (0, utils_1.params)(sourceCoordinates, 10));
-            cy.get("body")
-                .trigger("mousemove", (0, utils_1.params)(targetCoordinates))
-                .wait(1000)
-                .trigger("mouseup", { force: true });
-        });
-    });
-});
-Cypress.Commands.add("dragAndDrop", (sourceElement, targetElement, options) => {
-    cy.get(sourceElement).dragTo(targetElement, options);
-});