85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
|
|
|
|
// Initialize the element
|
|
DeesInputWysiwyg;
|
|
|
|
tap.test('wysiwyg block movement during drag', async () => {
|
|
const element = document.createElement('dees-input-wysiwyg');
|
|
document.body.appendChild(element);
|
|
|
|
await element.updateComplete;
|
|
|
|
// Set initial content
|
|
element.blocks = [
|
|
{ id: 'block1', type: 'paragraph', content: 'Block 1' },
|
|
{ id: 'block2', type: 'paragraph', content: 'Block 2' },
|
|
{ id: 'block3', type: 'paragraph', content: 'Block 3' },
|
|
];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
await element.updateComplete;
|
|
|
|
const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
|
|
const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
|
|
|
|
// Start dragging block 1
|
|
const mockDragEvent = {
|
|
dataTransfer: {
|
|
effectAllowed: '',
|
|
setData: () => {},
|
|
setDragImage: () => {}
|
|
},
|
|
clientY: 50,
|
|
preventDefault: () => {},
|
|
} as any;
|
|
|
|
element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
|
|
|
|
// Wait for dragging class
|
|
await new Promise(resolve => setTimeout(resolve, 20));
|
|
|
|
// Verify drag state
|
|
expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
|
|
|
|
// Check that drag height was calculated
|
|
console.log('Checking drag height...');
|
|
const dragHandler = element.dragDropHandler as any;
|
|
console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
|
|
console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
|
|
|
|
// Manually call updateBlockPositions to simulate drag movement
|
|
console.log('Simulating drag movement...');
|
|
const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
|
|
|
|
// Simulate dragging down past block 2
|
|
const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
|
|
const block2Rect = block2.getBoundingClientRect();
|
|
const dragToY = block2Rect.bottom + 10;
|
|
|
|
console.log('Dragging to Y position:', dragToY);
|
|
updateBlockPositions(dragToY);
|
|
|
|
// Check if blocks have moved
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
|
|
const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
|
|
console.log('Block states after drag:');
|
|
blocks.forEach((block, i) => {
|
|
const classes = block.className;
|
|
const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
|
|
console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
|
|
});
|
|
|
|
// Check that at least one block has move class
|
|
const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
|
|
const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
|
|
console.log('Moved up blocks:', movedUpBlocks.length);
|
|
console.log('Moved down blocks:', movedDownBlocks.length);
|
|
|
|
// Clean up
|
|
element.dragDropHandler.handleDragEnd();
|
|
document.body.removeChild(element);
|
|
});
|
|
|
|
tap.start(); |