@wix/design-system
Version:
@wix/design-system
92 lines • 3.15 kB
JavaScript
import React from 'react';
import { createRendererWithUniDriver, cleanup, } from '../../utils/test-utils/react';
import { draggableUniDriverFactory } from './Draggable.uni.driver';
import { Draggable } from './Draggable';
const renderDraggableSet = ({ onDragStart, onDragEnd, onDrop, onHover }) => {
const commonProps = {
renderItem: ({ item }) => (React.createElement("div", { "data-hook": `item-${item.id}` }, item.text)),
onDragStart,
onDragEnd,
onDrop,
onHover,
setWrapperNode: () => { },
containerId: 'container-1',
groupName: 'group-1',
};
const items = [
{
id: '0',
item: { text: 'item 1', id: '0' },
index: 0,
},
{
id: '1',
item: { text: 'item 2', id: '1' },
index: 1,
},
];
return (React.createElement(Draggable.Manager, { dataHook: "dnd-provider" }, items.map(item => (React.createElement(Draggable.Item, { key: item.id, ...item, ...commonProps })))));
};
describe('Draggable', () => {
describe('[async]', () => {
runTests(createRendererWithUniDriver(draggableUniDriverFactory));
});
});
function runTests(render) {
afterEach(() => cleanup());
it('beginDrag/dragOver/endDrag', async () => {
const onDragStart = vi.fn();
const onDragEnd = vi.fn();
const onDrop = vi.fn();
const onHover = vi.fn();
const { driver } = render(renderDraggableSet({
onDragStart,
onDragEnd,
onDrop,
onHover,
}));
await driver.beginDrag({
dataHook: 'item-0',
});
expect(onDragStart).toHaveBeenCalledWith({
containerId: 'container-1',
groupName: 'group-1',
id: '0',
index: 0,
item: { text: 'item 1', id: '0' },
});
expect(onDragEnd).toHaveBeenCalledTimes(0);
expect(onDrop).toHaveBeenCalledTimes(0);
expect(onHover).toHaveBeenCalledTimes(0);
await driver.dragOver({
dataHook: 'item-1',
});
expect(onDragStart).toHaveBeenCalledTimes(1);
expect(onHover).toHaveBeenCalledWith({
id: '0',
addedIndex: 1,
removedIndex: 0,
item: { text: 'item 1', id: '0' },
});
expect(onDrop).toHaveBeenCalledTimes(0);
expect(onDragEnd).toHaveBeenCalledTimes(0);
await driver.endDrag();
expect(onDragStart).toHaveBeenCalledTimes(1);
expect(onHover).toHaveBeenCalledTimes(1);
expect(onDrop).toHaveBeenCalledWith({
addedIndex: 1,
addedToContainerId: 'container-1',
removedFromContainerId: 'container-1',
removedIndex: 0,
payload: { text: 'item 1', id: '0' },
});
expect(onDragEnd).toHaveBeenCalledWith({
containerId: 'container-1',
groupName: 'group-1',
id: '0',
index: 0,
item: { text: 'item 1', id: '0' },
});
});
}
//# sourceMappingURL=Draggable.spec.js.map