cypress-dragndrop-kit 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,46 +3,73 @@
|
|
|
3
3
|
A lightweight, Cypress-native plugin that simplifies drag‑and‑drop and movement interactions in end-to-end tests. Perfect for testing sortable lists, draggable elements, and custom UI components.
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
<br/>
|
|
7
|
+
|
|
8
|
+
|
|
6
9
|
## 🚀 Installation
|
|
7
10
|
|
|
8
11
|
```bash
|
|
9
12
|
npm install --save-dev cypress-dragndrop-kit
|
|
10
13
|
```
|
|
14
|
+
<br/>
|
|
11
15
|
|
|
12
16
|
## 🛠 Usage
|
|
13
17
|
|
|
14
18
|
In order to start using the package, all you need to do is import it within you `./cypress/support/e2e.ts` file:
|
|
15
19
|
|
|
16
20
|
```typescript
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
// Location: cypress/support/e2e.ts
|
|
22
|
+
import 'cypress-dragndrop-kit';
|
|
19
23
|
```
|
|
24
|
+
<br/>
|
|
20
25
|
|
|
21
26
|
### ✨ Available commands
|
|
22
27
|
|
|
23
|
-
- `dragTo(targetElementLocator)`: Custom child command for dragging and dropping a chained element to a specified element location
|
|
24
|
-
- `dragAndDrop(sourceElementLocator, targetElementLocator)`: Custom command for dragging and dropping from one element location to another
|
|
28
|
+
- `dragTo(targetElementLocator, options)`: Custom child command for dragging and dropping a chained element to a specified element location
|
|
29
|
+
- `dragAndDrop(sourceElementLocator, targetElementLocator, options)`: Custom command for dragging and dropping from one element location to another
|
|
30
|
+
|
|
31
|
+
<br/>
|
|
32
|
+
|
|
33
|
+
### ⚙️ Command Options
|
|
34
|
+
|
|
35
|
+
The `options` input parameter is an optional object for handling specific cases related to the drag-and-drop functionality.
|
|
36
|
+
|
|
37
|
+
| Option | Type | Default | Description |
|
|
38
|
+
| --- | --- | --- | --- |
|
|
39
|
+
| `pressDelay` | `number` | `0` | Time delay (in milliseconds) after mouse down event, before initiating the dragging of the element. Useful for simulating long-press behavior |
|
|
25
40
|
|
|
26
|
-
|
|
41
|
+
<br/>
|
|
42
|
+
|
|
43
|
+
### 📘 Examples
|
|
27
44
|
|
|
28
45
|
```typescript
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
46
|
+
// Usage of "dragTo(target)"
|
|
47
|
+
it('should be able to drag and drop an item by using "dragTo()"', () => {
|
|
48
|
+
cy.get('[data-id="3"]').dragTo('[data-id="47"]');
|
|
49
|
+
|
|
50
|
+
cy.get('[data-id="47"]').should('have.attr', 'data-index', 46);
|
|
51
|
+
cy.get('[data-id="3"]').should('have.attr', 'data-index', 47);
|
|
52
|
+
})
|
|
32
53
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
54
|
+
// Usage of "dragAndDrop(source, target)"
|
|
55
|
+
it('should be able to drag and drop an item by using "dragAndDrop()"', () => {
|
|
56
|
+
cy.dragAndDrop('[data-id="47"]', '[data-id="3"]');
|
|
36
57
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
58
|
+
cy.get('[data-id="47"]').should('have.attr', 'data-index', 3);
|
|
59
|
+
cy.get('[data-id="3"]').should('have.attr', 'data-index', 4);
|
|
60
|
+
})
|
|
40
61
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
})
|
|
62
|
+
// Usage of "dragTo(target, { pressDelay })"
|
|
63
|
+
it('should be able to drag and drop an item after a 2 second delay by using "dragTo()"', () => {
|
|
64
|
+
cy.get('[data-id="47"]').dragTo('[data-id="3"]', { pressDelay: 2000 });
|
|
65
|
+
|
|
66
|
+
cy.get('[data-id="47"]').should('have.attr', 'data-index', 3);
|
|
67
|
+
cy.get('[data-id="3"]').should('have.attr', 'data-index', 4);
|
|
68
|
+
})
|
|
44
69
|
```
|
|
45
70
|
|
|
71
|
+
<br/>
|
|
72
|
+
|
|
46
73
|
## 🤝 Contributing
|
|
47
74
|
|
|
48
|
-
Contributions are welcome! If you have ideas, bugs, or feature requests—feel free to open an issue or submit a pull request.
|
|
75
|
+
Contributions are welcome! If you have ideas, bugs, or feature requests—feel free to open an issue or submit a pull request.
|