95 lines
3.0 KiB
TypeScript
95 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 drag handler initialization', async () => {
|
|
const element = document.createElement('dees-input-wysiwyg');
|
|
document.body.appendChild(element);
|
|
|
|
// Wait for element to be ready
|
|
await element.updateComplete;
|
|
|
|
// Check that drag handler is initialized
|
|
expect(element.dragDropHandler).toBeTruthy();
|
|
|
|
// Set initial content with multiple blocks
|
|
element.blocks = [
|
|
{ id: 'block1', type: 'paragraph', content: 'First paragraph' },
|
|
{ id: 'block2', type: 'paragraph', content: 'Second paragraph' },
|
|
];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
await element.updateComplete;
|
|
|
|
// Check that editor content ref exists
|
|
console.log('editorContentRef:', element.editorContentRef);
|
|
expect(element.editorContentRef).toBeTruthy();
|
|
|
|
// Check that blocks are rendered
|
|
const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper');
|
|
console.log('Number of block wrappers:', blockWrappers.length);
|
|
expect(blockWrappers.length).toEqual(2);
|
|
|
|
// Check drag handles
|
|
const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle');
|
|
console.log('Number of drag handles:', dragHandles.length);
|
|
expect(dragHandles.length).toEqual(2);
|
|
|
|
// Clean up
|
|
document.body.removeChild(element);
|
|
});
|
|
|
|
tap.test('wysiwyg drag start behavior', 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: 'Test block' },
|
|
];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
await element.updateComplete;
|
|
|
|
const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement;
|
|
expect(dragHandle).toBeTruthy();
|
|
|
|
// Check that drag handle has draggable attribute
|
|
console.log('Drag handle draggable:', dragHandle.draggable);
|
|
expect(dragHandle.draggable).toBeTrue();
|
|
|
|
// Test drag handler state before drag
|
|
console.log('Initial drag state:', element.dragDropHandler.dragState);
|
|
expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
|
|
|
|
// Try to manually call handleDragStart
|
|
const mockDragEvent = {
|
|
dataTransfer: {
|
|
effectAllowed: '',
|
|
setData: (type: string, data: string) => {
|
|
console.log('setData called with:', type, data);
|
|
},
|
|
setDragImage: (img: any, x: number, y: number) => {
|
|
console.log('setDragImage called');
|
|
}
|
|
},
|
|
clientY: 100,
|
|
preventDefault: () => {},
|
|
} as any;
|
|
|
|
element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
|
|
|
|
// Check drag state after drag start
|
|
console.log('Drag state after start:', element.dragDropHandler.dragState);
|
|
expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
|
|
|
|
// Clean up
|
|
element.dragDropHandler.handleDragEnd();
|
|
document.body.removeChild(element);
|
|
});
|
|
|
|
tap.start(); |