@atlaskit/pragmatic-drag-and-drop-docs
Version:
This package holds the documentation for Pragmatic drag and drop in one place. It is not intended to be consumed directly by consumers. The package is used by other tools for sharing examples
56 lines (44 loc) • 1.88 kB
text/mdx
---
order: 3
title: Testing
description: Guidance on how to test your drag and drop experiences
---
With [`cypress`](https://www.cypress.io/), you need to ensure that when you trigger a drag event (eg
`"dragstart"`), you need to add
[`{force: true}`](https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Forcing).
This will ensure that the drag events fire on the correct elements.
You will also need to ensure that `cypress` triggers `DragEvent`s correctly. By default, a
`.trigger('dragstart')`, fires an `Event`, not a `DragEvent`. So you will need to set the
`eventConstructor` to be `DragEvent`, and pass through a `DataTransfer` (which can be empty).
```ts
it('should allow drag and drop between columns', () => {
const options = {
force: true,
eventConstructor: 'DragEvent',
// If you wanted to fake dragging particular data,
// you can add it to this `DataTransfer` with `.setData()`
// See: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
dataTransfer: new DataTransfer(),
};
cy.visit('/scenario/atlaskit-drag-and-drop');
// waiting for our board to be visible
cy.get('[data-testid="item-A0"]').should('be.visible');
// asserting initial list sizes
cy.get('[data-testid="column-A--card-list"]')
.find('[draggable="true"]')
.should('have.length', 16);
cy.get('[data-testid="column-B--card-list"]')
.find('[draggable="true"]')
.should('have.length', 16);
// Move A0 to column B
cy.get('[data-testid="item-A0"]').trigger('dragstart', options);
cy.get('[data-testid="item-B0"]').trigger('dragenter', options).trigger('drop', options);
// asserting list sizes after drag and drop
cy.get('[data-testid="column-A--card-list"]')
.find('[draggable="true"]')
.should('have.length', 15);
cy.get('[data-testid="column-B--card-list"]')
.find('[draggable="true"]')
.should('have.length', 17);
});
```