@wix/design-system
Version:
@wix/design-system
46 lines • 2.36 kB
JavaScript
export const dragAndDropPlaywrightDriverFactory = ({ base, }) => {
return {
beginDrag: async ({ dataHook }) => {
const baseLocator = await base.unwrap();
// Use evaluate to dispatch synthetic events like Puppeteer does
await baseLocator.evaluate((baseElement, sourceDataHook) => {
const sourceElement = baseElement.querySelector(`[data-hook="${sourceDataHook}"]`);
if (!sourceElement) {
throw new Error(`Element with data-hook="${sourceDataHook}" not found`);
}
const { x, y, height } = sourceElement.getBoundingClientRect();
sourceElement.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: x,
clientY: y + height / 2,
}));
}, dataHook);
},
dragOver: async ({ dataHook, offset, }) => {
const baseLocator = await base.unwrap();
const moveMouseToNewPosition = () => baseLocator.evaluate((baseElement, args) => {
const destinationElement = baseElement.querySelector(`[data-hook="${args.destinationDataHook}"]`);
if (!destinationElement) {
throw new Error(`Element with data-hook="${args.destinationDataHook}" not found`);
}
const { x, y, height } = destinationElement.getBoundingClientRect();
const eventOptions = {
bubbles: true,
clientX: args.xAxisOffset ? x + args.xAxisOffset : x,
clientY: y + height / 2,
};
baseElement.dispatchEvent(new MouseEvent('mousemove', eventOptions));
}, { destinationDataHook: dataHook, xAxisOffset: offset?.x });
// Move twice to ensure proper drag-over registration (same as Puppeteer driver)
await moveMouseToNewPosition();
await moveMouseToNewPosition();
},
endDrag: async () => {
const baseLocator = await base.unwrap();
await baseLocator.evaluate(baseElement => {
baseElement.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
});
},
};
};
//# sourceMappingURL=dragAndDropPlaywrightDriverFactory.js.map